Module API - end-user/tasks

Description

A task is a function executed at the beginning of addAnimations, before selector and properties information is processed, and has the following goals:

• Setup: A setup allows to prepare elements for further processing. An example is text splitting. text splitting prepares DOM for individual character manipulation. Setup tasks can stop the processing of a addAnimations, and might not require a selector..

• Wrapping: Only addAnimations can be stored in a JSON file or sent for remote rendering. In this case, methods such as addStills and scene transitions need to be wrapped in a task. Wrapping tasks can stop the processing of a addAnimations, and might not require a selector.

• Asset creation: A task can create an asset avoiding the need of loading external assets such as svg shape files.

• Complex animations: A task can simplify the creation of a complex animation.

F/X

If you just want to do a single-shot animation, use scene.addAnimations, but if you want to reuse the animation or want to break down the complexity into multiple parts, the best is to create a task.

A task implementation is a function with the following syntax:

function myTaskFunc(anime: Animation, wkTask: WorkTask,
  params: FactoryTaskParams, stage?: uint, args?: BeamToIXArgs): TaskResult;
Copy

And add this task to BeamToIX using BeamToIX.pluginManager.addTasks([['my-task', myTaskFunc]]);.

If the task just uses plain DOM, the simplest is to:

• inject DOM by using the animation selector, and then

switch (stage) {
   case TS_INIT:
     const adapters = args.scene.getElementAdapters(anime.selector);
     elAdapters.forEach((elAdapter, elIndex) => {
       const html = elAdapter.getProp('html', args);
       const myPiece = '<div>Hello</div>';
       elAdapter.setProp('html', html + myPiece, args);
     });
}
Copy

• inject animation properties into the pipeline by:

switch (stage) {
   case TS_INIT:
     anime.props.push({ prop: 'text', value: ['hello'] });
}
Copy