特效说明

无界云剪辑中的特效是采用 Canvas 开发的，采用 require 的模式加载到项目中，这里只需要掌握 4 个基本 api 即可

github demo

模块化配置说明

因为采用模块化开发的特效插件，我们需要配置模块化加载的地址，具体参考 Core-SDK 参数说明配置EModuleEffectSourcePath模块加载路径，

特效组件默认使用.txt文件（安全考虑），可以设置参数window.EModuleEffectSourcePathDev = true来加载.js文件（建议在开发环境中使用）。

API 说明

开发特效只需要掌握下面 4 个基本 api 即可：

• init(canvas, element, store, PIXI) 初始化组件的时候调用
• play({relativeTime, duration, progress}) 播放动画的时候调用
• pause() 停止播放的时候调用
• destroy() 销毁后调用

模块化（moduleName.js）为例：

/**
 * init(canvas, element, store, PIXI) 初始化函数
 * play({relativeTime, duration, progress}) 播放动画函数
 * pause() 暂停
 * destroy() 销毁
 */
EModule.define("moduleName", [], function () {
  class Main {
    constructor() {
      this.ctx = null;
      this.canvas = null;
    }

// 初始化函数,会提供一个画布元素,我们只需要在这个画布元素上进行特效绘制即可
    init(cav) {
      this.canvas = cav;
      this.ctx = this.canvas.getContext("2d", { alpha: true });
    }

// 播放动画函数,会提供一个对象,包含当前时间,总时长,进度
    play({ relativeTime, duration, progress }) {
      console.log({ relativeTime, duration, progress });
    }

// 暂停函数,会提供一个对象,包含当前时间,总时长,进度
    pause() {
      console.log("pause");
    }

// 销毁函数,会提供一个对象,包含当前时间,总时长,进度
    destroy() {
      console.log("destroy");
    }
  }

  return Main;
});

init(canvas, element, store, PIXI) 初始化触发

参数说明：

• canvas 特效组件初始化的时候会调用，默认传入的参数有一个 canvas 元素，我们只需要在这个 canvas 元素上进行特效绘制。
• element 特效元素的 JSON 数据，存放参数信息的
• store 渲染内核暴露的全部参数，如果需要多元素联动，可以从这里去获取需要的参数
• PIXI pixijs 包

play({ relativeTime, duration, progress }) 播放动画触发

当游标进入特效组件区域的时候会重复触发

参数说明：

• relativeTime 游标扫过元素的相对时间
• duration 特效元素的总时长
• progress 游标扫过元素的进度，等于 relative/duration

pause() 暂停触发

当游标离开特效组件区域的时候会触发

destroy() 销毁触发

当特效组件被删除的时候会触发，这时候可以删除画布防止出现内存的泄露