过渡 Transition

如果我们要给元素增加一些简单的效果，可以通过transition来完成，只要在设置和改变元素的属性前调用transition方法，传入时间和可选的easing参数即可。transition的easing支持css3的easing。

  1. const {Scene, Arc} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const scene = new Scene({
  4.   container,
  5.   width: 1200,
  6.   height: 600,
  7. });
  8. const layer = scene.layer();
  10. async function createBubble() {
  11.   const x = 100 + Math.random() * 1000,
  12.     y = 100 + Math.random() * 400;
  13.   const r = Math.round(255 * Math.random()),
  14.     g = Math.round(255 * Math.random()),
  15.     b = Math.round(255 * Math.random());
  17.   const fillColor = `rgb(${r},${g},${b})`;
  18.   const bubble = new Arc();
  19.   bubble.attr({
  20.     fillColor,
  21.     radius: 25,
  22.     x,
  23.     y,
  24.   });
  25.   layer.append(bubble);
  26.   await bubble.transition(2.0).attr({
  27.     scale: [2.0, 2.0],
  28.     opacity: 0,
  29.   });
  30.   bubble.remove();
  31. }
  33. setInterval(() => {
  34.   createBubble();
  35. }, 50);

sprite.transition(...) 返回一个特殊对象（并不是原来的sprite对象），当我们调用.attr方法对它进行属性设置时，它创建一个属性动画。当我们再次对它进行属性设置时，它会结束上一次的动画进入下一段动画，这样我们就可以平滑地进行状态切换。此外我们可以通过调用.reverse方法来让当前transition状态回滚。

  1. const {Scene, Sprite, Label} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const scene = new Scene({
  4.   container,
  5.   width: 1200,
  6.   height: 600,
  7. });
  8. const layer = scene.layer();
  10. const label = new Label('试试将鼠标移动到左右两个方块上：');
  11. label.attr({
  12.   anchor: 0.5,
  13.   pos: [400, 50],
  14.   fontSize: '2rem',
  15. });
  16. layer.append(label);
  18. const left = new Sprite();
  19. left.attr({
  20.   anchor: 0.5,
  21.   pos: [300, 300],
  22.   size: [200, 200],
  23.   bgcolor: 'red',
  24. });
  25. layer.append(left);
  27. const right = left.cloneNode();
  28. right.attr({
  29.   pos: [700, 300],
  30.   bgcolor: 'green',
  31. });
  32. layer.append(right);
  34. let leftTrans = null;
  35. left.addEventListener('mouseenter', (evt) => {
  36.   if(leftTrans) leftTrans.cancel();
  37.   leftTrans = left.transition(1.0);
  38.   leftTrans.attr({
  39.     rotate: 180,
  40.     bgcolor: 'green',
  41.   });
  42. });
  43. left.addEventListener('mouseleave', (evt) => {
  44.   leftTrans.attr({
  45.     rotate: 0,
  46.     bgcolor: 'red',
  47.   });
  48. });
  50. let rightTrans = null;
  51. right.addEventListener('mouseenter', (evt) => {
  52.   if(rightTrans) rightTrans.cancel();
  53.   rightTrans = right.transition(3.0);
  54.   rightTrans.attr({
  55.     rotate: 720,
  56.     bgcolor: 'red',
  57.   });
  58. });
  59. right.addEventListener('mouseleave', (evt) => {
  60.   rightTrans.reverse();
  61. });

动画 Animate

在前面的例子里我们已经看过很多动画的用法。事实上，spritejs支持Web Animations API，因此可以让精灵使用.animate方法做出各种复杂的组合动画。

