feat(player): player 组件 (#225)

---------

Co-authored-by: xuying.xu <[email protected]>

packages/f-engine/src/canvas/render/animator.ts

@@ -206,7 +206,7 @@ class Animator extends EE {
     const { animations } = this;
     if (!animations || !animations.length) return;
     animations.forEach((d) => {
-      d.pause();
+      d.finish();
     });
   }
 

packages/f-engine/src/canvas/render/index.ts

@@ -410,7 +410,6 @@ function updateComponents(components: Component[]) {
     const { timeline } = context;
 
     if (timeline) {
-      timeline.push(animator.animations);
       timeline.play.animationWillPlay();
     }
 

packages/f-engine/src/canvas/timeline.ts

@@ -23,13 +23,18 @@ class Timeline {
         animator.pause();
         break;
       case 'finish':
+        animator.play();
         animator.finish();
         break;
       default:
         break;
     }
   }
 
+  getPlayState() {
+    return this.playState;
+  }
+
   goTo(frame) {
     if (!frame) return;
     const { animator } = this.play;

packages/f-engine/src/player.ts

@@ -1,15 +1,12 @@
 import { JSX } from './jsx/jsx-namespace';
 import Component from './component';
 import Timeline from './canvas/timeline';
+import { generateFrameElement, playerFrame } from './playerFrames';
 
 // 播放状态
 type playState = 'play' | 'pause' | 'finish';
 
 export interface PlayerProps {
-  /**
-   * 时间帧
-   */
-  frame?: number;
   /**
    * 播放状态
    */
@@ -19,34 +16,90 @@ export interface PlayerProps {
    */
   // speed?: number;
   children?: JSX.Element | null;
+
+  keyFrames?: Record<string, playerFrame>[];
+  /**
+   * 播放结束
+   */
+  onend?: Function;
 }
 
 class Player extends Component<PlayerProps> {
+  playerFrames;
+  index: number;
+  onend: Function;
+  constructor(props) {
+    super(props);
+    const { keyFrames = [], children } = props;
+
+    this.playerFrames = keyFrames.reduce((array, cur) => {
+      const frames = generateFrameElement(cur, array[array.length - 1] || children);
+      array.push(frames);
+      return array;
+    }, []);
+
+    const count = this.playerFrames.length;
+
+    this.state = {
+      count,
+      index: 0,
+    };
+  }
+
   private setPlayState() {
     const { props, context } = this;
-    const { frame, state: playState } = props;
+    const { state: playState } = props;
     const { timeline } = context;
 
-    timeline.goTo(frame);
     timeline.setPlayState(playState);
   }
 
   willMount(): void {
     this.context.timeline = new Timeline(this);
   }
 
+  didMount(): void {
+    const { animator } = this;
+    animator.on('end', this.next);
+  }
+
+  willUpdate(): void {
+    const { context, props } = this;
+    const { state } = props;
+    const { timeline } = context;
+
+    if (state === 'finish' && timeline.getPlayState() !== 'finish') {
+      this.setState(({ count }) => ({
+        index: count - 1,
+      }));
+    }
+  }
+
+  next = () => {
+    const { index, count } = this.state;
+    const { onend = () => {} } = this.props;
+    if (index < count - 1) {
+      this.setState(() => ({
+        index: index + 1,
+      }));
+    } else {
+      onend();
+    }
+  };
+
   animationWillPlay() {
     const { animator, context } = this;
     // @ts-ignore
     const { timeline } = context;
     const { animations } = animator;
     timeline.add(animations);
     animator.animations = timeline.getAnimation();
+
     this.setPlayState();
   }
 
   render() {
-    return this.props.children;
+    return this.playerFrames[this.state.index];
   }
 }
 

packages/f-engine/src/playerFrames.ts

@@ -0,0 +1,16 @@
+import Children from '../src/children';
+
+export interface playerFrame {
+  to: Record<string, any>;
+}
+
+export function generateFrameElement(cur: Record<string, playerFrame>, element) {
+  if (!element) return;
+  return Children.map(element, (child) => {
+    const { key, props } = child;
+
+    const newProps = cur[key] ? cur[key].to : {};
+    const children = generateFrameElement(cur, props.children);
+    return Children.cloneElement(child, { ...newProps, children });
+  });
+}