queenshow/src/modules/editor/controllers/AnimCtrl/index.ts

import { Effect, ModuleControl } from "queenjs";
import { EditorModule } from "../../module";
import { DesignComp } from "../../objects/DesignTemp/DesignComp";
import { Matrix } from "../SelectCtrl/matrix";


export class AnimCtrl extends ModuleControl<EditorModule> {

  initEvent() {
     Effect.value(()=>this.store.shortPage).item((v)=>v.offset, (shortState)=>{
        console.log("xx")

        let next = shortState.index;
        if (shortState.offset < 0 ) {
            next = shortState.index + 1;
        }
        if (shortState.offset > 0 ) {
            next = shortState.index - 1;
        }
        this.initAnim();
        this.startAnim(next);

     }).run();
  }

  startAnim(index:number) {
    const childrens = this.helper.findCardAllChildren(index);

    console.log("start anim=>", index, childrens.length);

    childrens.forEach((c)=>{
        const comp = this.helper.findComp(c) as DesignComp;
        if (!comp.anim) return;
        comp.anim.transition = false;
        comp.layout.transformMatrix = comp.anim.startMatrix;
        comp.layout.opacity = 0;

        setTimeout(() => {
            if (comp.anim) {
                comp.anim.transition = true;
                comp.layout.transformMatrix = comp.anim.endMatrix;
                comp.layout.opacity = 1;
            }
        }, 100);
    })
  }
  inited = false;
  initAnim() {
    if (this.inited) return;
    this.inited = true;

    let n = this.store.streamCardIds.length;
    for( let i=0; i<n; i++) {
        const childrens = this.helper.findCardAllChildren(i);
        childrens.forEach((c)=>{
            const comp = this.helper.findComp(c) as DesignComp;
            const end = comp.layout.transformMatrix || "matrix(1,0,0,1,0,0)";
            const m = Matrix.createFromMatrixStr(end);
            m.ty = m.ty - comp.getH();
            m.tx = m.tx - comp.getW();

            comp.anim = {transition:false, startMatrix: m.getMatrixStr(), endMatrix: end}
        })
    }
  }
}