我们既可以使用spritejs提供的animate动画，也可以使用其他方式，比如原生的setInterval或requestAnimationFrame。此外一些动画库提供的Tween动画，也可以很容易地结合spritejs使用。

  1. const {Scene, Path, Sprite, Gradient} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const scene = new Scene({
  4.   container,
  5.   width: 1200,
  6.   height: 600,
  7. });
  8. const layer = scene.layer();
  10. const birdsJsonUrl = 'https://s5.ssl.qhres.com/static/5f6911b7b91c88da.json';
  11. const birdsRes = 'https://p.ssl.qhimg.com/d/inn/c886d09f/birds.png';
  13. (async function () {
  14.   await scene.preload([birdsRes, birdsJsonUrl]);
  15.   const d = 'M480,437l-29-26.4c-103-93.4-171-155-171-230.6c0-61.6,48.4-110,110-110c34.8,0,68.2,16.2,90,41.8C501.8,86.2,535.2,70,570,70c61.6,0,110,48.4,110,110c0,75.6-68,137.2-171,230.8L480,437Z';
  17.   const gradient = new Gradient({
  18.     vector: [280, 470, 680, 70],
  19.     colors: [{
  20.       offset: 0,
  21.       color: 'rgba(255,0,0,1)',
  22.     }, {
  23.       offset: 0.5,
  24.       color: 'rgba(255,0,0,0)',
  25.     }, {
  26.       offset: 1,
  27.       color: 'rgba(255,0,0,0)',
  28.     }],
  29.   });
  31.   const path = new Path({
  32.     d,
  33.     lineWidth: 26,
  34.     fillColor: 'red',
  35.     strokeColor: gradient,
  36.     // lineJoin: 'bevel',
  37.   });
  39.   layer.append(path);
  40.   window.path = path;
  42.   const bird = new Sprite('bird1.png');
  43.   bird.attr({
  44.     anchor: [0.5, 0.5],
  45.     size: [65, 45],
  46.     offsetPath: d,
  47.     zIndex: 200,
  48.   });
  50.   layer.append(bird);
  52.   bird.animate([
  53.     {offsetDistance: 0},
  54.     {offsetDistance: 1},
  55.   ], {
  56.     duration: 6000,
  57.     iterations: Infinity,
  58.   });
  60.   let i = 0;
  61.   setInterval(() => {
  62.     bird.attributes.texture = `bird${i++ % 3 + 1}.png`;
  63.   }, 100);
  65.   const startTime = Date.now();
  66.   const T = 6000;
  67.   requestAnimationFrame(function next() {
  68.     const p = Math.PI * 2 * (Date.now() - startTime) / T;
  69.     const colors = [
  70.       {offset: 0, color: 'rgba(255,0,0,1)'},
  71.       {offset: 0.5 + 0.5 * Math.abs(Math.sin(p)), color: 'rgba(255,0,0,0)'},
  72.       {offset: 1, color: 'rgba(255,0,0,0)'},
  73.     ];
  75.     const gradients = new Gradient({
  76.       vector: [280, 470, 680, 70],
  77.       colors,
  78.     });
  79.     path.attr({strokeColor: gradients});
  81.     requestAnimationFrame(next);
  82.   });
  83. }());

比起使用原生timer或者第三方库，直接使用spritejs提供的animate动画有一个额外的好处，就是它默认基于layer的timeline。也就是说我们可以通过控制layer的timeline来控制动画播放的速度，方便地加速、减速、暂停甚至回放动画。

  1. const {Scene, Sprite} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const scene = new Scene({
  4.   container,
  5.   width: 1200,
  6.   height: 600,
  7. });
  8. const layer = scene.layer();
  10. const birdsJsonUrl = 'https://s5.ssl.qhres.com/static/5f6911b7b91c88da.json';
  11. const birdsRes = 'https://p.ssl.qhimg.com/d/inn/c886d09f/birds.png';
  13. (async function () {
  14.   const timeline = layer.timeline;
  16.   const playbackRate = document.getElementById('playbackRate');
  17.   const speedUp = document.getElementById('speedUp');
  18.   const slowDown = document.getElementById('slowDown');
  19.   const pause = document.getElementById('pause');
  20.   const resume = document.getElementById('resume');
  22.   function updateSpeed() {
  23.     playbackRate.innerHTML = `playbackRate: ${timeline.playbackRate.toFixed(1)}`;
  24.   }
  25.   speedUp.addEventListener('click', () => {
  26.     timeline.playbackRate += 0.5;
  27.     updateSpeed();
  28.   });
  29.   slowDown.addEventListener('click', () => {
  30.     timeline.playbackRate -= 0.5;
  31.     updateSpeed();
  32.   });
  33.   pause.addEventListener('click', () => {
  34.     timeline.playbackRate = 0;
  35.     updateSpeed();
  36.   });
  37.   resume.addEventListener('click', () => {
  38.     timeline.playbackRate = 1.0;
  39.     updateSpeed();
  40.   });
  42.   await scene.preload([birdsRes, birdsJsonUrl]);
  44.   for(let i = 0; i < 10; i++) {
  45.     if(i !== 5 && i !== 9) {
  46.       const bird = new Sprite('bird1.png');
  47.       bird.attr({
  48.         anchor: [0.5, 0.5],
  49.         pos: [-50, 100 + (i % 5) * 80],
  50.         scale: 0.6,
  51.       });
  52.       layer.append(bird);
  54.       bird.animate([
  55.         {texture: 'bird1.png'},
  56.         {texture: 'bird2.png'},
  57.         {texture: 'bird3.png'},
  58.         {texture: 'bird1.png'},
  59.       ], {
  60.         duration: 500,
  61.         iterations: Infinity,
  62.         easing: 'step-end',
  63.       });
  65.       const delay = i < 5 ? Math.abs(2 - i) * 300 : (4 - Math.abs(7 - i)) * 300;
  66.       bird.animate([
  67.         {x: -50},
  68.         {x: 1100},
  69.         {x: -50},
  70.       ], {
  71.         delay,
  72.         duration: 6000,
  73.         // direction: 'alternate',
  74.         iterations: Infinity,
  75.       });
  77.       bird.animate([
  78.         {scale: [0.6, 0.6]},
  79.         {scale: [-0.6, 0.6]},
  80.         {scale: [0.6, 0.6]},
  81.       ], {
  82.         delay,
  83.         duration: 6000,
  84.         iterations: Infinity,
  85.         easing: 'step-end',
  86.       });
  87.     }
  88.   }
  89. }());

