外部时钟

SpriteJS有自己的canvas内容更新机制，只要layer中的元素的属性有变化，layer就会将该元素放到等待刷新的列表中，在下一个渲染周期内刷新。这是SpriteJS内置的更新机制。

不过，SpriteJS可以使用外部时钟进行canvas更新。这使得它对很多第三方库非常友好。

SpriteJS要指定layer使用外部时钟，可以手动调用layer的draw方法，同时要屏蔽掉layer自己的更新机制，可以在创建layer的时候指定选项{autoRender:false}。

外部时钟 - 图1

这个例子演示了SpriteJS和curvejs联合使用，在这里我们使用外部ticker调用SpriteJS的layer.draw(false)方法。参数false是指定layer在绘制的时候不clear掉canvas中的内容（因为curvejs中已经做了这件事）。

  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('#curvejs', {
  6.     resolution: [1540, 600],
  7.     viewport: 'auto',
  8.   });
  9.   const layer = scene.layer('fglayer', {
  10.     autoRender: false,
  11.   });
  12.   await scene.preload([birdsRes, birdsJsonUrl]);
  13.   const s = new Sprite('bird1.png');
  15.   s.attr({
  16.     anchor: [0.5, 0.5],
  17.     pos: [300, 100],
  18.     transform: {
  19.       scale: [0.5, 0.5],
  20.     },
  21.     offsetPath: 'M10,80 q100,120 120,20 q140,-50 160,0',
  22.     zIndex: 200,
  23.   });
  24.   s.animate([
  25.     {offsetDistance: 0},
  26.     {offsetDistance: 1},
  27.   ], {
  28.     duration: 3000,
  29.     direction: 'alternate',
  30.     iterations: Infinity,
  31.   });
  33.   s.animate([
  34.     {scale: [0.5, 0.5], offsetRotate: 'auto'},
  35.     {scale: [0.5, -0.5], offsetRotate: 'reverse'},
  36.     {scale: [0.5, 0.5], offsetRotate: 'auto'},
  37.   ], {
  38.     duration: 6000,
  39.     iterations: Infinity,
  40.     easing: 'step-end',
  41.   });
  42.   s.animate([
  43.     {textures: 'bird1.png'},
  44.     {textures: 'bird2.png'},
  45.     {textures: 'bird3.png'},
  46.   ], {
  47.     duration: 300,
  48.     direction: 'alternate',
  49.     iterations: Infinity,
  50.   });
  51.   layer.appendChild(s);
  53.   const util = {
  54.     random(min, max) {
  55.       return min + Math.floor(Math.random() * (max - min + 1));
  56.     },
  57.     randomColor() {
  58.       return ['#22CAB3', '#90CABE', '#A6EFE8', '#C0E9ED', '#C0E9ED', '#DBD4B7', '#D4B879', '#ECCEB2', '#F2ADA6', '#FF7784'][util.random(0, 9)];
  59.     },
  60.   };
  62.   const {Stage, Curve, motion} = curvejs;
  64.   const randomColor = util.randomColor,
  65.     stage = new Stage(layer.canvas);
  67.   stage.add(new Curve({
  68.     points: [378, 123, 297, 97, 209, 174, 217, 258],
  69.     color: randomColor(),
  70.     motion: motion.rotate,
  71.     data: Math.PI / 20,
  72.   }));
  74.   stage.add(new Curve({
  75.     points: [378, 123, 385, 195, 293, 279, 217, 258],
  76.     color: randomColor(),
  77.     motion: motion.rotate,
  78.     data: Math.PI / 20,
  79.   }));
  81.   function tick() {
  82.     stage.update();
  83.     layer.draw(false);
  84.     requestAnimationFrame(tick);
  85.   }
  87.   tick();
  88. }())