javascript动画效果
之前工作项目中，运用了缓动动画的效果，在网上看到其他大牛写的相关公式，结合工作需要，进行了整理，拿出来跟大家分享下，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="//images0.cnblogs.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); } ); } ); }
