JX.Animate基于HTML5&CSS3的JavaScript并行动画库

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. 使用内置动画效果
JavaScript
1
JXAnimate.flash(elems,{duration:'500ms'});
2. 使用CSS样式中的动画,并播放声音
JavaScript
1
2
3
4
5
6
7
8
JXAnimate.applyCss(
        elems,
        {duration:'500ms'},
        {
            name:'tada', //CSS KeyFrame Name in Animate.css
            sound:'tada',
            volume:'1'
        });


对应的CSS样式:

@-webkit-keyframes tada {
    0% {-webkit-transform: scale(1);}   
    10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
    100% {-webkit-transform: scale(1) rotate(0);}
}

3. 应用多米诺效果,并在在动画结束后执行回调

JXAnimate.flipInY(
        elems,
        {duration:'1500ms'},
        {
            domino:150,
            callback:function(argument){
                argument.elem.classList.remove('transparent');
            }
        }
);

Demo效果请点击 http://alloyteam.github.io/JXAnimate/demo1.html

本文摘自:http://www.alloyteam.com/2014/02/based-html5-css3-animation-technology-to-achieve-the-javascript-libraries-jx-animate/

版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将立即给予删除

转载请注明:文章转载自:全分享社区 「http://www.aweb.cc

本文标题:JX.Animate基于HTML5&CSS3的JavaScript并行动画库

本文地址:http://www.aweb.cc/article/detail/id/138.html

下一篇>>中国首个开源的HTML5 跨屏前端框架