之前工作项目中，运用了缓动动画的效果，在网上看到其他大牛写的相关公式，结合工作需要，进行了整理，拿出来跟大家分享下，js代码中，只运用了一个小功能进行了测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>
<div class="main">
<div class="scroll">
<div class="info">
<ul id="scro">
<li>
<a href="">
<span>1</span>
<span></span>
<span></span>
<span></span>
</a>
</li>
</ul>
</div>
</div>
<input type="text" id="orderIndex"><button onclick="start()">测试</button>
</div>
</body>
</html>
*{margin: auto;padding: 0;}
.main{width: 300px;height: 400px;overflow: hidden;float: left;}
.info ul{position: relative;}
.info ul li{height: 72px;background-color: #444444;list-style: none;border: 1px solid #303030;}
.info ul li a{height: 72px;line-height: 72px;padding-left: 15px;position: relative;display: block;text-decoration: none;}
.info ul li a span{color: #fff;font-size:18px;font-weight:normal;float: left;height: 72px;line-height: 72px;margin-right: 10px;}
.info ul li a .num{width: 25px;}
.info ul li a .photo{width: 70px;}
.info ul li a .photo img{margin-top: 11px;width: 50px;height: 50px;}
.info ul li a .name{width: 50px;}
.info ul li a .num2{float: right;margin-right: 20px;}
.info ul li a div{position: absolute;background-color: #06a7e1;float: left;left: 0px;height: 72px;width: 2px;}
.panel{float: left;background-color: red;width: 15px;height: 370px;}
.panel_scroll{width: 100%;height: 30px;background-color: #000;position: relative;}
var i=0;
var str = "";
for(;i<5;i++){
str += ‘<li id="testLi‘+(i+1)+‘"><a href=""><span class="num">‘+(i+1)+‘</span><span class="photo"><img src="http://images.cnitblog.com/blog/663787/201410/291050344726094.jpg"></span><span class="name">文字</span><span class="num2">1000</span></a></li>‘;
}
document.getElementById("scro").innerHTML = str;
/*
* 动画效果
*/
function Cartoon(time, count, alg, callback) {
this.time = time || 1000;
this.count = count || 100;
var alg = typeof (alg) == "string" ? alg : "";
if (/^(uniform|acc|dec|accdec|arc-acc|arc-dec|arc-accdec)$/i.test(alg)) this.alg = alg.toLowerCase();
else this.alg = "arc-dec";
this.callback = callback;
this.timer = null;
};
/*
* @param {number} time 执行时间，并不是完全等于设置的时间，不用浏览器效果可能不同，需要配合count调节，缺省1000
* @param {number} count 变化的次数，缺省100
* @param {string} alg 运动类型，缺省arc-dec
* @param {string} uniform 匀速
* @param {string} acc 匀加速
* @param {string} dec 圆弧加速
* @param {string} accdec 匀加速
* @param {string} arc-acc 圆弧减速
* @param {string} arc-dec 先匀加速后匀减速
* @param {string} arc-accdec 圆弧先加速后减速
*/
Cartoon.prototype = {
run: function (callback, onStop) {//控制执行时机
var self = this;
var count = 1;
this.timer = setInterval(function () {
if (count > self.count) {
self.stop();
if (typeof (onStop) == "function") onStop();
} else {
switch (self.alg) {
case "uniform":
callback(count / self.count);
break;
case "acc":
var s = 0.002 * 0.5 * (count / self.count * 1000) * (count / self.count * 1000);
callback(s / 1000);
break;
case "dec":
var s = 2 * (count / self.count * 1000) - 0.002 * 0.5 * (count / self.count * 1000) * (count / self.count * 1000);
callback(s / 1000);
break;
case "accdec":
var t = (count / self.count * 1000);
if (t < 500) {
var s = 0.5 * 0.004 * t * t;
} else {
t -= 500;
var s = 500 + 2 * t - 0.004 * 0.5 * t * t;
};
callback(s / 1000);
break;
case "arc-acc":
var x = count / self.count * 1000;
var y = 1000 - Math.pow(1000000 - x * x, 0.5);
callback(y / 1000);
break;
case "arc-dec":
var x = 1000 - count / self.count * 1000;
var y = Math.pow(1000000 - x * x, 0.5);
callback(y / 1000);
break;
case "arc-accdec":
var x = (count / self.count * 1000);
if (x < 500) {
var y = 500 - (Math.pow(250000 - x * x, 0.5));
} else {
x = 1000 - x;
var y = 500 + Math.pow(250000 - x * x, 0.5);
};
callback(y / 1000);
break;
default:
break;
};
count += 1;
}
}, parseInt(this.time / this.count) == 0 ? 1 : parseInt(this.time / this.count));
return this;
},
stop: function () {//停止动画
clearInterval(this.timer);
if (typeof (this.callback) == "function") this.callback();
return this;
},
init:function(fn){//位置初始化
var self = this;
this.stop();
console.log("123123");
fn();
}
};
/*
* 在相应位置执行遮罩层的自左至右的运动
*/
function start(){ var order = document.getElementById("orderIndex").value;
var C = new Cartoon(500,100,"arc-dec");//初始化盲选动画效果，定义执行时间
C.eleList = document.getElementById("scro");
C.eleList.style.position = "relative";
C.el = document.getElementById("testLi"+order);
C.elA = C.el.getElementsByTagName("a")[0];
C.newDom = document.createElement("div");
C.dom = C.elA.appendChild(C.newDom);
C.run(function(x){C.dom.style.width = (( 330 - 120 )*x+120)+"px";},
function(){
C.run(function(x){
C.dom.style.width = (330-330*x+120)+"px";
C.dom.style.left = (( 330 - 120 )*x)+"px";
},
function(){
setTimeout(function(){
C.init(function(){C.dom.style.left = 210 + "px";C.dom.style.width = 120 + "px";});
C.run(function(x){C.dom.style.left = (120*x+210)+"px";},
function(){
C.elA.removeChild(C.dom);
}
);
},300);
}
);
}
);
}
时间： 2024-08-26 18:43:35