css3动画操作函数,它提供了添加动画类、暂停、继续运行等操作,css3动画的交互能力在anlinmb中只有指定时间结束后触发函数这一种,它有很大的缺点且不可以组合使用,但它却有更好的性能
在学习之前你必须了解css3动画
本节将介绍css3动画交互函数,我们内置了一些css动画类如下:(因此你在创建新的类名时不可以与这些类名重复,也不可以与anlin-[这里的类名]重复:它是一些anlin.animate函数添加类的缩写!)
| 类 | 说明 |
|---|---|
| .anlin-spin | 旋转 |
| .anlin-spins | 逆时针旋转 |
| .anlin-spinx | 快速旋转 |
| .anlin-scale | 放大 |
| .anlin-scales | 缩小 |
| .anlin-scalex | 循环放大缩小 |
| .anlin-opacity | 完全透明到完全显示 |
| .anlin-opacitys | 完全显示到完全透明 |
| .anlin-opacityx | 循环显隐 |
| .anlin-bottom | 从下往上移动到原始位置,它是根据定位属性改变位置产生的动画,你的元素不可以设置position定位 |
| .anlin-bottoms | 从原始位置往下移动,它是根据定位属性改变位置产生的动画,你的元素不可以设置position定位 |
| .anlin-top | 从上往下到原始位置,它是根据定位属性改变位置产生的动画,你的元素不可以设置position定位 |
| .anlin-tops | 从原始位置往上移动,它是根据定位属性改变位置产生的动画,你的元素不可以设置position定位 |
| .anlin-left | 从左往右到原始位置,它是根据定位属性改变位置产生的动画,你的元素不可以设置position定位 |
| .anlin-lefts | 从原始位置往左移动,它是根据定位属性改变位置产生的动画,你的元素不可以设置position定位 |
| .anlin-right | 从右往左到原始位置,它是根据定位属性改变位置产生的动画,你的元素不可以设置position定位 |
| .anlin-rights | 从原始位置往右移动,它是根据定位属性改变位置产生的动画,你的元素不可以设置position定位 |
<style>
.iv{width:50px;height:50px;margin:20px;background:#ff0000;float:left;}
</style>
<div class="iv anlin-spin"></div>
<div class="iv anlin-spins"></div>
<div class="iv anlin-scale"></div>
<div class="iv anlin-scales"></div>
<div class="iv anlin-scalex"></div>
<div class="iv anlin-opacity"></div>
<div class="iv anlin-opacitys"></div>
<div class="iv anlin-opacityx"></div>
<div class="iv anlin-bottom"></div>
<div class="iv anlin-bottoms"></div>
<div class="iv anlin-top"></div>
<div class="iv anlin-tops"></div>
<div class="iv anlin-left"></div>
<div class="iv anlin-lefts"></div>
<div class="iv anlin-right"></div>
<div class="iv anlin-rights"></div>动态添加css动画类函数:anlin.animate(参数1,参数2)
| 参数 | 说明 |
|---|---|
| 参数1 | 元素选择器,它可以是jquery对象 |
| 参数2 | 对象: { mate:'anlin-scale',//css动画类名 t:true,//设置动画播放时间(毫秒),几毫秒后删除动画并运行以下函数(没有设置函数时只删除动画),为true时则判断动画播放结束后运行,css动画属性为infinite时不会触发:需要手动指定时间 f:function(){anlin.alert('动画播放完毕');},//t时间结束时运行的函数 } |
anlin.animate参数2的对象中mate参数简化了一些内置css动画类名,不用添加anlin-,使用简化的类名时你可以省略t的设置(用这些类名时设置t无效),包含的类名mate的参数有: scale,scales,opacity,opacitys,bottom,bottoms,top,tops,left,lefts
mate:非上面的参数时必须设置t的时间,否则无法运行f的回调函数
<div id="xxx" style="width:50px;height:50px;background:#ff0000;margin:20px;"></div>
<button id="bui" type="button">点我开始动画</button>
<script>
$('#bui').click(function(){
anlin.animate('#xxx',{mate:'scale',f:function(){anlin.alert('动画运行完成');}});
});
</script>以下同上一样,是上面的操作原形
<div id="xxx" style="width:50px;height:50px;background:#ff0000;margin:20px;"></div>
<button id="bui" type="button">点我开始动画</button>
<script>
$('#bui').click(function(){
anlin.animate('#xxx',{mate:'anlin-scale',t:true,f:function(){anlin.alert('动画运行完成');}});
});
</script>anlin.animate添加动画前元素中class标签不可以绑定相同的@keyframe类,否则新的动画可能无法运行
自定义css3动画,动画结束时运行函数
<style>
.xxxx{
-webkit-animation: wodeanima 0.2s linear;
animation: wodeanima 0.2s linear;
}
@-webkit-keyframes wodeanima{
0% {
-webkit-transform: scale(0) rotate(0deg);
transform: scale(0) rotate(0deg);
}
100% {
-webkit-transform: scale(1) rotate(1800deg);
transform: scale(1) rotate(1800deg);
}
}
@keyframes wodeanima{
0% {
-webkit-transform: scale(0) rotate(0deg);
transform: scale(0) rotate(0deg);
}
100% {
-webkit-transform: scale(1) rotate(1800deg);
transform: scale(1) rotate(1800deg);
}
}
</style>
<button id="bu" type="button">开始动画</button>
<script>
$('#bu').click(function(){
anlin.fs(`<div id="i1" style="max-width:300px;height:300px;background:#ff0000;margin:0 auto;" onclick="anlin.fs(false,{id:66})">关闭层</div>`,{id:66,bg:'transparent'});
var ee=$('#i1');
anlin.animate(ee,{mate:'xxxx',t:200,f:function(){anlin.alert('动画运行完成');}});
});
</script>
暂停动画,继续播放动画,与重载动画:
anlin.pausedanimate()用于暂停anlin.animate()添加的动画
anlin.runninganimate()用于从已暂停的时间开始继续播放动画直至t的时间结束
anlin.clearanimate()用于删除动画
点击下方例子尝试一下,继续播放和重载动画部分浏览器可能会出现动画失效的情况
<div id="v" style="width:50px;height:50px;background:red;margin:20px;"></div>
<button type="button" onclick="anlin.pausedanimate('#v');">暂停</button>
<button type="button" onclick="anlin.runninganimate('#v');">继续</button>
<button type="button" onclick="anlin.animate('#v',{mate:'anlin-spin',t:2000,f:function(){anlin.alert('动画运行结束');}});">开始/重载动画</button>
<button type="button" onclick="anlin.clearanimate('#v');">删除动画</button>
在下节教程中你将学会更高级的动画