状态切换

SpriteJS支持状态的管理。我们可以给元素设置一组states属性，然后再设置一组actions属性，这样就可以对它们进行状态切换。

states是一个对象，它的每个key表示一个状态ID，对应的值是一组属性：

  1. const states = {
  2.   stateA: {
  3.     scale: 0.5,
  4.     rotate: 45,
  5.   },
  6.   stateB: {
  7.     scale: 1.0,
  8.     color: 'green',
  9.     rotate: 0,
  10.   },
  11.   stateC: {
  12.     color: 'blue',
  13.     rotate: 60,
  14.   },
  15. };
  17. sprite.attr('states', states);

有了states以后，我们就可以切换元素的状态：

状态切换 - 图1

  1. const scene = new Scene('#state-basic', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const states = {
  5.   stateA: {
  6.     bgcolor: 'red',
  7.     scale: 0.5,
  8.     rotate: 45,
  9.   },
  10.   stateB: {
  11.     scale: 1.0,
  12.     bgcolor: 'green',
  13.     rotate: 0,
  14.   },
  15.   stateC: {
  16.     scale: 0.8,
  17.     bgcolor: 'blue',
  18.     rotate: 60,
  19.   },
  20. };
  22. const stateNames = Object.keys(states);
  24. const s = new Label(stateNames[0]);
  25. s.attr({
  26.   anchor: 0.5,
  27.   size: [200, 200],
  28.   pos: [770, 300],
  29.   font: '64px Arial',
  30.   lineHeight: 200,
  31.   textAlign: 'center',
  32.   fillColor: 'white',
  33.   states,
  34.   state: stateNames[0],
  35. });
  36. layer.append(s);
  38. let i = 0;
  39. setInterval(() => {
  40.   s.attr({state: stateNames[++i % 3]});
  41. }, 1000);

给状态添加 Actions

我们可以在状态切换的时候给状态切换设置行为，方法是设置actions属性。这个属性是一个数组，每个元素是一个action描述对象，包含以下内容：

from,to或both，设置状态切换选择器，action，设置动作timing：

  1. const actions = [
  2.   {
  3.     from: 'stateA',
  4.     to: 'stateB',
  5.     action: {
  6.       duration: 500,
  7.       easing: 'ease-in-out',
  8.     },
  9.   },{
  10.     both: ['stateB', 'stateC'],
  11.     action: {
  12.       duration: 800,
  13.       easing: 'cubic-bezier(0.26, 0.09, 0.37, 0.18)',
  14.     },
  15.   },{
  16.     from: 'stateC',
  17.     action: {
  18.       duration: 1000,
  19.     },
  20.   },{
  21.     to: 'stateC',
  22.     action: {
  23.       duration: 500,
  24.     }
  25.   },
  26. ];
  28. sprite.attr('actions', actions);

Action的匹配规则如下：

当一个状态stateA切换到stateB的时候，优先匹配{from:'stateA', to:'stateB'}，如果不存在这个Action选择器，那么匹配{to:'stateB'}，如果也不存在，那么匹配{from:'stateA'}。{both: ['stateA', 'stateB']}是简写，会生成{from:'stateA', to:'stateB'}和{from:'stateB', to:'stateA'}两个选择器。对应的，{both:['stateA']}也会生成{from:'stateA'}和{to:'stateA'}两个选择器。

状态切换 - 图2

  1. const scene = new Scene('#state-actions', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const states = {
  5.   stateA: {
  6.     bgcolor: 'red',
  7.     scale: 0.5,
  8.     rotate: 45,
  9.   },
  10.   stateB: {
  11.     scale: 1.0,
  12.     bgcolor: 'green',
  13.     rotate: 0,
  14.   },
  15.   stateC: {
  16.     scale: 0.8,
  17.     bgcolor: 'blue',
  18.     rotate: 60,
  19.   },
  20. };
  22. const stateNames = Object.keys(states);
  24. const actions = [
  25.   {
  26.     from: 'stateA',
  27.     to: 'stateB',
  28.     action: {
  29.       duration: 500,
  30.       easing: 'ease-in-out',
  31.     },
  32.   },
  33.   {
  34.     both: ['stateB', 'stateC'],
  35.     action: {
  36.       duration: 800,
  37.       easing: 'cubic-bezier(0.26, 0.09, 0.37, 0.18)',
  38.     },
  39.   },
  40.   {
  41.     from: 'stateC',
  42.     action: {
  43.       duration: 1000,
  44.     },
  45.   },
  46.   {
  47.     to: 'stateC',
  48.     action: {
  49.       duration: 500,
  50.     },
  51.   },
  52. ];
  54. const s = new Label(stateNames[0]);
  55. s.attr({
  56.   anchor: 0.5,
  57.   size: [200, 200],
  58.   pos: [770, 300],
  59.   font: '64px Arial',
  60.   lineHeight: 200,
  61.   textAlign: 'center',
  62.   fillColor: 'white',
  63.   states,
  64.   actions,
  65.   // state: stateNames[0],
  66.   state: 'stateC',
  67. });
  68. layer.append(s);
  70. s.attr('state', 'stateA');
  72. let i = 0;
  73. setInterval(() => {
  74.   s.attr({state: stateNames[++i % 3]});
  75. }, 1000);

state-change 事件

状态切换的时候，我们可以监听state变化的事件。

一个元素的状态从a变化为b，会触发两个事件，一个是state-from-a，一个是state-to-b。事件参数包括四个属性，分别是：

  • from: 元素的源状态名，即a
  • to: 元素的目的状态名，即b
  • action: 元素切换状态的action对象，该对象是一个动画timing对象，由前面的Action选择器规则匹配出来。
  • animation: 元素切换状态的Animation对象。

action:reversable

当状态从stateA切换到stateB的时候，如果匹配到{from:'stateA', to:'stateB'}的Action并执行动画，此时状态再切换回stateA，如果上一个Action动画还没执行完成，此时默认不会执行{to:'stateB', from:'stateA'}选择器下的Action（或者其他更低优先级的选择器选择的Action），而是反向执行前一个未完成的Action，这样我们做状态双向切换的动画就比较自然。如果我们要强制执行新的Action，可以给{from:'stateA', to:'stateB'}的Action设置一个reversable:false属性，以强制忽略反向Action，执行新的Action。

状态切换 - 图3

  1. const scene = new Scene('#state-reversable', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const button1 = new Label('reversable');
  5. button1.attr({
  6.   anchor: 0.5,
  7.   font: '32px Arial',
  8.   border: [3, 'blue'],
  9.   padding: 10,
  10.   pos: [500, 300],
  11.   state: 'normal',
  12.   states: {
  13.     hover: {
  14.       scale: 1.2,
  15.     },
  16.     normal: {
  17.       scale: 1,
  18.     },
  19.   },
  20.   actions: [
  21.     {
  22.       both: ['hover', 'normal'],
  23.       duration: 500,
  24.     },
  25.   ],
  26. });
  27. layer.append(button1);
  29. button1.on('mouseenter', function () {
  30.   this.attr('state', 'hover');
  31. });
  33. button1.on('mouseleave', function () {
  34.   this.attr('state', 'normal');
  35. });
  37. const button2 = button1.cloneNode();
  38. button2.attr({
  39.   text: 'not reversable',
  40.   x: x => x + 500,
  41.   actions: [
  42.     {
  43.       both: ['hover', 'normal'],
  44.       duration: 500,
  45.       reversable: false,
  46.     },
  47.   ],
  48. });
  50. layer.append(button2);
  52. button2.on('mouseenter', function () {
  53.   this.attr('state', 'hover');
  54. });
  56. button2.on('mouseleave', function () {
  57.   this.attr('state', 'normal');
  58. });

状态序列

我们可以通过resolveStates(states, before, after)方法批量设置一组state，然后让元素从开始state变更到结束state。

每个元素的resolveStates(states, before, after)方法是互斥的，也就是说如果同一时间调用两组resolveState()，spritejs会立即结束前面的动作，执行后一组动作。

状态切换 - 图4

  1. const scene = new Scene('#state-resolveStates', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const button1 = new Label('动作 1');
  5. button1.attr({
  6.   anchor: 0.5,
  7.   font: '32px Arial',
  8.   border: [3, 'blue'],
  9.   padding: 10,
  10.   pos: [500, 300],
  11. });
  12. layer.append(button1);
  15. const button2 = button1.cloneNode();
  16. button2.attr({
  17.   text: '动作 2',
  18.   y: y => y + 100,
  19. });
  20. layer.append(button2);
  22. button1.on('mouseenter', () => {
  23.   layer.style.cursor = 'pointer';
  24. });
  25. button1.on('mouseleave', () => {
  26.   layer.style.cursor = '';
  27. });
  29. button2.on('mouseenter', () => {
  30.   layer.style.cursor = 'pointer';
  31. });
  32. button2.on('mouseleave', () => {
  33.   layer.style.cursor = '';
  34. });
  36. const block = new Sprite({
  37.   pos: [800, 300],
  38.   size: [100, 100],
  39.   bgcolor: 'red',
  40.   state: 'a',
  41.   states: {
  42.     a: {
  43.       scale: 1.0,
  44.       rotate: 0,
  45.     },
  46.     b: {
  47.       scale: 1.5,
  48.       rotate: 0,
  49.     },
  50.     c: {
  51.       scale: 1.2,
  52.       rotate: 180,
  53.     },
  54.     d: {
  55.       scale: 1.0,
  56.       rotate: -45,
  57.     },
  58.   },
  59.   actions: [
  60.     {
  61.       both: ['a', 'b'],
  62.       duration: 1000,
  63.     },
  64.     {
  65.       both: ['b', 'c'],
  66.       duration: 1000,
  67.     },
  68.     {
  69.       both: ['c', 'd'],
  70.       duration: 1000,
  71.     },
  72.     {
  73.       both: ['d', 'a'],
  74.       duration: 1000,
  75.     },
  76.   ],
  77. });
  78. layer.append(block);
  80. button1.on('click', () => {
  81.   block.resolveStates(['a', 'b', 'c', 'd', 'a']);
  82. });
  84. button2.on('click', () => {
  85.   block.resolveStates(['a', 'd', 'c', 'b', 'a']);
  86. });

内置状态

spritejs为每一个元素内置了一些特定的状态，要实现这些状态的动作效果，只需要直接给这些状态设置初始值即可。内置状态包括以下这些：

  • beforeEnter 当元素或它的父级元素被append到layer上之前的临时状态。
  • afterEnter 当元素或它的父级元素被append到layer上之后的临时状态。
  • beforeExit 当元素或它的父级元素被从layer上remove之前的临时状态。
  • afterExit 当元素或它的父级元素被从layer上remove之后的临时状态。
  • show 当元素被调用hide()方法之前的临时状态，或被调用show()方法之后的临时状态。
  • hide 当元素被调用hide()方法之后的状态。
  • default 元素默认的初始状态。

状态切换 - 图5

  1. const scene = new Scene('#state-toggleEnterExit', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const group = new Group({
  5.   display: 'flex',
  6.   size: [700, 100],
  7.   pos: [770, 300],
  8.   anchor: 0.5,
  9.   bgcolor: 'grey',
  10. });
  12. layer.append(group);
  14. function addBlock() {
  15.   const block = new Sprite({
  16.     bgcolor: 'red',
  17.     margin: [0, 10, 0, 10],
  18.     size: [100, 100],
  19.     states: {
  20.       beforeEnter: {
  21.         translate: [500, 0],
  22.       },
  23.       afterExit: {
  24.         translate: [500, 0],
  25.       },
  26.     },
  27.   });
  28.   group.append(block);
  29. }
  31. function removeBlock() {
  32.   const children = group.children;
  33.   if(children.length > 0) {
  34.     const child = children[children.length - 1];
  35.     child.remove();
  36.   }
  37. }
  39. const button1 = new Label('添加元素');
  40. button1.attr({
  41.   anchor: 0.5,
  42.   font: '32px Arial',
  43.   border: [3, 'blue'],
  44.   padding: 10,
  45.   pos: [500, 200],
  46.   states: {
  47.     beforeEnter: {
  48.       translate: [-1000, 0],
  49.     },
  50.   },
  51. });
  52. layer.append(button1);
  55. const button2 = button1.cloneNode();
  56. button2.attr({
  57.   text: '删除元素',
  58.   x: x => x + 300,
  59. });
  60. layer.append(button2);
  62. button1.on('mouseenter', () => {
  63.   layer.style.cursor = 'pointer';
  64. });
  65. button1.on('mouseleave', () => {
  66.   layer.style.cursor = '';
  67. });
  69. button2.on('mouseenter', () => {
  70.   layer.style.cursor = 'pointer';
  71. });
  72. button2.on('mouseleave', () => {
  73.   layer.style.cursor = '';
  74. });
  76. button1.on('click', () => {
  77.   addBlock();
  78. });
  80. button2.on('click', () => {
  81.   removeBlock();
  82. });

在上面的例子里，我们给元素设置了beforeEnter和afterExit的状态，在append和remove的时候，spritejs会自动触发动作。enter和exit行为有默认的action，值为：

  1. [
  2.   {
  3.     from: 'beforeEnter',
  4.     duration: 300,
  5.     ease: 'ease-in',
  6.   },
  7.   {
  8.     from: 'beforeExit',
  9.     duration: 300,
  10.     ease: 'ease-out',
  11.   }
  12. ]

我们可以设置元素的actions属性来改写它们。

  1. // 延长动画时间
  2. sprite.attr('actions', [
  3.   {
  4.     from: 'beforeEnter',
  5.     duration: 600,
  6.     ease: 'ease-in',
  7.   },
  8.   {
  9.     from: 'beforeExit',
  10.     duration: 600,
  11.     ease: 'ease-out',
  12.   }  
  13. ])

除了控制enter和exit之外，我们还可以通过给元素增加hide状态来控制它的显示隐藏，通过它我们可以很方便地实现fade-in和fade-out效果：

状态切换 - 图6

  1. const scene = new Scene('#state-fade', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const sprite = new Sprite({
  5.   display: 'flex',
  6.   size: [700, 100],
  7.   pos: [770, 300],
  8.   anchor: 0.5,
  9.   bgcolor: 'grey',
  10.   states: {
  11.     hide: {
  12.       opacity: 0,
  13.     },
  14.   },
  15. });
  17. layer.append(sprite);
  19. const button1 = new Label('显示');
  20. button1.attr({
  21.   anchor: 0.5,
  22.   font: '32px Arial',
  23.   border: [3, 'blue'],
  24.   padding: 10,
  25.   pos: [500, 200],
  26.   states: {
  27.     beforeEnter: {
  28.       translate: [-1000, 0],
  29.     },
  30.   },
  31. });
  32. layer.append(button1);
  35. const button2 = button1.cloneNode();
  36. button2.attr({
  37.   text: '隐藏',
  38.   x: x => x + 300,
  39. });
  40. layer.append(button2);
  42. button1.on('mouseenter', () => {
  43.   layer.style.cursor = 'pointer';
  44. });
  45. button1.on('mouseleave', () => {
  46.   layer.style.cursor = '';
  47. });
  49. button2.on('mouseenter', () => {
  50.   layer.style.cursor = 'pointer';
  51. });
  52. button2.on('mouseleave', () => {
  53.   layer.style.cursor = '';
  54. });
  56. button1.on('click', () => {
  57.   sprite.show();
  58. });
  60. button2.on('click', () => {
  61.   sprite.hide();
  62. });

enterMode 和 exitMode

在使用group的时候，我们可以将子元素一一添加到group上，然后再将group添加到parent上，此时group下的子元素的enter行为会被触发。我们可以通过设置enterMode和exitMode来改变enter/exit行为的触发方式，可选的方式如下：

  • normal 默认值，enter时同时触发自身和子元素的enter，exit时先同时触发自身和子元素的exit
  • onebyone enter时先触发自身的enter，然后根据zOrder顺序依次触发子元素的enter，exit时先根据zOrder顺序依次触发子元素的exit，然后触发自身的exit
  • onebyone-reverse enter时先触发自身的enter，然后根据zOrder的倒序依次触发子元素的enter，exit时先根据zOrder倒序依次触发子元素的exit，然后触发自身的exit

状态切换 - 图7

  1. const scene = new Scene('#state-mode', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer();
  4. const group = new Group({
  5.   display: 'flex',
  6.   size: [700, 100],
  7.   pos: [770, 300],
  8.   anchor: 0.5,
  9.   bgcolor: 'grey',
  10.   enterMode: 'onebyone',
  11.   exitMode: 'onebyone-reverse',
  12. });
  14. for(let i = 0; i < 5; i++) {
  15.   const block = new Sprite({
  16.     size: [100, 100],
  17.     bgcolor: 'red',
  18.     margin: [0, 10, 0, 10],
  19.     states: {
  20.       beforeEnter: {
  21.         translate: [500, 0],
  22.       },
  23.       afterExit: {
  24.         translate: [500, 0],
  25.       },
  26.     },
  27.   });
  28.   group.append(block);
  29. }
  31. const button1 = new Label('批量添加');
  32. button1.attr({
  33.   anchor: 0.5,
  34.   font: '32px Arial',
  35.   border: [3, 'blue'],
  36.   padding: 10,
  37.   pos: [500, 200],
  38.   states: {
  39.     beforeEnter: {
  40.       translate: [-1000, 0],
  41.     },
  42.   },
  43. });
  44. layer.append(button1);
  47. const button2 = button1.cloneNode();
  48. button2.attr({
  49.   text: '批量移除',
  50.   x: x => x + 300,
  51. });
  52. layer.append(button2);
  54. button1.on('mouseenter', () => {
  55.   layer.style.cursor = 'pointer';
  56. });
  57. button1.on('mouseleave', () => {
  58.   layer.style.cursor = '';
  59. });
  61. button2.on('mouseenter', () => {
  62.   layer.style.cursor = 'pointer';
  63. });
  64. button2.on('mouseleave', () => {
  65.   layer.style.cursor = '';
  66. });
  68. button1.on('click', () => {
  69.   layer.append(group);
  70. });
  72. button2.on('click', () => {
  73.   group.remove();
  74. });