过渡 Transition

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

效果 - 图1

  1. const scene = new Scene('#transition', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer('fglayer');
  4. async function createBubble() {
  5.   const x = 100 + Math.random() * 1340,
  6.     y = 100 + Math.random() * 400;
  7.   const r = Math.round(255 * Math.random()),
  8.     g = Math.round(255 * Math.random()),
  9.     b = Math.round(255 * Math.random());
  11.   const bgcolor = `rgb(${r},${g},${b})`;
  12.   const bubble = new Sprite();
  13.   bubble.attr({
  14.     anchor: 0.5,
  15.     bgcolor,
  16.     size: [50, 50],
  17.     x,
  18.     y,
  19.     borderRadius: 25,
  20.   });
  21.   layer.append(bubble);
  22.   await bubble.transition(2.0).attr({
  23.     scale: [2.0, 2.0],
  24.     opacity: 0,
  25.   });
  26.   bubble.remove();
  27. }
  29. setInterval(() => {
  30.   createBubble();
  31. }, 50);

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

试试将鼠标移动到左右两个方块上：

效果 - 图2

  1. const scene = new Scene('#transition-toggle', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer('fglayer');
  4. const left = new Sprite();
  5. left.attr({
  6.   anchor: 0.5,
  7.   pos: [400, 300],
  8.   size: [200, 200],
  9.   bgcolor: 'red',
  10. });
  11. layer.append(left);
  13. const right = left.cloneNode();
  14. right.attr({
  15.   pos: [900, 300],
  16.   bgcolor: 'green',
  17. });
  18. layer.append(right);
  20. let leftTrans = null;
  21. left.on('mouseenter', (evt) => {
  22.   leftTrans = left.transition(1.0);
  23.   leftTrans.attr({
  24.     rotate: 180,
  25.     bgcolor: 'green',
  26.   });
  27. });
  28. left.on('mouseleave', (evt) => {
  29.   leftTrans.attr({
  30.     rotate: 0,
  31.     bgcolor: 'red',
  32.   });
  33. });
  35. let rightTrans = null;
  36. right.on('mouseenter', (evt) => {
  37.   rightTrans = right.transition(3.0);
  38.   rightTrans.attr({
  39.     rotate: 720,
  40.     bgcolor: 'red',
  41.   });
  42. });
  43. right.on('mouseleave', (evt) => {
  44.   rightTrans.reverse();
  45. });

动画 Animate

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

效果 - 图3

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

  1. ;(async function () {
  2.   const birdsJsonUrl = 'https://s5.ssl.qhres.com/static/5f6911b7b91c88da.json';
  3.   const birdsRes = 'https://p.ssl.qhimg.com/d/inn/c886d09f/birds.png';
  5.   const scene = new Scene('#animations', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  6.   const layer = scene.layer('fglayer');
  8.   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';
  10.   await scene.preload([birdsRes, birdsJsonUrl]);
  12.   const path = new Path();
  14.   path.attr({
  15.     anchor: [0.5, 0.5],
  16.     pos: [770, 300],
  17.     path: {d, trim: true},
  18.     lineWidth: 26,
  19.     lineCap: 'round',
  20.     gradients: {
  21.       strokeColor: {
  22.         vector: [0, 400, 400, 0],
  23.         colors: [{
  24.           offset: 0,
  25.           color: 'rgba(255,0,0,1)',
  26.         }, {
  27.           offset: 0.5,
  28.           color: 'rgba(255,0,0,0)',
  29.         }, {
  30.           offset: 1,
  31.           color: 'rgba(255,0,0,0)',
  32.         }],
  33.       },
  34.       fillColor: {
  35.         vector: [0, 0, 400, 400],
  36.         colors: [{
  37.           offset: 0,
  38.           color: 'rgba(255,0,0,0.7)',
  39.         }, {
  40.           offset: 1,
  41.           color: 'rgba(255,255,0,0.7)',
  42.         }],
  43.       },
  44.     },
  45.   });
  47.   layer.append(path);
  49.   const s = new Sprite('bird1.png');
  50.   const pathSize = path.pathSize;
  52.   s.attr({
  53.     anchor: [0.5, 0.5],
  54.     pos: [770 - pathSize[0] / 2, 300 - pathSize[1] / 2],
  55.     size: [80, 50],
  56.     offsetPath: path.svg.d,
  57.     zIndex: 200,
  58.   });
  59.   s.animate([
  60.     {offsetDistance: 0},
  61.     {offsetDistance: 1},
  62.   ], {
  63.     duration: 6000,
  64.     iterations: Infinity,
  65.   });
  67.   let i = 0;
  68.   setInterval(() => {
  69.     s.textures = [`bird${i++ % 3 + 1}.png`];
  70.   }, 100);
  72.   const startTime = Date.now();
  73.   const T = 6000;
  74.   requestAnimationFrame(function next() {
  75.     const p = Math.PI * 2 * (Date.now() - startTime) / T;
  76.     const colors = [
  77.       {offset: 0, color: 'rgba(255,0,0,1)'},
  78.       {offset: 0.5 + 0.5 * Math.abs(Math.sin(p)), color: 'rgba(255,0,0,0)'},
  79.       {offset: 1, color: 'rgba(255,0,0,0)'},
  80.     ];
  82.     const gradients = path.attr('gradients');
  83.     gradients.strokeColor.colors = colors;
  84.     path.attr({gradients});
  86.     requestAnimationFrame(next);
  87.   });
  89.   layer.appendChild(s);
  90. }())

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

playbackRate: 1.0

效果 - 图4

通过控制playbackRate可以控制layer上的所有动画的播放速度，该属性也会影响到layer的draw方法中的时间参数，对自定义绘图中依赖于时间轴的也可以产生影响。

  1. ;(async function () {
  2.   const birdsJsonUrl = 'https://s5.ssl.qhres.com/static/5f6911b7b91c88da.json';
  3.   const birdsRes = 'https://p.ssl.qhimg.com/d/inn/c886d09f/birds.png';
  5.   const scene = new Scene('#animations-playback', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  6.   const layer = scene.layer('fglayer');
  7.   const timeline = layer.timeline;
  9.   const playbackRate = document.getElementById('playbackRate');
  10.   const speedUp = document.getElementById('speedUp');
  11.   const slowDown = document.getElementById('slowDown');
  12.   const pause = document.getElementById('pause');
  13.   const resume = document.getElementById('resume');
  15.   function updateSpeed() {
  16.     playbackRate.innerHTML = `playbackRate: ${timeline.playbackRate.toFixed(1)}`;
  17.   }
  18.   speedUp.addEventListener('click', () => {
  19.     timeline.playbackRate += 0.5;
  20.     updateSpeed();
  21.   });
  22.   slowDown.addEventListener('click', () => {
  23.     timeline.playbackRate -= 0.5;
  24.     updateSpeed();
  25.   });
  26.   pause.addEventListener('click', () => {
  27.     timeline.playbackRate = 0;
  28.     updateSpeed();
  29.   });
  30.   resume.addEventListener('click', () => {
  31.     timeline.playbackRate = 1.0;
  32.     updateSpeed();
  33.   });
  35.   await scene.preload([birdsRes, birdsJsonUrl]);
  37.   for(let i = 0; i < 10; i++) {
  38.     if(i !== 5 && i !== 9) {
  39.       const bird = new Sprite('bird1.png');
  40.       bird.attr({
  41.         anchor: [0.5, 0.5],
  42.         pos: [-50, 100 + (i % 5) * 100],
  43.       });
  44.       layer.append(bird);
  46.       bird.animate([
  47.         {textures: 'bird1.png'},
  48.         {textures: 'bird2.png'},
  49.         {textures: 'bird3.png'},
  50.         {textures: 'bird1.png'},
  51.       ], {
  52.         duration: 500,
  53.         iterations: Infinity,
  54.         easing: 'step-end',
  55.       });
  57.       const delay = i < 5 ? Math.abs(2 - i) * 300 : (4 - Math.abs(7 - i)) * 300;
  58.       bird.animate([
  59.         {x: -50},
  60.         {x: 1600},
  61.         {x: -50},
  62.       ], {
  63.         delay,
  64.         duration: 6000,
  65.         // direction: 'alternate',
  66.         iterations: Infinity,
  67.       });
  69.       bird.animate([
  70.         {scale: [1, 1]},
  71.         {scale: [-1, 1]},
  72.         {scale: [1, 1]},
  73.       ], {
  74.         delay,
  75.         duration: 6000,
  76.         iterations: Infinity,
  77.         easing: 'step-end',
  78.       });
  79.     }
  80.   }
  81. }())

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

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

阴影 shadow

spritejs可以通过shadow属性给元素设置阴影：

效果 - 图5

  1. const scene = new Scene('#shadow', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer('fglayer');
  4. const p = new Path('M0,0H200V200z');
  5. p.attr({
  6.   fillColor: 'red',
  7.   pos: [700, 150],
  8.   rotate: 60,
  9.   shadow: {
  10.     offset: [15, 15],
  11.     blur: 10,
  12.     color: '#999',
  13.   },
  14. });
  15. layer.append(p);

滤镜 filter

除了设置shadow外，spritejs支持canvas滤镜，能够方便地给元素添加各种滤镜。

效果 - 图6

  1. ;(async function () {
  2.   const images = [
  3.     {id: 'girl1', src: 'https://p5.ssl.qhimg.com/t01feb7d2e05533ca2f.jpg'},
  4.     {id: 'girl2', src: 'https://p5.ssl.qhimg.com/t01deebfb5b3ac6884e.jpg'},
  5.   ];
  6.   const scene = new Scene('#filters', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  7.   const layer = scene.layer('fglayer');
  8.   const y1 = 50,
  9.     y2 = 320;
  11.   function applyFilters(id, filters, y, scale = 1) {
  12.     filters.forEach((f, i) => {
  13.       const s = new Sprite();
  14.       const textures = {id},
  15.         filter = {};
  17.       if(f.length === 2) {
  18.         filter[f[0]] = f[1];
  19.       }
  20.       s.attr({
  21.         textures,
  22.         pos: [50 + i * 250, y],
  23.         scale,
  24.         filter,
  25.       });
  26.       layer.append(s);
  27.     });
  28.   }
  30.   await scene.preload(...images);
  32.   const filters1 = [
  33.     [],
  34.     ['brightness', '150%'],
  35.     ['grayscale', '50%'],
  36.     ['blur', '12px'],
  37.     ['dropShadow', [15, 15, 5, '#033']],
  38.     ['hueRotate', 45],
  39.   ];
  41.   applyFilters('girl1', filters1, y1, 0.5);
  43.   const filters2 = [
  44.     [],
  45.     ['invert', '100%'],
  46.     ['opacity', '70%'],
  47.     ['saturate', '20%'],
  48.     ['sepia', '100%'],
  49.     ['hueRotate', 135],
  50.   ];
  52.   applyFilters('girl2', filters2, y2);
  53. }())

渐变 gradient

spritejs支持三种渐变，分别为两种标准的canvas渐变：linearGradient和radialGradient，以及一种微信小程序的特殊的渐变：circularGradient。spritejs中设置渐变很简单，只需要设置gradients属性，其中指定需要应用渐变的属性，目前支持border、bgcolor、fillColor和strokeColor四种属性的渐变。通过传递vector参数表示渐变的类型，根据个数自动识别为对应的渐变类型。

效果 - 图7

  1. const scene = new Scene('#gradients', {viewport: ['auto', 'auto'], resolution: [1540, 600]});
  2. const layer = scene.layer('fglayer');
  4. const box = new Sprite();
  5. box.attr({
  6.   border: 10,
  7.   gradients: {
  8.     border: {
  9.       vector: [0, 0, 170, 170],
  10.       colors: [
  11.         {offset: 0, color: 'red'},
  12.         {offset: 0.5, color: 'yellow'},
  13.         {offset: 1, color: 'green'},
  14.       ],
  15.     },
  16.     bgcolor: {
  17.       vector: [0, 150, 150, 0],
  18.       colors: [
  19.         {offset: 0, color: '#fff'},
  20.         {offset: 0.5, color: 'rgba(33, 33, 77, 0.7)'},
  21.         {offset: 1, color: 'rgba(128, 45, 88, 0.5)'},
  22.       ],
  23.     },
  24.   },
  25.   pos: [150, 50],
  26.   size: [150, 150],
  27.   borderRadius: 15,
  28. });
  30. layer.append(box);
  32. const label = new Label('Hello SpriteJS~~');
  33. label.attr({
  34.   lineWidth: 6,
  35.   gradients: {
  36.     fillColor: {
  37.       vector: [35, 35, 50, 350, 350, 600],
  38.       colors: [
  39.         {offset: 0, color: '#777'},
  40.         {offset: 0.5, color: '#ccc'},
  41.         {offset: 1, color: '#333'},
  42.       ],
  43.     },
  44.   },
  45.   pos: [500, 50],
  46.   font: '106px Arial',
  47. });
  49. layer.append(label);
  51. const path = new Path();
  53. path.attr({
  54.   path: {
  55.     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',
  56.     trim: true,
  57.     transform: {scale: 0.7, rotate: 30},
  58.   },
  59.   gradients: {
  60.     fillColor: {
  61.       vector: [200, 200, 0, 0],
  62.       colors: [
  63.         {offset: 0, color: 'red'},
  64.         {offset: 0.5, color: 'yellow'},
  65.         {offset: 1, color: 'green'},
  66.       ],
  67.     },
  68.   },
  69.   anchor: [0.5, 0.5],
  70.   pos: [700, 360],
  71. });
  73. layer.append(path);