迴圈放映怎麼設定
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”
）：要應用於
元素。
更多控制
的幫助下可以繪製自定義形狀。
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