css3中创建动画的三种方式详解
2015-08-31 17:25
609 查看
一、介绍
创建动画有多种方式,除了传统的利用setInterval来不断改变元素的属性值,和最新canvas中requestAnimationFrame以外,此处介绍三种创建动画的方式。总的来说,这三种都可以归为css3的动画方式,但是,不同的方式伸展拳脚的地方也就不一样。(注意,此处三种方式均基于JQuery)二、创建动画的三种方式
1、css() + transform
这是最简单的一种方式,利用$(id).css()方法添加一个transform属性即可(同理可添加animation属性)。$div.css({ "transition-timing-function" : "linear", "transition-duration" : "3000ms", "transform" : "translateX(300px)" });
2、addClass() + animation
这是利用了JQuery的addClass()方法,及css3的animation动画属性。此处必须先定义好一个animation,然后再定义一个有该animation的class类,在addClass()方法中将该class类添加到元素中。代码如下:
定义animation和class
.ani_class { animation: div3_ani 3s linear forwards; } @keyframes div3_ani { 0% { transform: none; } 100% { transform: translate(300px, 0); } }
添加到元素中
$div2.addClass("ani_class");
3、JQuery transit插件
这是jQuery引入的一种新的方式,需要引入jquery.transit.js,详细教程请自行查资料。这里只是简单介绍:$div3.transition({ transform : "translateX(300px)" },3000,"linear");
三、三种方式的结束事件捕捉
在这里,除了第一种css + transform无法捕捉到结束事件以外(也可能我未发现),其他两种都能捕捉到,代码如下:1、addClass() + animation
//可捕捉结束事件
$div2.addClass("ani_class").on(animationEnd(),function(){
alert("addClass() + transform animation end");
});
此处的animationEnd()根据不同浏览器返回animationend事件的字符串,代码如下:
function animationEnd(){ var explorer = navigator.userAgent; if( ~explorer.indexOf("WebKit") ){ return 'webkitAnimationEnd'; } return 'animationend'; }
2、JQuery transit
//可捕捉结束事件 $div3.transition({ transform : "translateX(300px)" },3000,"linear", function(){ alert("transition end"); });
四、利用结束事件进行动画链式嵌套编程
有些时候我们需要让动画按顺序播放,同时又能在各个关键点有效控制它,那么就要进行动画的链式编程。由于我们可以捕捉到动画的结束事件,那么直接在结束事件加入下一步动画即可。代码如下:1、addClass() + animation
$div1.addClass("ani_class").on("webkitAnimationEnd",function(){ $div2.addClass("ani_class").on("webkitAnimationEnd",function(){ $div3.addClass("ani_class").on("webkitAnimationEnd",function(){ alert("addClass animation end!"); }); }); });
2、JQuery transit
$div1.transition({ transform : "translateX(300px)" },3000,"linear", function(){ $div2.transition({ transform : "translateX(300px)" },3000,"linear", function(){ $div3.transition({ transform : "translateX(300px)" },3000,"linear", function(){ alert("transition end"); }); }); });
五、非嵌套式链式动画
相信你也看出来了,嵌套式链式动画对开发人员来说很不友好,稍微一个小小的动画就有可能嵌套上百行,对于维护和修改极为不利。所以此处我们引入JQuery的Deferred对象。Deferred对象最早是为AJAX异步加载所建立的,用于AJAX请求的回调,让开发人员从多个AJAX请求的回调嵌套方法中解脱出来。
而在这里,我们也可以将其引入到动画中,以增强动画的链式编程效果,简化开发。
(有关Deferred对象的详细资料请自行学习,由于脱离本文主题,不在此做详细介绍)
此处我们先定义两个方法,这两个方法的原理分别用到了前面所说的addClass()和JQuery transit,但是它们都有一个共同点,在事件结束时都修改了defer属性,并将其返回。
//addClass + animation function addClassAni(element){ var defer = $.Deferred(); element.addClass("ani_class").on(animationEnd(),function(){ defer.resolve(); }); return defer; } //JQuery transit function addTransitAni(element){ var defer = $.Deferred(); element.transition({ transform : "translateX(300px)" },3000,"linear", function(){ defer.resolve(); }); return defer; }然后就可以愉快的利用Deferred进行链式编程啦!
addClassAni($div1).then(function(){ return addClassAni($div2); }).then(function(){ return addTransitAni($div3); }).then(function(){ return addTransitAni($div4); }).then(function(){ alert("animation end!"); });此处每一步都会返回一个Deferred对象,下一步操作做什么要视该Deferred对象的状态。
同时,如果某些动画并非要等上一个动画执行完才执行,那么只需让上一步动画不返回Deferred对象即可。如下:
addClassAni($div1).then(function(){ return addClassAni($div2); }).then(function(){ addTransitAni($div3); }).then(function(){ return addTransitAni($div4); }).then(function(){ alert("animation end!"); });此处的$div3会与$div4会等$div2动画完成后共同移动。
相关文章推荐
- 你应该知道的CSS文字大小单位PX、EM、PT
- 如何使CSS--better(系列二)
- 如何使CSS--better(系列一)
- FontAwesome图标制作(css)
- 设置浏览器默认样式
- [CSS] Transforms
- CSS选择器与样式优先级
- JS获取CSS属性值
- CSS控制文本自动换行
- css3实现的多级渐变下拉菜单导航效果代码
- 表单元素的css样式,自适应屏幕
- CSS3实现可关闭的下拉手风琴菜单效果
- CSS选择器
- 利用css3中的after和content制作简单的tooltip
- [ElasticsSearch] 排序(一)
- POI实战-java开发excel详解(第五章 样式)
- CSS定位
- modal呈现样式
- css3动画,设置动画基点
- css父级div设置了透明度,子级也出现透明度的解决方法