gpt4 book ai didi

jquery - 绘制线条动画时 tweenjs 的性能问题

转载 作者:行者123 更新时间:2023-12-01 04:03:22 27 4
gpt4 key购买 nike

我正在使用 eaeljs 和 tweenjs 来制作多条线的动画,这些线通过一个点从一个位置绘制到另一个位置,使其成为一条曲线,并在该线的前面附加了一个 img。我为此使用补间插件 MotionGuidePlugin。这应该发生在 init() 函数内部。没有鼠标事件或基于用户的事件触发此操作。

我的问题是我的 Canvas 在一段时间后变得非常慢。线条变得更加“像素化”,并且动画会跳过很多帧 - 创建一条直线而不是曲线。我在 Stack Overflow 上研究了这个问题,发现这是因为每一帧都会绘制一个新的 Graphics。解决方案似乎是清除图形或缓存它,但我不知道如何用我当前的代码实现它:

createjs.MotionGuidePlugin.install();

var shape = new createjs.Shape();
var bar = { x: arrowStartPosX, y: arrowStartPosY, oldx: arrowStartPosX, oldy: arrowStartPosY };
stage.addChild(shape);

var image = new createjs.Bitmap("arrow.png");
image.alpha = 0;
stage.addChild(image);

createjs.Ticker.addEventListener("tick", tick);

run();

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

function run() {
var posXStart = arrowStartPosX + 200;
var points = [
new createjs.Point(arrowStartPosX, arrowStartPosY),
new createjs.Point(posXStart, middlePosY),
new createjs.Point(arrowStartPosX, arrowEndPosY)
];

createjs.Tween.get(bar).wait(timeCount-400).to({
guide: {path: getMotionPathFromPoints(points)}
}, 1900);

createjs.Tween.get(image).to({rotation: -70}, 0)
.wait(timeCount-400).to({alpha: 1}, 0)
.to({rotation: -290,
guide:{ path:[startImgPosX, startImgPosY, middleImgPosX, middleImgPosY, endImgPosX, endImgPosY],
orient: "auto"}},1900);
}

function tick() {
shape.graphics
.setStrokeStyle(2, 'round', 'round')
.beginStroke("#000000")
.curveTo(bar.oldx, bar.oldy, bar.x, bar.y)
.endStroke();

bar.oldx = bar.x;
bar.oldy = bar.y;
}

应该绘制线条,完成后,它们应该保持在原位。谁能向我解释如何修复我的代码,并使 Canvas 再次正常执行?

更新:

我现在已经创建了一个FIDDLE对于我的问题。如果您一段时间没有在 fiddle 中执行任何操作,您会发现 JSFiddle 网页变得更慢,就像我自己的网页一样。

最佳答案

向量可能非常昂贵,并且您的演示显示您正在添加大量的小线。每次更新舞台时,都必须重新绘制图形。如果没有缓存,您将无法长时间实现此效果,尤其是在低功耗设备上。

根据您的最终目标,您可以缓存形状,然后在创建新内容时绘制它。

// Cache up front
var shape = new createjs.Shape();
shape.cache(0,0,100,1000);

// Clear the graphics before drawing new content
shape.graphics.clear()
.setStrokeStyle(3, 'round', 'round')
.beginStroke("#aaa")
.curveTo(bar.oldx, bar.oldy, bar.x, bar.y)
.endStroke();

// Update the cache with "source-over" to just add the new content.
shape.updateCache("source-over");
stage.update();

这是一个 fiddle 更新:http://jsfiddle.net/lannymcnie/km89jbn2/2/

这种方法永远不会减慢。

干杯。

关于jquery - 绘制线条动画时 tweenjs 的性能问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35412569/

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