原生Javascript动画运动框架分享
下载链接: https://pan.baidu.com/s/1eSgHA50 密码: 2djq
框架简介
首先推荐使用css动画,更顺滑,性能更好。
本框架用于实验和获取特殊运动形式,并能更好兼容各种老旧的浏览器。
本框架完全采用原生javascript,具有完美的兼容性,可生成多种运动动画效果:
* 缓冲运动:速度和距离成反比,距离越远,速度越慢;
* 加速运动:速度从0开始,不断加1,越来越快;
* 减速运动:速度从某个值开始,不断减1,越来越慢;
* 弹性运动:速度随距离不断摆荡,可为正负,最后停在目标位置;
* 拖拽碰撞重力摩擦运动:通过拖拽将目标拖拽到指定位置,放开后根据拖拽的快慢获取初始速度,在目标位置上下左右某个距离边界的位置碰撞摩擦,最后停在下边界的某个位置;
* 震荡运动:值在某一个范围内抖动,震荡距离不断减小,最后恢复初始值。
框架内容-函数:jsAnimate(type, obj, data, originSpeed, fn)
函数说明:
本函数包含运动框架:
* 缓冲运动:速度和距离成反比,距离越远,速度越慢
* 加速运动:速度从0开始,不断加1,越来越快
* 减速运动:速度从某个值开始,不断减1,越来越慢
* 弹性运动:速度随距离不断摆荡,可为正负,最后停在目标位置
参数解析:
* type:字符串参数,表示运动的类型:'ease'-缓冲运动,'add'-加速运动,'minus'-减速运动,'elastic'-弹性运动
* obj:对象参数,表示运动的对象
* data:Json数据,表示运动的属性和目标值对,没有无单位,透明度转换为整数即x100
* originSpeed:整数参数,表示运动初始速度
* fn:函数直接量参数,表示运动结束后的回调函数
框架内容-函数:jsAnimateDragImpact(obj, boundary, fn)
函数说明:
本函数包含运动框架:
* 拖拽碰撞重力摩擦运动:通过拖拽将目标拖拽到指定位置,放开后根据拖拽的快慢获取初始速度,在目标位置上下左右某个距离边界的位置碰撞摩擦,最后停在下边界的某个位置。
参数解析:
* obj:对象参数,表示运动的对象
* boundary:Json数据,表示运动边界,Json数据,为距离,如top:100,表示可往上100px的距离:
top:上边界,right:右边界,bottom:下边界, left:左边界
{}空对象表示以窗口为边界,超过也会自动以窗口为边界
* fn:函数直接量参数,表示运动结束后的回调函数
框架内容-函数:jsAnimateDragImpact(obj, boundary, fn)
函数说明:
本函数包含运动框架:
* 拖拽碰撞重力摩擦运动:通过拖拽将目标拖拽到指定位置,放开后根据拖拽的快慢获取初始速度,在目标位置上下左右某个距离边界的位置碰撞摩擦,最后停在下边界的某个位置。
参数解析:
* obj:对象参数,表示运动的对象
* boundary:表示运动边界,Json数据,为距离,如top:100,表示可往上100px的距离:
top:上边界,right:右边界,bottom:下边界, left:左边界
{}空对象表示以窗口为边界,超过也会自动以窗口为边界
* fn:函数直接量参数,表示运动结束后的回调函数
框架内容-函数:jsShake(obj, data, fn)
函数说明:
本函数包含运动框架:
* 抖动震荡运动:某个属性值在某个范围内不断抖动,抖动范围不断减小,最后恢复初始值。
参数解析:
* obj:对象参数,表示抖动的对象
* data:Json数据,抖动的属性和相应范围,格式:
{attr:{target:数值,stepValue:数值},attr:{target:数值,stepValue:数值}...}
attr:属性名称,字符串;target:最大震荡范围,数值;stepValue:每震荡一次减小的数值,数值
* fn:函数直接量参数,表示运动结束后的回调函数
使用例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>迷津渡口分享-javascript动画运动框架用例</title> <style type="text/css"> div {width:100px;height:100px;background:red;position: absolute;left:20px;} #div1 {top:100px;} #div2 {top:300px;} #div3 {top:500px;} #div4 {top:700px;} </style> <script type="text/javascript" src="http://www.qingzz.cn/content/demo/jsAnimation.js"></script> <script type="text/javascript"> window.onload = function() { var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var oBtn3 = document.getElementById('btn3'); var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oDiv3 = document.getElementById('div3'); var oDiv4 = document.getElementById('div4'); // 载入完成后div1先左右摆荡然后上下摆荡 jsShake(oDiv1,{'left':{target:20,stepValue:2}},function(){ jsShake(this,{'top':{target:20,stepValue:2}}); }); // btn1控制属性增长 oBtn1.onclick = function() { singleAdd(); multiAdd(); }; // btn2控制属性减小 oBtn2.onclick = function() { singleMinus(); multiMinus(); }; // 循环增大减小 oBtn3.onclick=function() { singleLoop(); multiLoop(); }; // 开启div1的拖拽碰撞事件,有边界 jsAnimateDragImpact(oDiv1,{top:100,right:100,bottom:100,left:100},function() { console.log('自定义边界拖拽碰撞运动完成!'); }); // 开启div4的拖拽碰撞事件,无边界 jsAnimateDragImpact(oDiv4, {}, function() { console.log('拖拽碰撞运动完成!'); }); // div2单属性宽度不同运动增长 function singleAdd(fn){ jsAnimate('ease',oDiv2,{width:300},0,function(){ console.log('单属性增长缓冲运动完成!'); jsAnimate('add',this,{width:500},0,function(){ console.log('单属性增长加速运动完成!'); jsAnimate('minus',this,{width:700},20,function(){ console.log('单属性增长减速运动完成!'); jsAnimate('elastic',this,{width:900},0,function(){ console.log('单属性增长弹性运动完成!'); if (fn) fn.call(this); }); }); }); }); } // div2单属性宽度不同运动减小 function singleMinus(fn){ jsAnimate('elastic',oDiv2,{width:700},0,function(){ console.log('单属性减小弹性运动完成!'); jsAnimate('minus',this,{width:500},20,function(){ console.log('单属性减小减速运动完成'); jsAnimate('add',this,{width:300},0,function(){ console.log('单属性减小加速运动完成'); jsAnimate('elastic',this,{width:100},0,function(){ console.log('单属性减小缓冲运动完成'); if (fn) fn.call(this); }); }); }); }); } // div2单属性宽度循环运动 function singleLoop() { singleAdd(function() {singleMinus(singleLoop);}); } // div3多属性宽度和左边距不同运动增长 function multiAdd(fn){ jsAnimate('ease',oDiv3,{width:300,left:200},0,function(){ console.log('多属性增长缓冲运动完成!'); jsAnimate('add',this,{width:500,left:300},0,function(){ console.log('多属性增长加速运动完成!'); jsAnimate('minus',this,{width:700,left:400},20,function(){ console.log('多属性增长减速运动完成!'); jsAnimate('elastic',this,{width:900,left:500},0,function(){ console.log('多属性增长弹性运动完成!'); if (fn) fn.call(this); }); }); }); }); } // div3多属性宽度和左边距不同运动减小 function multiMinus(fn){ jsAnimate('elastic',oDiv3,{width:700,left:400},0,function(){ console.log('多属性减小弹性运动完成!'); jsAnimate('minus',this,{width:500,left:300},20,function(){ console.log('多属性减小减速运动完成'); jsAnimate('add',this,{width:300,left:100},0,function(){ console.log('多属性减小加速运动完成'); jsAnimate('elastic',this,{width:100,left:20},0,function(){ console.log('多属性减小缓冲运动完成'); if (fn) fn.call(this); }); }); }); }); } // div3多属性宽度和左边距循环运动 function multiLoop() { multiAdd(function() {multiMinus(multiLoop);}); } }; </script> </head> <body> <button id="btn1">开始增长</button> <button id="btn2">开始减小</button> <button id="btn3">循环运动</button> <div id="div1">载入时震荡,可拖拽,边界都为100</div> <div id="div2">单属性宽变化</div> <div id="div3">多属性宽和左边距变化</div> <div id="div4">可拖拽,边界为窗口,为兼容,同时仅可拖拽一个</div> </body> </html>
小指才疏学浅,有任何疏漏之处,欢迎不吝赐教~