KeyFrame type for onsample, added remove().

Added test for onsample and addEventListener.
Corrected type for AnimationKeyFrame, array [0, "1"] is allowed.
This commit is contained in:
ktmblueskyarb 2017-03-28 12:48:58 +02:00
parent d2d933019a
commit b223e64754
2 changed files with 31 additions and 4 deletions

View File

@ -24,7 +24,7 @@ declare class AnimationPlaybackEvent {
interface AnimationKeyFrame {
easing?: string;
offset?: number;
[key: string]: string | string[] | number | number[] | undefined;
[key: string]: string | number | [string | number, string | number] | undefined;
}
interface AnimationTimeline {
@ -46,15 +46,17 @@ interface AnimationEffectTiming {
declare class KeyframeEffect {
constructor(target: HTMLElement, effect: AnimationKeyFrame | AnimationKeyFrame[], timing: number | AnimationEffectTiming, id?: string);
activeDuration: number;
onsample: any;
parent: any;
target: any;
onsample: (timeFraction: number | null, effect: KeyframeEffect, animation: Animation) => void | undefined;
parent: KeyframeEffect | null;
target: HTMLElement;
timing: AnimationEffectTiming;
getFrames(): AnimationKeyFrame[];
remove(): void;
}
interface AnimationEventListener {
(evt: AnimationPlaybackEvent): void;
}
declare class Animation {
constructor(effect: KeyframeEffect, timeline?: AnimationTimeline);
currentTime: number;

View File

@ -94,3 +94,28 @@ function test_whiteRabbit() {
}
// Testing onsample
// https://github.com/web-animations/web-animations-js/releases
function test_onsample_And_addEventListener() {
var elem = document.createElement("div");
if (elem) {
elem.style.width = '150px';
elem.style.color = 'black';
elem.textContent = "HELLO";
document.body.appendChild(elem);
let myEffect = new KeyframeEffect(elem, [], 1000);
myEffect.onsample = (timeFraction, effect, animation) => {
console.log("fraction", timeFraction);
// After finish event, timeFraction is null
if (timeFraction) {
effect.target.style.opacity = timeFraction.toFixed(2);
}
};
// onsample is write only
console.log(myEffect.onsample); // => undefined
var myAnimation = document.timeline.play(myEffect);
myAnimation.addEventListener("finish", (e) => {
console.log("finished", e);
})
}
}