gpt4 book ai didi

javascript - 我怎样才能让这个动画在 javascript 中表现更好?

转载 作者:行者123 更新时间:2023-11-29 19:43:35 26 4
gpt4 key购买 nike

我只是想为这些方 block 制作动画,但我发现性能很差,所以我想知道我可以做些什么来减少它运行一段时间后发生的减速,我想我必须做一些清理工作?

这是 fiddle :

http://jsfiddle.net/JeKYj/

<header id ="space">
<div id="space_content">
</div>
</header>

var universe = ($(window).width() * 400) / 80;
console.log(universe);

var i = 0;
while(i < universe) {
var rand = Math.floor(Math.random() * 3) + 1;
var pulse = Math.floor(Math.random() * 500) + 20;
el = "<div class='star_wrapper'><div class='star' style='width:" + rand + "px; height:" + rand + "px; animation-duration:" + pulse + "s; " + "-webkit-animation-duration:" + pulse + "s;'></div>"
$('#space_content').append(el);
i++
}

最佳答案

您可以将您的元素设置为 position:fixed;,因为这将为每个元素提供一个单独的位图。

但是,正如@vals 在他的回答中指出的那样,为这么多元素设置动画最终是行不通的。

这将是 Canvas 的一个很好的候选者,因为您可以在 Canvas 上同时绘制星星和动画(例如,参见我自己的 front page here 以了解类似的 Canvas 方法)。

您可以使用已有的大部分逻辑,而不是将星星绘制到 Canvas 上,而不是创建 DOM 元素。将动画传输到 JavaScript 以移动星星。

创建单个元素( Canvas )并根据窗口大小调整其大小:

<canvas id="stars"></canvas>

JavaScript:

var canvas = document.getElementById('stars'),
ctx = canvas.getContext('2d');

window.onresize = sizeCanvas;

function sizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

然后绘制星星并为其制作动画(此处未显示,但您可以使用一个简单的框架作为基础):

(function loop() {
/// clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

...animate and plot the stars here (recommomend using a star "object" ...

requestAnimationFrame(loop); /// high-efficient timer for animations
})();

关于javascript - 我怎样才能让这个动画在 javascript 中表现更好?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21507789/

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