Transition animation

Make linear changes to the properties on the Component to achieve transition animation.

-https://eva.js.org/playground/#/transition -https://eva.js.org/playground/#/transition2

Install

With NPM

  1. npm i @eva/plugin-transition

In Browser

  1. <script src="https://unpkg.com/@eva/plugin-transition@1.2.x/dist/EVA.plugin.transition.min.js"></script>

Usage

  1. import {Game, GameObject, resource, RESOURCE_TYPE} from '@eva/eva.js'
  2. import {RendererSystem} from '@eva/plugin-renderer'
  3. import {Img, ImgSystem} from '@eva/plugin-renderer-img'
  4. import {Transition, TransitionSystem} from '@eva/plugin-transition'
  6. resource.addResource([
  7.   {
  8.     name:'heart',
  9.     type: RESOURCE_TYPE.IMAGE,
  10.     src: {
  11.       image: {
  12.         type:'png',
  13.         url:'//gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png'
  14.       }
  15.     },
  16.     preload: false
  17.   }
  18. ])
  20. const game = new Game({
  21.   systems: [
  22.     new RendererSystem({
  23.       canvas: document.querySelector('#canvas'),
  24.       width: 750,
  25.       height: 1000
  26.     }),
  27.     new ImgSystem(),
  28.     new TransitionSystem()
  29.   ]
  30. })
  32. const image = new GameObject('image', {
  33.   size: {width: 200, height: 200 },
  34.   origin: {x: 0, y: 0 },
  35.   position: {
  36.     x: 0,
  37.     y: 0
  38.   },
  39.   anchor: {x: 0.5, y: 0.5}
  40. })
  41. const img = image.addComponent(
  42.   new Img({
  43.     resource:'heart'
  44.   })
  45. )
  47. const animation = image.addComponent(new Transition())
  48. animation.group = {
  49.   idle: [
  50.     {
  51.       name:'scale.x',
  52.       component: image.transform,
  53.       values: [
  54.         {
  55.           time: 0,
  56.           value: 1,
  57.           tween:'ease-out'
  58.         },
  59.         {
  60.           time: 300,
  61.           value: 1.2,
  62.           tween:'ease-in'
  63.         },
  64.         {
  65.           time: 600,
  66.           value: 1
  67.         }
  68.       ]
  69.     },
  70.     {
  71.       name:'scale.y',
  72.       component: image.transform,
  73.       values: [
  74.         {
  75.           time: 0,
  76.           value: 1,
  77.           tween:'ease-out'
  78.         },
  79.         {
  80.           time: 300,
  81.           value: 1.2,
  82.           tween:'ease-in'
  83.         },
  84.         {
  85.           time: 600,
  86.           value: 1
  87.         }
  88.       ]
  89.     }
  90.   ],
  91.   move: [
  92.     {
  93.       name:'position.x',
  94.       component: image.transform,
  95.       values: [
  96.         {
  97.           time: 0,
  98.           value: 1,
  99.           tween:'ease-out'
  100.         },
  101.         {
  102.           time: 300,
  103.           value: 300,
  104.           tween:'ease-in'
  105.         }
  106.       ]
  107.     },
  108.     {
  109.       name:'position.y',
  110.       component: image.transform,
  111.       values: [
  112.         {
  113.           time: 0,
  114.           value: 1,
  115.           tween:'ease-in'
  116.         },
  117.         {
  118.           time: 300,
  119.           value: 300
  120.         }
  121.       ]
  122.     }
  123.   ]
  124. }
  126. animation.play('move', 1)
  127. animation.on('finish', name => {
  128.   name ==='move' && animation.play('idle', 5)
  129. })
  131. game.scene.addChild(image)

Options

group: Object

The timeline of property changes is an object, and each property corresponds to an animation. Multiple animations can be configured on a gameObject.

  1. const gameObject = new GameObject()
  2. let transition = gameObject.addComponent(new Transition())
  3. transition.group = {
  4.   up: [
  5.     {
  6.       component: gameObject.transform,
  7.       name:'position.y',
  8.       values: [
  9.         {
  10.           time: 0,
  11.           tween:'linear',
  12.           value: 10
  13.         }
  14.       ]
  15.     },
  16.     {
  17.       component: gameObject.transform,
  18.       name:'position.y',
  19.       values: [
  20.         {
  21.           time: 1,
  22.           tween:'linear',
  23.           value: 20
  24.         }
  25.       ]
  26.     }
  27.   ]
  28. }
component

The component that needs to be changed

name: String

The attribute of the component that needs to be changed, for example, component.position.x is written as 'position.x'

values: Array

Timeline list, the position corresponding to the time, and the easing function used to the next time point

-time: the time corresponding to the change of number -value: number | string the value corresponding to the current time -tween easing function, optional linear,ease,ease-in,ease-out,ease-in-out,bounce-in,bounce-out,bounce -in-out

Methods

play(name, iteration)

Play animation, name parameter is optional, do not fill in and play the first animation. iteration is the number of loops, the default is 1, which means to play once.

stop(name)

Stop animation. The name parameter is optional. If name is not passed in, all animations will be stopped.

Events

finish

Triggered when the animation ends

  1. transition.on('finish', animationName => {})