过渡动画

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

      安装

      使用 NPM

      1. npm i @eva/plugin-transition

      在浏览器中

      1. <script src=“https://unpkg.com/@eva/plugin-transition@1.2.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 => {})
      ,