layer的timeline是TimeLine类的一个对象，TimeLine类定义于sprite-timeline，这是一个独立的库，也可以单独作于其他方式的动画。

spritejs动画功能非常丰富，关于动画的其他内容，可参考高级用法：动画。

滤镜 Filter

spritejs支持canvas滤镜，能够方便地给元素添加各种滤镜。

  1. const {Scene, Sprite} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const scene = new Scene({
  4.   container,
  5.   width: 1200,
  6.   height: 600,
  7. });
  8. const layer = scene.layer();
  10. const images = [
  11.   {id: 'girl1', src: 'https://p5.ssl.qhimg.com/t01feb7d2e05533ca2f.jpg'},
  12.   {id: 'girl2', src: 'https://p5.ssl.qhimg.com/t01deebfb5b3ac6884e.jpg'},
  13. ];
  15. (async function () {
  16.   function applyFilters(texture, filters, y, scale = 1) {
  17.     filters.forEach((filter, i) => {
  18.       const s = new Sprite();
  19.       s.attr({
  20.         texture,
  21.         pos: [100 + i * 150, y],
  22.         scale,
  23.         filter,
  24.       });
  25.       layer.append(s);
  26.     });
  27.   }
  29.   await scene.preload(...images);
  31.   applyFilters('girl1', [
  32.     'none',
  33.     'brightness(150%)',
  34.     'grayscale(50%)',
  35.     'blur(12px)',
  36.     'drop-shadow(15, 15, 5, #033)',
  37.     'hue-rotate(45)',
  38.   ], 100, 0.3);
  40.   applyFilters('girl2', [
  41.     'none',
  42.     'invert(100%)',
  43.     'opacity(70%)',
  44.     'saturate(20%)',
  45.     'sepia(100%)',
  46.     'hue-rotate(135)',
  47.   ], 300, 0.6);
  48. }());

渐变 Gradient

与旧版不同，SpriteJS Next 通过Gradient类创建渐变，根据vector参数个数不同，分别创建LinearGradient和RadialGradient。

目前版本暂时有个缺陷，不能给同一个元素的stroke和fill同时设置渐变，后续版本中可能会修正。

  1. const {Scene, Sprite, Gradient, Label, Path} = spritejs;
  2. const container = document.getElementById('adaptive');
  3. const scene = new Scene({
  4.   container,
  5.   width: 1200,
  6.   height: 600,
  7.   // contextType: '2d',
  8. });
  9. const layer = scene.layer();
  10. const box = new Sprite();
  11. box.attr({
  12.   borderWidth: 10,
  13.   borderColor: new Gradient({
  14.     vector: [0, 0, 170, 170],
  15.     colors: [
  16.       {offset: 0, color: 'red'},
  17.       {offset: 0.5, color: 'yellow'},
  18.       {offset: 1, color: 'green'},
  19.     ],
  20.   }),
  21.   // borderColor: 'green',
  22.   bgcolor: new Gradient({
  23.     vector: [0, 150, 150, 0],
  24.     colors: [
  25.       {offset: 0, color: '#fff'},
  26.       {offset: 0.5, color: 'rgba(33, 33, 77, 0.7)'},
  27.       {offset: 1, color: 'rgba(128, 45, 88, 0.5)'},
  28.     ],
  29.   }),
  30.   pos: [150, 50],
  31.   size: [150, 150],
  32.   borderRadius: 15,
  33. });
  35. layer.append(box);
  37. const label = new Label('Hello SpriteJS~~');
  38. label.attr({
  39.   lineWidth: 6,
  40.   fillColor: new Gradient({
  41.     vector: [35, 35, 50, 350, 350, 600],
  42.     colors: [
  43.       {offset: 0, color: '#777'},
  44.       {offset: 0.5, color: '#ccc'},
  45.       {offset: 1, color: '#333'},
  46.     ],
  47.   }),
  48.   pos: [500, 50],
  49.   font: '48px Arial',
  50. });
  52. layer.append(label);
  54. const path = new Path();
  56. path.attr({
  57.   d: 'M480,50L423.8,182.6L280,194.8L389.2,289.4L356.4,430L480,355.4L480,355.4L603.6,430L570.8,289.4L680,194.8L536.2,182.6Z',
  58.   normalize: true,
  59.   rotate: 30,
  60.   scale: 0.7,
  61.   fillColor: new Gradient({
  62.     vector: [300, 300, 100, 100],
  63.     colors: [
  64.       {offset: 0, color: 'red'},
  65.       {offset: 0.5, color: 'yellow'},
  66.       {offset: 1, color: 'green'},
  67.     ],
  68.   }),
  69.   pos: [700, 360],
  70. });
  72. layer.append(path);