zoukankan      html  css  js  c++  java
  • js动画和css3动画的区别

    JS动画(逐帧动画)

      首先,在js动画是逐帧动画,是在时间帧上逐帧绘制帧内容,由于是一帧一帧的话,所以他的可操作性很高,几乎可以完成任何你想要的动画形式。但是由于逐帧动画的帧序列内容不一样,会增加制作负担,且资源占有比较大。但它的优势也很明显:因为它相似与电影播放模式,很适合于表演很细腻的动画,如3D效果、人物或动物急剧转身等等效果。但是,如果帧率过低的话,会帧与帧之间的过渡很可能会不自然、不连贯。

      js是单线程的脚本语言,当js在浏览器主线程运行时,主线程还有其他需要运行的js脚本、样式、计算、布局、交互等一系列任务,对其干扰线程可能出现阻塞,造成丢帧的情况。

      其次,js在做动画的时候,其复杂度是高于css3的,需要考虑一些计算,操作等方便问题。

      但是正是由于js对动画的操作复杂度比较高,能对动画有一个比较好的控制,如开始、暂定、回放、终止、取帧等,可以很精确的做到。因此可以js可以通过操作DOM和BOM来做一些酷炫的动态效果,以及爆炸特效,且兼容性比较好。

    css3(补间动画)

      制作方法简单方便。只需确定第一帧和最后一帧的关键位置即可,两个关键帧之间帧的内容由Flash自动生成,不需要人为处理。当然也可以多次添加关键帧的位置。

      因为只设置几个关键帧的位置,所以在进行动画控制的时候时比较弱的。不能够在半路暂停动画,或者在动画过程中不能对其进行一些操作等。

      css3在实现一些简单的滑动,翻转等特效的时候会很方便,但是想要做到一些酷炫的效果的时候,其操作往往可能会比js操作有更多的冗余。

      css3在做动画的时候,浏览器可以对其进行一些优化,会比js使用更少的占用cpu资源,但是效果足够流畅。

    结论

      如果动画只是一些简单的状态切换,滑动等效果,不需要中间的控制过程,css3是比较好的选择,它直接在css文件中就可以实现,并不需要引入太多的js库。而你想做一些复杂的客户端界面,开发一个复杂ui的app,实现一个复杂纹理动画等,需要对页面进行精准的控制计算,js是不错的选择。

  • 相关阅读:
    201275判断joomla首页的方法
    phpcms添加视频模块(未完)
    Joomla学习总结
    Joomla资源
    2012725 K2组件学习
    Apache Commons configuration使用入门
    linux学习(7)压缩与解压缩
    linux学习(6)redhat安装xwindow环境
    linux学习(5)iptables防火墙设置
    java实现的一个分页算法
  • 原文地址:https://www.cnblogs.com/mwxz/p/13206226.html
Copyright © 2011-2022 走看看