1

node_modules/zrender/src/animation/Clip.ts

@@ -0,0 +1,142 @@
+/**
+ * 动画主控制器
+ * @config target 动画对象，可以是数组，如果是数组的话会批量分发onframe等事件
+ * @config life(1000) 动画时长
+ * @config delay(0) 动画延迟时间
+ * @config loop(true)
+ * @config onframe
+ * @config easing(optional)
+ * @config ondestroy(optional)
+ * @config onrestart(optional)
+ *
+ * TODO pause
+ */
+
+import easingFuncs, {AnimationEasing} from './easing';
+import type Animation from './Animation';
+import { isFunction, noop } from '../core/util';
+import { createCubicEasingFunc } from './cubicEasing';
+
+type OnframeCallback = (percent: number) => void;
+type ondestroyCallback = () => void
+type onrestartCallback = () => void
+
+export type DeferredEventTypes = 'destroy' | 'restart'
+// type DeferredEventKeys = 'ondestroy' | 'onrestart'
+
+export interface ClipProps {
+    life?: number
+    delay?: number
+    loop?: boolean
+    easing?: AnimationEasing
+
+    onframe?: OnframeCallback
+    ondestroy?: ondestroyCallback
+    onrestart?: onrestartCallback
+}
+
+export default class Clip {
+
+    private _life: number
+    private _delay: number
+
+    private _inited: boolean = false
+    private _startTime = 0 // 开始时间单位毫秒
+
+    private _pausedTime = 0
+    private _paused = false
+
+    animation: Animation
+
+    loop: boolean
+
+    easing: AnimationEasing
+    easingFunc: (p: number) => number
+
+    // For linked list. Readonly
+    next: Clip
+    prev: Clip
+
+    onframe: OnframeCallback
+    ondestroy: ondestroyCallback
+    onrestart: onrestartCallback
+
+    constructor(opts: ClipProps) {
+
+        this._life = opts.life || 1000;
+        this._delay = opts.delay || 0;
+
+        this.loop = opts.loop || false;
+
+        this.onframe = opts.onframe || noop;
+        this.ondestroy = opts.ondestroy || noop;
+        this.onrestart = opts.onrestart || noop;
+
+        opts.easing && this.setEasing(opts.easing);
+    }
+
+    step(globalTime: number, deltaTime: number): boolean {
+        // Set startTime on first step, or _startTime may has milleseconds different between clips
+        // PENDING
+        if (!this._inited) {
+            this._startTime = globalTime + this._delay;
+            this._inited = true;
+        }
+
+        if (this._paused) {
+            this._pausedTime += deltaTime;
+            return;
+        }
+
+        const life = this._life;
+        let elapsedTime = globalTime - this._startTime - this._pausedTime;
+        let percent = elapsedTime / life;
+
+        // PENDING: Not begin yet. Still run the loop.
+        // In the case callback needs to be invoked.
+        // Or want to update to the begin state at next frame when `setToFinal` and `delay` are both used.
+        // To avoid the unexpected blink.
+        if (percent < 0) {
+            percent = 0;
+        }
+
+        percent = Math.min(percent, 1);
+
+        const easingFunc = this.easingFunc;
+        const schedule = easingFunc ? easingFunc(percent) : percent;
+
+        this.onframe(schedule);
+
+        // 结束
+        if (percent === 1) {
+            if (this.loop) {
+                // Restart
+                const remainder = elapsedTime % life;
+                this._startTime = globalTime - remainder;
+                this._pausedTime = 0;
+
+                this.onrestart();
+            }
+            else {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    pause() {
+        this._paused = true;
+    }
+
+    resume() {
+        this._paused = false;
+    }
+
+    setEasing(easing: AnimationEasing) {
+        this.easing = easing;
+        this.easingFunc = isFunction(easing)
+            ? easing
+            : easingFuncs[easing] || createCubicEasingFunc(easing);
+    }
+}