gpt4 book ai didi

javascript - 使用 EaselJs 的倒计时动画

转载 作者:行者123 更新时间:2023-11-30 17:39:09 25 4
gpt4 key购买 nike

我正在尝试使用 easeljs 模拟倒计时动画。我有一个它应该是什么样子的例子。 http://jsfiddle.net/eguneys/AeK28/

但这看起来像是 hack,是否有适当/更好/灵活的方法来做到这一点?

换句话说,我如何定义一条路径,并用 easeljs 绘制该路径。

这看起来很丑:

     createjs.Tween.get(bar, {override: true}).to({x: 400}, 1500, createjs.linear)
.call(function() {
createjs.Tween.get(bar, {override: true}).to({y: 400}, 1500, createjs.linear)
.call(function() {
createjs.Tween.get(bar, {override: true}).to({ x: 10 }, 1500, createjs.linear)
.call(function() {
createjs.Tween.get(bar, {override: true}).to({ y: 10 }, 1500, createjs.linear);
})
});
});

最佳答案

您可以使用 TweenJS MotionGuidePlugin沿路径补间而不是多个补间。

createjs.MotionGuidePlugin.install();
createjs.Tween.get(bar).to({
guide: {path: [10,10, 10,10,400,10, 400,10,400,400, 400,400,10,400, 10,400,10,10]}
}, 6000, createjs.linear);

路径数组基本上是 moveTo 调用后跟多个 curveTo 调用的一组坐标。坐标将沿着这些调用产生的路径进行插值。


指定路径数组的一种更模块化的方法是让一个函数使用您声明的一组点生成它。

function getMotionPathFromPoints (points) {
var i, motionPath;

for (i = 0, motionPath = []; i < points.length; ++i) {
if (i === 0) {
motionPath.push(points[i].x, points[i].y);
} else {
motionPath.push(points[i - 1].x, points[i - 1].y, points[i].x, points[i].y);
}
}

return motionPath;
}

var points = [
new createjs.Point(10, 10),
new createjs.Point(400, 10),
new createjs.Point(400, 400),
new createjs.Point(10, 400),
new createjs.Point(10, 10)
];

createjs.MotionGuidePlugin.install();
createjs.Tween.get(bar).to({
guide: {path: getMotionPathFromPoints(points)}
}, 6000, createjs.linear);

FIDDLE

关于javascript - 使用 EaselJs 的倒计时动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21417481/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com