0

我有一个网络应用程序，它使用画布为绘制到屏幕上的树设置动画。它通过连续进行多次三角计算来实现。当您单击“增长”按钮时，会出现一个树生长的动画，该动画具有用户可以更改的某些属性。您可以在此处查看应用程序http://pastehtml.com/view/c85mxfgcj.html。

问题是，如果您将“年龄”（要通过的迭代次数）设置得太高，由于计算机必须执行的计算，动画开始滞后。我想知道两件事：

  1. 有没有办法在向用户显示之前预渲染动画？
  2. 有没有办法做到这一点，如果我有一棵已经渲染过的树并且我想让它在屏幕上移动，我可以做到这一点，而不必在每一帧都重新绘制树？

谢谢。

4

1 回答 1

1

1：您可能想查看var fragment = document.createDocumentFragment();
2：是的，通过 css 更快！

我认为这个 youtube 视频值得您花时间。

祝你好运

更新：2013 年 1 月 9 日 刚刚偶然发现这一点。
在 css3 中有一个使用步骤的动画功能。
基本上，您创建一个精灵（在画布中），然后使用 css3 使用元素上的背景属性为精灵设置动画。非常酷（并且应该使用优化的浏览器自己的代码来执行此操作，因此不会像使用 javascript/canvas 那样加载用户 cpu）。
然而，它仍然没有创建动画 gif（但我认为即使使用库也应该是可能的，因为 gif 和 pnp 非常相似，然后使用data:image/gif协议提供该 gif），但最终结果在（现代）浏览器。

HTML： <div class="hi"></div>或<img src="transparent.gif" class="hi">

CSS3：

.hi { 宽度：50px; 高度：72px；背景图像：url（“http://files.simurai.com/misc/sprite.png”）；

-webkit-animation: play 1s steps(10) infinite;
   -moz-animation: play 1s steps(10) infinite;
    -ms-animation: play 1s steps(10) infinite;
     -o-animation: play 1s steps(10) infinite;
        animation: play 1s steps(10) infinite; }

@-webkit-keyframes 播放 { from { background-position: 0px; } 到 { 背景位置：-500px; } }

@-moz-keyframes 播放 { from { background-position: 0px; } 到 { 背景位置：-500px; } }

@-ms-keyframes 播放 { from { background-position: 0px; } 到 { 背景位置：-500px; } }

@-o-keyframes 播放 { from { background-position: 0px; } 到 { 背景位置：-500px; } }

@keyframes 播放 { from { background-position: 0px; } 到 { 背景位置：-500px; } }

示例jsfiddle。

于 2012-08-14T16:24:47.360 回答