javascript与css3动画结合使用小结

 更新时间:2015年03月11日 09:05:56   转载 投稿:hebedich  
本文给大家讲述的是如何使用javascript结合CSS动画来实现一些占用资源更少,更优化的动画效果,思路十分巧妙,这里推荐给小伙伴们参考下。

当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画。因为在桌面浏览器上, 并非所有的都支持css3。用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养。总有不少人会觉得win7.win8没xp好用。但手机方面就大不一样了,手机浏览器对html5和css3的支持还是很不错的。但手机硬件处理能力却又十分有限。在四核、八核手机横行的今天,依然有像我这样使用双核或单核手机的。js虽好,单奈何接触不多,调不好那种感觉。一个简单的页面滑动,在i7的pc上运行十分流畅,可是,在我的双核手机上就卡、顿、卡、顿。令人十分郁闷。为此,我也是寻找了很久很久,看了很多很多。终于在不就之前,找到了一种还算简单的方法:使用css3去执行动画。

  在以前,对于动画除了Jquery的animate等动画函数外,更多的是使用setTimeout,setInterval,这样循环的去改变一个元素的margin、width、top等属性。也正是如此,才有了我的困惑。

  首先,setTimeout,setInterval 这货并非你设置0ms它就能一直一直的去执行。曾经在iscroll里调试的时候无意中发现了这个秘密。原来Timer延时的计算依靠的是浏览器的内置时钟,而时钟的精确度又取决于时钟更新的频率。IE8及其之前的IE版本更新间隔为15.6毫秒。完了,我想它10ms执行1px位移,它还不能准时的干这事。

  而卡又是怎么回事呢?卡,因为代码写的不好。毕竟js是单线程的,一旦有耗时的动作那么UI就可能不响应了。虽然我们使用了setTimeout,但正是因为setTimeout让我们看上去界面没死可动作却又不流畅了。因为这次setTimeout执行之后,在下次执行前,中间这个间隔里很可能遇到另一个耗时的动作,那么,setTimeout的执行就无限后延。然后呢?卡!然而,卡还能有下一个原因,改变原始属性时不小心触发浏览器Layout(即:重布局)。这个问题说它不耗时呢,却又耗时,说它耗时呢,很多时候却又可以忽略。但很多时候其实是不能忽略的。

  除了上面这两段,还有一个问题,就是在很多手机上总感觉是一帧一帧的,而且还可能是一帧长一帧短。这真是能把人都搞废的节奏。为何会这样呢,依然和settimeout的推迟有一定的关系。丢帧。这个问题有涉及到显示器的刷新频率问题。实在太复杂了。

  最后选择了CSS3,js动态的改变元素的属性,使用transition来控制动画执行时间。举个例子:

复制代码 代码如下:

<div id="test" style="transition:all 1s ease; width:100px;" ></div>

js:

复制代码 代码如下:

$("#test").width(200);

  这样1秒之后这个div的宽度会变成200px。不是孙悟空变桃子一样瞬间变大,慢慢的赶脚,不卡不顿。而且使用css动画有个好处,它不受耗时js的影响。虽然浏览器中UI线程与js线程是互斥,但这一点对css动画不成立,并且很多浏览器还能启用硬件加速(比如:Chrome)。虽然浏览器重布局普通情况下感觉不是很明显,但还是应该尽量避免大面积的重布局。so在动画元素上加上-webkit-transform: translateZ(0);或者-webkit-transform: translate3d(0,0,0);这样浏览器会独立渲染这一层。即便是重布局无法避免,这样面积也小些。而使用translate取代margin也确实是一个十分明智的决定。

  最后附上一些常用的改变时会触发重布局的属性: 
   

复制代码 代码如下:

   width
   height
   padding
   margin
   display
   border-width
   border
   min-height

以上就是本文所述的全部内容了,希望对大家学习javascript和CSS3能够有所帮助,同时不足之处烦请补充,谅解。

相关文章

  • js实现滑动触屏事件监听的方法

    js实现滑动触屏事件监听的方法

    这篇文章主要介绍了js实现滑动触屏事件监听的方法,适用于手机端触屏滑动事件的监听技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • JavaScript实现的数字与字符串转换功能示例

    JavaScript实现的数字与字符串转换功能示例

    这篇文章主要介绍了JavaScript实现的数字与字符串转换功能,涉及javascript数字、字符串等运算与转换相关操作技巧,需要的朋友可以参考下
    2017-08-08
  • js的各种排序算法实现(总结)

    js的各种排序算法实现(总结)

    下面小编就为大家带来一篇js的各种排序算法实现(总结)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • js+css实现红包雨效果

    js+css实现红包雨效果

    这篇文章主要为大家详细介绍了js+css实现红包雨效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • javascript iFrame研究

    javascript iFrame研究

    iFrame小应用
    2008-12-12
  • 微信小程序实现日期格式化和倒计时

    微信小程序实现日期格式化和倒计时

    这篇文章主要为大家详细介绍了微信小程序实现日期格式化和倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • javascript基本数据类型和转换

    javascript基本数据类型和转换

    本文主要介绍了javascript的基本数据类型和转换,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • 很酷的javascript loading效果代码

    很酷的javascript loading效果代码

    很不错的loading效果代码,方便学习loading的朋友测试与学习
    2008-06-06
  • js实现仿百度瀑布流的方法

    js实现仿百度瀑布流的方法

    这篇文章主要介绍了js实现仿百度瀑布流的方法,以完整实例形式分析了js仿百度瀑布流的相关样式与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • Js获取当前日期时间及格式化代码

    Js获取当前日期时间及格式化代码

    这篇文章主要为大家详细介绍了Js获取当前日期时间及格式化代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09

最新评论