H5篇：页面中实现动画的几种方式？（附代码）-嗨游网

之前文章《html5篇：实现页面跳转的5种方式（代码分享）》中，带大家了解html5使用现页面跳转的5种方式。下面本篇文章给大家了解一下页面中实现动画的几种方式，我们就来看一下吧！！

H5篇：页面中实现动画的几种方式？（附代码）

wed的动画实现多种多样，随着 H5 的发展，实现动画的方式越来越多了。初步统计实现动画的方式有以下一些方式实现。

canvas作为H5新增元素，是借助Web API来实现动画的。结合setInterval或者requestAnimationFrame可以实现各种样的动画，下面的例子展示了一个 7 色圆的颜色过度

              JS Bin

登录后复制

复制下面链接在线看demo：

jsbin/piwihur/edit?html,js,output

cavans有些复杂，一时半会消化不了。之后再写详细的文章研究。Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画

transition

transition是过度动画。但是transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变。

在移动端开发中，直接使用transition动画会让页面变慢甚至卡顿。所以我们通常添加transform:translate3D(0,0,0)或transform:translateZ(0)来开启移动端动画的GPU加速，让动画过程更加流畅。

animation

animation算是真正意义上的CSS3动画。通过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡。而且关键帧状态的控制是通过百分比来控制的。

CSS3最大的优势是摆脱了js的控制，并且能利用硬件加速以及实现复杂动画效果。

有一篇文章做了简单的介绍，点这里

假如用CSS3来实现上面的Canvas7 彩颜色过渡的话，就非常简单了

@keyframes color {  0% {    background-color: red;  }  7% {    background-color: orange;  }  17% {    background-color: yellow;  }  22% {    background-color: green;  }  42% {    background-color: cyan;  }  82% {    background-color: blue;  }  90% {    background-color: purple;  }}

登录后复制

当然并不是用CSS3做动画比Canvas牛逼，只是使用场景不一样吧。知道的就这些了，之后再补充吧。

[完]

推荐学习：SVG视频教程

以上就是H5篇：页面中实现动画的几种方式？（附代码）的详细内容，更多请关注易企推科技其它相关文章！

本文地址：网络百科频道 https://www.eeeoo.cn/wangluo/1146841.html，嗨游网一个专业手游免费下载攻略知识分享平台，本站部分内容来自网络分享，不对内容负责，如有涉及到您的权益，请联系我们删除，谢谢！