过渡动画

对 Component 上的属性做线性变化，实现过渡动画。

安装

使用 NPM

  1. npm i @eva/plugin-transition

在浏览器中

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

使用

  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)

参数

group: Object

属性变化的时间轴，是一个对象，每个属性将对应一个动画，在一个 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

需要变化的 component

name: String

需要变化的 component 的属性，比如 component.position.x 写成 'position.x'

values: Array

时间轴列表，时间对应的位置，和到下一个时间点所用的缓动函数

  • time: number 变化所对应的时间
  • value: number | string 当前时间所对应的值
  • tween 缓动函数，可选 linear,ease,ease-in,ease-out,ease-in-out,bounce-in,bounce-out,bounce-in-out

方法

play(name, iteration)

播放动画，name 参数可选，不填写播放第一个动画。iteration 是循环次数，默认为 1，表示播放一次。

stop(name)

停止动画 name 参数可选，不传入 name 则停止所有动画。

事件

finish

动画结束时触发

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