Effect Development Guide

The effects in Wujie Video Clip are developed using Canvas and loaded into the project using the require pattern. You only need to master 4 basic APIs.

github demo

Modular Configuration

Since the effect plugins are developed using a modular approach, we need to configure the module loading address. Refer to the Core-SDK parameter description for EModuleEffectSourcePath module loading path.

By default, effect components use .txt files (for security reasons). You can set the parameter window.EModuleEffectSourcePathDev = true to load .js files (recommended for development environment).

API Documentation

You only need to master the following 4 basic APIs to develop effects:

• init(canvas, element, store, PIXI) - Called when initializing the component
• play({relativeTime, duration, progress}) - Called when playing the animation
• pause() - Called when stopping playback
• destroy() - Called when destroying

Example of modular (moduleName.js):

/**
 * init(canvas, element, store, PIXI) - Initialization function
 * play({relativeTime, duration, progress}) - Animation playback function
 * pause() - Pause
 * destroy() - Destroy
 */
EModule.define("moduleName", [], function () {
  class Main {
    constructor() {
      this.ctx = null;
      this.canvas = null;
    }

    // Initialization function, provides a canvas element, we just need to draw effects on this canvas element
    init(cav) {
      this.canvas = cav;
      this.ctx = this.canvas.getContext("2d", { alpha: true });
    }

    // Animation playback function, provides an object containing current time, total duration, progress
    play({ relativeTime, duration, progress }) {
      console.log({ relativeTime, duration, progress });
    }

    // Pause function, provides an object containing current time, total duration, progress
    pause() {
      console.log("pause");
    }

    // Destroy function, provides an object containing current time, total duration, progress
    destroy() {
      console.log("destroy");
    }
  }

  return Main;
});

init(canvas, element, store, PIXI) Initialization Trigger

Parameter description:

• canvas - Called when the effect component is initialized, defaults to passing a canvas element. We just need to draw effects on this canvas element.
• element - JSON data of the effect element, storing parameter information
• store - All parameters exposed by the rendering kernel. If you need multi-element linkage, you can get the required parameters from here
• PIXI - pixijs package

play({ relativeTime, duration, progress }) Animation Playback Trigger

Repeatedly triggered when the cursor enters the effect component area

Parameter description:

• relativeTime - Relative time the cursor has swept over the element
• duration - Total duration of the effect element
• progress - Progress of the cursor sweeping over the element, equal to relative/duration

pause() Pause Trigger

Triggered when the cursor leaves the effect component area

destroy() Destroy Trigger

Triggered when the effect component is deleted. At this time, you can delete the canvas to prevent memory leaks.