Merge pull request #15384 from kritollm/web-animations-js

Added type definitions for web-animations-js

web-animations-js/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es5",
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": false,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "web-animations-js.d.ts",
+        "web-animations-js-tests.ts"
+    ]
+}

web-animations-js/web-animations-js-tests.ts

@@ -0,0 +1,93 @@
+// From the documentation
+function test_doc() {
+    const elem = document.createElement('div');
+    const animation = elem.animate({
+        opacity: [0.5, 1],
+        transform: ['scale(0.5)', 'scale(1)']
+    }, {
+            direction: 'alternate',
+            duration: 500,
+            iterations: Infinity
+        });
+}
+// From https://io2015codelabs.appspot.com/codelabs/web-animations-transitions-playbackcontrol
+// To test KeyframeEffect, SequenceEffect and GroupEffect
+function test_AnimationsApiNext() {
+    function buildFadeIn(target: HTMLElement) {
+        const steps = [
+            { opacity: 0, transform: 'translate(0, 20em)' },
+            { opacity: 1, transform: 'translate(0)' }
+        ];
+        return new KeyframeEffect(target, steps, {
+            duration: 500,
+            delay: -1000,
+            fill: 'backwards',
+            easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+        });
+    }
+    function buildFadeOut(target: HTMLElement) {
+        const angle = Math.pow((Math.random() * 16) - 6, 3);
+        const offset = (Math.random() * 20) - 10;
+        const transform = 'translate(' + offset + 'em, 20em) ' +
+            'rotate(' + angle + 'deg) ' +
+            'scale(0)';
+        const steps = [
+            { visibility: 'visible', opacity: 1, transform: 'none' },
+            { visibility: 'visible', opacity: 0, transform: transform }
+        ];
+        return new KeyframeEffect(target, steps, {
+            duration: 1500,
+            easing: 'ease-in'
+        });
+    }
+    const effectNode = document.createElement('div');
+    effectNode.className = 'circleEffect';
+    const bounds = document.documentElement.getBoundingClientRect();
+    effectNode.style.left = bounds.left + bounds.width / 2 + 'px';
+    effectNode.style.top = bounds.top + bounds.height / 2 + 'px';
+    const header = document.querySelector('header');
+    header.appendChild(effectNode);
+    const newColor = 'hsl(' + Math.round(Math.random() * 255) + ', 46%, 42%)';
+    effectNode.style.background = newColor;
+    const scaleSteps = [{ transform: 'scale(0)' }, { transform: 'scale(1)' }];
+    const timing: AnimationEffectTiming = { duration: 2500, easing: 'ease-in-out', fill: "backwards" };
+    const scaleEffect = new KeyframeEffect(effectNode, scaleSteps, timing);
+    const fadeEffect = new SequenceEffect([buildFadeOut(effectNode), buildFadeIn(effectNode)]);
+    const allEffects = [scaleEffect, fadeEffect];
+    // Play all animations within this group.
+    const groupEffect = new GroupEffect(allEffects);
+    const anim = document.timeline.play(groupEffect);
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Animation/Animation
+// http://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010
+function test_whiteRabbit() {
+    var whiteRabbit = document.getElementById("rabbit");
+
+    var rabbitDownKeyframes = new KeyframeEffect(
+        whiteRabbit,
+        [
+            { transform: 'translateY(0%)' },
+            { transform: 'translateY(100%)' }
+        ],
+        { duration: 3000, fill: 'forwards' }
+    );
+
+    var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
+
+    // On tap or click,
+    whiteRabbit.addEventListener("mousedown", downHeGoes, false);
+    whiteRabbit.addEventListener("touchstart", downHeGoes, false);
+
+    // Trigger a single-fire animation
+    function downHeGoes(event: Event) {
+
+        // Remove those event listeners
+        whiteRabbit.removeEventListener("mousedown", downHeGoes, false);
+        whiteRabbit.removeEventListener("touchstart", downHeGoes, false);
+
+        // Play rabbit animation
+        rabbitDownAnimation.play();
+
+    }
+}

web-animations-js/web-animations-js.d.ts

@@ -0,0 +1,92 @@
+// Type definitions for web-animations-js v2.2.2
+// Project: https://github.com/web-animations/web-animations-js
+// Definitions by: Kristian Moerch <https://github.com/kritollm/>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare type AnimationEffectTimingFillMode = "none" | "forwards" | "backwards" | "both" | "auto";
+declare type AnimationEffectTimingPlaybackDirection = "normal" | "reverse" | "alternate" | "alternate-reverse";
+declare type AnimationPlayState = "idle" | "pending" | "running" | "paused" | "finished";
+
+declare class AnimationPlaybackEvent {
+    constructor(target: Animation, currentTime: number, timelineTime: number);
+    target: Animation;
+    currentTime: number;
+    timelineTime: number;
+    type: string;
+    bubbles: boolean;
+    cancelable: boolean;
+    currentTarget: Animation;
+    defaultPrevented: boolean;
+    eventPhase: number;
+    timeStamp: number;
+}
+
+interface AnimationKeyFrame {
+    easing?: string;
+    offset?: number;
+    [key: string]: string | string[] | number | number[];
+}
+
+interface AnimationTimeline {
+    currentTime: number;
+    getAnimations(): Animation[];
+    play(effect: KeyframeEffect): Animation;
+}
+interface AnimationEffectTiming {
+    delay?: number;
+    direction?: AnimationEffectTimingPlaybackDirection;
+    duration?: number;
+    easing?: string;
+    endDelay?: number;
+    fill?: AnimationEffectTimingFillMode;
+    iterationStart?: number;
+    iterations?: number;
+    playbackRate?: number;
+}
+declare class KeyframeEffect {
+    constructor(target: HTMLElement, effect: AnimationKeyFrame | AnimationKeyFrame[], timing: number | AnimationEffectTiming, id?: string);
+    activeDuration: number;
+    onsample: any;
+    parent: any;
+    target: any;
+    timing: AnimationEffectTiming;
+    getFrames(): AnimationKeyFrame[];
+}
+interface AnimationEventListener {
+    (evt: AnimationPlaybackEvent): void;
+}
+declare class Animation {
+    constructor(effect: KeyframeEffect, timeline?: AnimationTimeline);
+    currentTime: number;
+    id: string;
+    oncancel: AnimationEventListener;
+    onfinish: AnimationEventListener;
+    readonly playState: AnimationPlayState;
+    playbackRate: number;
+    startTime: number;
+    cancel(): void;
+    finish(): void;
+    pause(): void;
+    play(): void;
+    reverse(): void;
+    addEventListener(type: number, handler: AnimationEventListener): void;
+    removeEventListener(type: number, handler: AnimationEventListener): void;
+    effect: KeyframeEffect;
+    readonly finished: Promise<Animation>;
+    readonly ready: Promise<Animation>;
+    timeline: AnimationTimeline;
+}
+
+declare class SequenceEffect extends KeyframeEffect {
+    constructor(effects: KeyframeEffect[]);
+}
+declare class GroupEffect extends KeyframeEffect {
+    constructor(effects: KeyframeEffect[]);
+}
+interface Element {
+    animate(effect: AnimationKeyFrame | AnimationKeyFrame[], timing: number | AnimationEffectTiming): Animation;
+    getAnimations(): Animation[];
+}
+interface Document {
+    timeline: AnimationTimeline;
+}