Question

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

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

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

感谢。

Answer 1

1：你可能想看看var fragment = document.createDocumentFragment();
2：是的，通过CSS，速度更快！

我认为this youtube video值得您光顾。

祝你好运

更新时间：2013年1月9日 只是偶然发现了这一点在css3中有一个使用步骤的动画功能基本上你创建一个sprite（在画布中），然后使用css3使用元素的background-property为sprite设置动画。非常酷（并且应该使用优化的浏览器自己的代码来执行此操作，因此不会像使用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; background-image：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 play {from {background-position：0px; }        至{background-position：-500px; }}

@ - moz-keyframes play {from {background-position：0px; }        至{background-position：-500px; }}

@ - ms-keyframes play {from {background-position：0px; }        至{background-position：-500px; }}

@ - o-keyframes play {from {background-position：0px; }        至{background-position：-500px; }}

@keyframes play {from {background-position：0px; }        至{background-position：-500px; }}

示例jsfiddle。

在javascript中在画布上预渲染动画

1 个答案: