高级动画(dom) - anlinmb个人前端代码库

高级动画,我们提供了dom动画操作函数,它比jquery的animate()更灵活,它可以设置开始与终点和帧率,它支持所有包含数值的css属性

它可能会增加用户设备的性能消耗甚至造成浏览器崩溃,非必要我们不推荐单页面过多或频繁的使用dom去操作动画

dom动画操作函数: anlin.dom(参数1,参数2对象,参数3对象);

函数对象参数表
参数	说明
参数1	元素选择器,它可以是jquery对象
参数2	设置CSS属性,格式为对象,它与jquery的css()方法一样,但它提供了更灵活的数值代码,详见数值代码使用方法
参数3	对象: { on:function(a){...}//动画运行时返回当前CSS元素的值,当指定的CSS元素不存在时则返回为空=false:代表该值动画已完成 f:function(){...}//动画结束时运行函数 time:1//动画运行的速度(单位:毫秒) }

数值代码:[参数1,参数2,参数3]

参数1:开始的值(起点)
参数2:结束的值(终点)
参数3:每次帧率递增的值,它可以设置为负数用于递减动画,为负数时起点值要大于终点值(正数相反)

以下一个简单的例子:

<p>元素的宽度从5px移动到200px</p>
<div id="rrr" style="width:1px;height:20px;border:1px red solid;"></div>
<button id='imm'>运行动画</button>
<script>
$('#imm').click(function(){
anlin.dom('#rrr',{'width':'[5,200,1]px'},
{
f:function(){anlin.alert('动画运行结束');},
}
         );
});
</script>

元素宽度从50px到200px,同时高度从200px到20px:

<p>元素宽度从50px到200px,同时高度从200px到20px</p>
<div id="rrr" style="width:1px;height:20px;background:red;"></div>
<button id='imm'>运行动画</button>
<script>
$('#imm').click(function(){
anlin.dom('#rrr',{'width':'[50,200,1]px','height':'[200,20,-1]'},
{
f:function(){anlin.alert('动画运行结束');},
}
         );
});
</script>

数值代码多点运用,每个数值代码都是独立的动态值,它可以在css属性值的多处任意位置


<div id="rrr" style="width:100px;height:100px;background:red;"></div>
<button id='imm'>运行动画</button>
<script>
$('#imm').click(function(){
anlin.dom('#rrr',{'background':'rgba([0,230,1],[0,230,1],[0,230,1],.[100,50,-1])'},
{
f:function(){anlin.alert('动画运行结束');},
}
         );
});
</script>

监听运行中的值(当某个属性值提前结束时它的对象会被删除即返回为空undefined):


<div id="inp" style="line-height:30px;border:1px red solid;">此处显示每次监听返回的css对象</div>
<br>
<div id="rrr" style="width:100px;height:100px;background:red;"></div>
<button id='imm'>运行动画</button>
<script>
var rrr=$('#inp');
$('#imm').click(function(){

anlin.dom('#rrr',{'width':'[100,300,1]px','height':'[300,100,-1]','background':'rgba([255,200,-1],[255,225,-1],[255,215,-1],.99)'},
{
f:function(){anlin.alert('动画完成');},
on:function(a){rrr.text(JSON.stringify(a));},
time:100,
}
         );

});
</script>

暂停、继续与删除动画

anlin.domstop();函数用于暂停动画

anlin.domstart();函数用于继续动画

anlin.domstop();anlin.domstart();的元素选择器可以是jquery对象(建议使用变量缓存jquery对象使用可以提升性能)


<div id="rrr" style="width:100px;height:100px;background:red;"></div>
<button onclick="anlin.dom('#rrr',{'background':'rgba([0,230,1],[0,230,1],[0,230,1],.99)'},
{
f:function(){anlin.alert('动画运行结束');},
}
         );">开始动画</button> <button onclick="anlin.domstop('#rrr');">暂停动画</button> <button onclick="anlin.domstart('#rrr');">继续动画</button>

anlin.dom()函数它不能在相同元素中重复使用,如重复则默认运行最后一次的函数,正确的使用方法是在参数2中CSS对象中一次性设置(而不是使用多个anlin.dom去操作同一个元素)

关于循环动画,以下例子为你演示了循环动画函数的封装方法:

不断循环的动画

<p>不断循环的动画</p>
<div id="rrr" style="width:5px;height:20px;border:1px red solid;"></div> <button onclick="anlin.domstop('#rrr');">暂停动画</button> <button onclick="anlin.domstart('#rrr');">继续动画</button>
<script>
function abc1(){
anlin.dom('#rrr',{'width':'[5,200,1]px'},
{
f:function(){abc1();},
}
         );
}
abc1();
</script>

来回循环的动画

<p>来回循环的动画</p>
<div id="rrr" style="width:5px;height:20px;border:1px red solid;"></div>
<button onclick="anlin.domstop('#rrr');">暂停动画</button> <button onclick="anlin.domstart('#rrr');">继续动画</button>
<script>
function abc1(){
anlin.dom('#rrr',{'width':'[5,200,1]px'},
{
f:function(){abc2();},
}
         );
}
function abc2(){
anlin.dom('#rrr',{'width':'[200,5,-1]px'},
{
f:function(){abc1();},
}
         );
}
abc1();
</script>