返回一个特殊对象（并不是原来的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. });

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

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

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

playbackRate: 1.0

通过控制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 resume = document.getElementById('resume');
  14.   function updateSpeed() {
  15.     playbackRate.innerHTML = `playbackRate: ${timeline.playbackRate.toFixed(1)}`;
  16.   }
  17.   speedUp.addEventListener('click', () => {
  18.     timeline.playbackRate += 0.5;
  19.     updateSpeed();
  20.   });
  21.   slowDown.addEventListener('click', () => {
  22.     timeline.playbackRate -= 0.5;
  23.     updateSpeed();
  24.   });
  25.   pause.addEventListener('click', () => {
  26.     timeline.playbackRate = 0;
  27.     updateSpeed();
  28.   });
  29.   resume.addEventListener('click', () => {
  30.     timeline.playbackRate = 1.0;
  31.     updateSpeed();
  32.   });
  34.   await scene.preload([birdsRes, birdsJsonUrl]);
  36.   for(let i = 0; i < 10; i++) {
  37.     if(i !== 5 && i !== 9) {
  38.       const bird = new Sprite('bird1.png');
  39.       bird.attr({
  40.         anchor: [0.5, 0.5],
  41.         pos: [-50, 100 + (i % 5) * 100],
  42.       });
  43.       layer.append(bird);
  45.       bird.animate([
  46.         {textures: 'bird1.png'},
  47.         {textures: 'bird2.png'},
  48.         {textures: 'bird3.png'},
  49.         {textures: 'bird1.png'},
  50.       ], {
  51.         duration: 500,
  52.         iterations: Infinity,
  53.         easing: 'step-end',
  54.       });
  56.       const delay = i < 5 ? Math.abs(2 - i) * 300 : (4 - Math.abs(7 - i)) * 300;
  57.       bird.animate([
  58.         {x: -50},
  59.         {x: 1600},
  60.         {x: -50},
  61.       ], {
  62.         delay,
  63.         duration: 6000,
  64.         // direction: 'alternate',
  65.         iterations: Infinity,
  66.       });
  68.       bird.animate([
  69.         {scale: [1, 1]},
  70.         {scale: [-1, 1]},
  71.         {scale: [1, 1]},
  72.         delay,
  74.         iterations: Infinity,
  75.         easing: 'step-end',
  76.       });
  77.     }
  78.   }
  79. }())

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

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

效果 - 图5

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

  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);

效果 - 图7