JX20140226181130

What’s JX.Animate

JX.Animate是由腾讯前端团队AlloyTeam推出的一个JavaScript的CSS3动画库,通过JX插件的形式提供。
JX.Animate可以帮助开发者在JavaScript代码中方便调用和控制CSS3动画,例如动画时长、重复次数、动画缓冲、结束回调等,并且支持播放声音。

Why CSS3

众所周知在支持HTML5的浏览器中,使用CSS3的动画效果无论从性能还是流畅程度都远超传统的JavaScript定时器动画效果。然而CSS3动画却存在CSS样式文件不好维护、动画过程不易控制、无法在运行动态生成动画等不足之处。

Features

动画可以通过多种方式定义
通过在CSS文件中定义关键帧动画(KeyFrameAnimate),可以做到动画定义与动画控制分离,可以更好的支持多人协同工作。
使用JavaScript代码定义既可以预先定义好动画效果,也可以在运行时动态定义动画效果,相比CSS样式的方式更加灵活。
JX.Animate支持多米诺效果,可以控制多个DOM对象依次播放动画,增强视觉效果。JX.Animate还提供了一个幻灯片组件,其中就利用了多米诺效果来实现图片的切换。可以在JX.Animate的主页直接看到动画效果。

How to use

1. 使用内置动画效果
2. 使用CSS样式中的动画,并播放声音
对应的CSS样式:
3. 应用多米诺效果,并在在动画结束后执行回调

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2014/02/based-html5-css3-animation-technology-to-achieve-the-javascript-libraries-jx-animate/

  1. Kayson Li 2014 年 10 月 30 日

    Animate.css也有类似的封装。

  2. 咖啡 2014 年 7 月 3 日

    试试看怎么样

  3. JX.Animate:腾讯开源的轻量级CSS3动画库爱前端 | 爱前端 2014 年 3 月 13 日

    […] AlloyTeam This article is automatically posted by WP-AutoPost : […]

发表评论