Sonic.js 使用 Canvas 制作循环播放效果的动画插件

Question

Sonic 是一个小工具，你可以用它制作循环动画，通过简单的设置即可完成流程的动画效果。

例如下面的正方形：

var square = new Sonic({
  width: 100,
  height: 100,
  fillColor: '#000',
  path: [
    ['line', 10, 10, 90, 10],
    ['line', 90, 10, 90, 90],
    ['line', 90, 90, 10, 90],
    ['line', 10, 90, 10, 10]
  ]
});

square.play();

document.body.appendChild(square.canvas);

它是如何工作的？

Sonic.js 通过绘制形状来工作，默认情况下是正方形，fillRect，沿着预定的路径以极小的间隔循环移动。通过 path 选项中指定的绘图方法。path 数组如下：

[methodName, arguments...]

方法及其论点：

• ['line', startX, startY, endX, endY]
• ['bezier', startX, startY, endX, endY, cp1x, cp1y, cp2x, cp2y]
• ['arc', cx, cy, radius, startDegree, endDegree] 注意这里是度数，不是弧度！

可选参数

可以传递给 new Sonic({...}) 包括：

• path：定义 Sonic.js 路径的数组。看上面的正方形例子。每个数组项都是一个具有以下格式的数组 [methodName, arguments...]，使用上面指定的可用方法(line, bezier和arc).
• width：画布的像素宽度(注：不包括填充)
• height：画布的像素高度(注：不包括填充)
• padding(默认值：0)：像素填充。
• fillColor：画布上下文的填充颜色(例如：red, rgb(255,0,0), #F00)
• strokeColor：画布上下文的笔画颜色(例如：green, rgb(0,255,0), #0F0)
• fps(默认值：25)每秒有多少帧。更多的fps意味着更流畅的动画和 Sonic.js 将更快地通过指定的路径。更少的帧意味着相反。不应该有太多的需要改变这一点。
• stepsPerFrame(默认值：1)：这个整数指定每个帧上应该执行多少个动画步骤。
• pointDistance(默认值：.05)：每个路径(即主路径下的每个子路径)点之间的距离(0..1)。如果您画了一条线，并将点距离设置为0.1，那么动画中将有十个步骤(10分)。
• trailLength(默认值：1)：音轨的长度(0.1)。长.的长度一意味着它就像一条蛇想吃自己的尾巴。
• step(默认值："square")：一个函数或一个函数的名称 Sonic.stepMethods。此函数将在动画的每个步骤上调用。有关此功能的更多信息，请参见下面(在“更多控制”下)。
• domClass(默认值："sonic")：要应用于<canvas>元素。

更多控制

的帮助下可以绘制自定义形状。step：

new Sonic({
  //...
  step: function(point, index, frame) {

    // point is an object { x: n, y: n, progress: n}
    // point.progress is progress of point (0..1)
    // relative to other points in that single draw

    // index is the progress relative to entire shape

    // frame is the current frame (0..1) 

    // E.g. let's draw a tiny circle:

    this._.beginPath();
    this._.moveTo(point.x, point.y);
    this._.arc(point.x, point.y, 5, 0, Math.PI*2, false);
    this._.closePath();
    this._.fill();

    // this == Sonic instance
    // this._ == canvas context
    // this.alpha = alpha opacity

  }
});

相关链接

• http://padolsey.github.io/sonic-creator/
• github 地址：https://github.com/padolsey/sonic.js
• 在线示例：https://j11y.io/p/Sonic/repo/demo/demo.html