我对 createJS 很陌生 - 我想像倒数计时器动画一样实现:
我偶然发现了这个有这个小提琴的问题- 我想实现这样的目标,但我想创建一个弧形:
我尝试调整代码并更改点值,但它只给了我一个钻石而不是完美的曲线。
我是否需要指出每个值以实现完美的圆圈,例如:
points = [{x: 50, y: 0}, {x: 51, y: 1}, {x:52, y: 2}, ...etc]
还是有其他方法(可能是函数或插件)来做这些事情?我在他们的文档中找不到任何东西
您可能对使用arc()
图形以及 EaselJS 的“命令”图形方法感兴趣:
1)创建一个完整的弧
var s = new createjs.Shape().set({x:100,y:100});
s.strokeCmd = s.graphics.s("red")
.ss(10,"round")
.arc(0,0,80,0,Math.PI*2)
2)存储最后一个“命令”
var cmd = s.command; // This will be the arc command
3) 将命令设置endAngle
为 0。您也可以在 arc() 方法中执行此操作
cmd.endAngle = 0;
4)在你的动画中,随着时间的endAngle
推移增加。在这个例子中,我将 100 归一化为半径的 100% ( Math.PI*2
)
var index = 0;
function tick(event) {
index += 1; // Fake Percent
cmd.endAngle = index/100 * Math.PI*2;
stage.update(event);
}
这是一个快速的小提琴:https ://jsfiddle.net/lannymcnie/pgeut9cr/
相反,如果您只想在固定时间段内为圆圈设置动画,则可以对endAngle
值进行补间。这是使用 TweenJS 的示例:https ://jsfiddle.net/lannymcnie/pgeut9cr/2/
createjs.Tween.get(cmd)
.to({endAngle:Math.PI*2}, 2000, createjs.Ease.quadInOut);
干杯,