原生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>小指才疏学浅，有任何疏漏之处，欢迎不吝赐教~