A brief analysis of JS simple animation encapsulation_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

A brief analysis of JS simple animation encapsulation_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:59 PM

网上也有很多封装好的JS动画库，但大多因为功能过于完善，而至于代码量大动辄过千行，不宜在小项目中使用。这里自己封装了一个很轻量的动画库，主要功能都已实现。难免有疏漏之处，还请大家多多指教。

　　这里先说明一下功能和用法，以及注意点，随后是一个很简单的可运行示例。

用法及注意事项：
anim(elemId, cssObj, time, animType, funObj)
参数说明：
elemId （必选）需要施加动画效果的元素id
cssObj （必选）动画结束时的样式，对象类型，键值对形式，
其中键是能直接用在JS中的“驼峰”形式的css属性，而不是原来的css属性。
例如：{ marginLeft: '200px', top: '200px', borderWidth: '8px'}
time （必选）动画持续时间（单位ms）
animType （可选）默认为线性变化，代码里的Tween类型包含可选的其他参数
funObj （可选）如果要此选项，需要加入开始和结束时候执行的函数。
形如：{ el为elemId所指向的元素
start: function (el) { el.innerHTML = 'start!'; },
complete: function (el) { el.innerHTML = 'Completed!'; }
}

几点注意事项：
1、没有做低版本浏览器兼容，支持IE8+、FF、chrome、safari、opera
2、注意用能直接用在JS中的“驼峰”形式的css属性（本来应把css转“驼峰”形式，
但是基本所有JS程序员都能直接写出驼峰形式，所以没转）
3、如果需要把动画应用到绝对定位（position:absolute;）元素上，
需要注意在这些元素上设置CSS的方法。
例如：设置top和marginTop，对于绝对定位元素，应该设置top而不是marginTop，
更不应该将二者混合使用，因为二者的参考点是不一样的，同时设置很容易造成混乱。
所以，这里也不支持同时设置二者。
其他相似的同理（left和marginLeft、right和marginRight）
同时设置top和bottom、left和right也不支持。
4、引用了Tween缓动算法，支持线性、渐入渐出等多种变化方式。
5、“动画队列”功能尚未实现，此版本为初级版本，疏漏之处还请多多指正。

<title></title> 
<style type="text/css"> 
#container{ border:1px solid #000; width:500px; height:400px;} 
#aa{ border:1px solid #000; width:100px; height:40px; background-color:#0f0; 
position:absolute; left:50px; top:50px; } 
#bb{ border:1px solid #000; width:500px; height:40px; margin-top:100px;} 
#cc{ border:1px solid #000; width:500px; height:40px;} 
</style> 
 
<div id="container"> 
<input id="Abegin" type="button" value="开始"> 
<input id="Apause" type="button" value="暂停"> 
<input onclick="location.reload()" type="button" value="刷新网页"> 
<div id="aa">
</div> 
<div id="bb">dfdfddfsd</div> 
<div id="cc">gregreger</div> 
</div> 
<script type="text/javascript"> 
(function () { 
var Tween = { 
Linear: function (t, b, c, d) { return c * t / d + b; }, 
Quad: { 
easeIn: function (t, b, c, d) { 
return c * (t /= d) * t + b; 
}, 
easeOut: function (t, b, c, d) { 
return -c * (t /= d) * (t - 2) + b; 
}, 
easeInOut: function (t, b, c, d) { 
if ((t /= d / 2) < 1) return c / 2 * t * t + b; 
return -c / 2 * ((--t) * (t - 2) - 1) + b; 
} 
}, 
Cubic: { 
easeIn: function (t, b, c, d) { 
return c * (t /= d) * t * t + b; 
}, 
easeOut: function (t, b, c, d) { 
return c * ((t = t / d - 1) * t * t + 1) + b; 
}, 
easeInOut: function (t, b, c, d) { 
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b; 
return c / 2 * ((t -= 2) * t * t + 2) + b; 
} 
}, 
Quart: { 
easeIn: function (t, b, c, d) { 
return c * (t /= d) * t * t * t + b; 
}, 
easeOut: function (t, b, c, d) { 
return -c * ((t = t / d - 1) * t * t * t - 1) + b; 
}, 
easeInOut: function (t, b, c, d) { 
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; 
return -c / 2 * ((t -= 2) * t * t * t - 2) + b; 
} 
}, 
Quint: { 
easeIn: function (t, b, c, d) { 
return c * (t /= d) * t * t * t * t + b; 
}, 
easeOut: function (t, b, c, d) { 
return c * ((t = t / d - 1) * t * t * t * t + 1) + b; 
}, 
easeInOut: function (t, b, c, d) { 
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b; 
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; 
} 
}, 
Sine: { 
easeIn: function (t, b, c, d) { 
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; 
}, 
easeOut: function (t, b, c, d) { 
return c * Math.sin(t / d * (Math.PI / 2)) + b; 
}, 
easeInOut: function (t, b, c, d) { 
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; 
} 
}, 
Expo: { 
easeIn: function (t, b, c, d) { 
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b; 
}, 
easeOut: function (t, b, c, d) { 
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; 
}, 
easeInOut: function (t, b, c, d) { 
if (t == 0) return b; 
if (t == d) return b + c; 
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b; 
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; 
} 
}, 
Circ: { 
easeIn: function (t, b, c, d) { 
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; 
}, 
easeOut: function (t, b, c, d) { 
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; 
}, 
easeInOut: function (t, b, c, d) { 
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; 
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; 
} 
}, 
Elastic: { 
easeIn: function (t, b, c, d, a, p) { 
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3; 
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } 
else var s = p / (2 * Math.PI) * Math.asin(c / a); 
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; 
}, 
easeOut: function (t, b, c, d, a, p) { 
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3; 
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } 
else var s = p / (2 * Math.PI) * Math.asin(c / a); 
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b); 
}, 
easeInOut: function (t, b, c, d, a, p) { 
if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5); 
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } 
else var s = p / (2 * Math.PI) * Math.asin(c / a); 
if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; 
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b; 
} 
}, 
Back: { 
easeIn: function (t, b, c, d, s) { 
if (s == undefined) s = 1.70158; 
return c * (t /= d) * t * ((s + 1) * t - s) + b; 
}, 
easeOut: function (t, b, c, d, s) { 
if (s == undefined) s = 1.70158; 
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; 
}, 
easeInOut: function (t, b, c, d, s) { 
if (s == undefined) s = 1.70158; 
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; 
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; 
} 
}, 
Bounce: { 
easeIn: function (t, b, c, d) { 
return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b; 
}, 
easeOut: function (t, b, c, d) { 
if ((t /= d) < (1 / 2.75)) { 
return c * (7.5625 * t * t) + b; 
} else if (t < (2 / 2.75)) { 
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b; 
} else if (t < (2.5 / 2.75)) { 
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b; 
} else { 
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b; 
} 
}, 
easeInOut: function (t, b, c, d) { 
if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b; 
else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b; 
} 
} 
} 
var color = { 
sub: function (str, start, len) { 
if (len) return str.substring(start, start + len); 
else return str.substring(start); 
}, 
hex: function (i) { // 返回16进制颜色表示 
if (i < 0) return "00"; 
else if (i > 255) return "ff"; 
else { var str = "0" + i.toString(16); return str.substring(str.length - 2); } 
}, 
//获取颜色数据 
GetColors: function (sColor) { 
sColor = sColor.replace("#", ""); 
var r, g, b; 
if (sColor.length > 3) { 
r = color.sub(sColor, 0, 2); g = color.sub(sColor, 2, 2); b = color.sub(sColor, 4, 2); 
} else { 
r = color.sub(sColor, 0, 1); g = color.sub(sColor, 1, 1); b = color.sub(sColor, 2, 1); 
r += r; g += g; b += b; 
} 
return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)]; 
} 
} 
var fn = { 
getElement: function (id) { 
return typeof id == "string" ? document.getElementById(id) : id; 
}, 
objType: function (obj) { 
switch (Object.prototype.toString.call(obj)) { 
case "[object Object]": 
return "Object"; 
case "[object Number]": 
return "Number"; 
case "[object Array]": 
return "Array"; 
} 
}, 
getStyle: function (elem, name) { // 
var w3style; 
if (document.defaultView) { 
var style = document.defaultView.getComputedStyle(elem, null); 
name == "borderWidth" ? name = "borderLeftWidth" : name; // 解决标准浏览器解析问题 
w3style = name in style ? style[name] : style.getPropertyValue(name); 
w3style == "auto" ? w3style = "0px" : w3style; 
} 
return elem.style[name] || 
(elem.currentStyle && (elem.currentStyle[name] == "auto" ? "0px" : elem.currentStyle[name])) || w3style; 
}, 
getOriCss: function (elem, cssObj) { // 此处只能获取属性值为数值类型的style属性 
var cssOri = []; 
for (var prop in cssObj) { 
if (!cssObj.hasOwnProperty(prop)) continue; 
//if (prop != "opacity") cssOri.push(parseInt(fn.getStyle(elem, prop))); 
//else cssOri.push(100 * fn.getStyle(elem, prop)); 
if (fn.getStyle(elem, prop) == "transparent" || /^#|rgb$/.test(fn.getStyle(elem, prop))) { 
if (fn.getStyle(elem, prop) == "transparent") { 
cssOri.push([255, 255, 255]); 
} 
if (/^#/.test(fn.getStyle(elem, prop))) { 
cssOri.push(color.GetColors(fn.getStyle(elem, prop))); 
} 
if (/^rgb\(/.test(fn.getStyle(elem, prop))) { 
//cssOri.push([fn.getStyle(elem, prop).replace(/^rgb\($/g, "")]); 
var regexp = /^rgb$([0-9]{0,3}),\s([0-9]{0,3}),\s([0-9]{0,3})$/g; 
var re = fn.getStyle(elem, prop).replace(regexp, "$1 $2 $3").split(" "); 
//cssOri.push(re); // re为字符串数组 
cssOri.push([parseInt(re[0]), parseInt(re[1]), parseInt(re[2])]); 
} 
} else if (prop == "opacity") { 
cssOri.push(100 * fn.getStyle(elem, prop)); 
} else { 
cssOri.push(parseInt(fn.getStyle(elem, prop))); 
} 
} 
return cssOri; 
}, 
getEndCss: function (cssobj) { 
var cssEnd = []; 
for (var prop in cssobj) { 
if (!cssobj.hasOwnProperty(prop)) continue; 
//if (prop != "opacity") cssEnd.push(parseInt(cssobj[prop])); 
//else cssEnd.push(100 * cssobj[prop]); 
if (prop == "opacity") { 
cssEnd.push(100 * cssobj[prop]); 
} else if (/^#/.test(cssobj[prop])) { 
cssEnd.push(color.GetColors(cssobj[prop])); 
} else { 
cssEnd.push(parseInt(cssobj[prop])); 
} 
} 
return cssEnd; 
} 
} 
function _anim(/*elemId, cssObj, time, animType, funObj*/) { 
this.init.apply(this, arguments[0]); 
} 
_anim.prototype = { 
init: function () { 
this.elem = fn.getElement(arguments[0]); 
this.cssObj = arguments[1]; 
this.cssOri = fn.getOriCss(this.elem, arguments[1]); 
this.cssEnd = fn.getEndCss(arguments[1]); 
this.durtime = arguments[2]; 
this.animType = "Tween.Linear"; 
this.funObj = null; 
this.start = false; 
this.complete = false; 
this.onPause = false; 
this.onRestart = false; 
if (arguments.length < 3) { 
throw new Error("至少要传入3个参数"); 
} else if (arguments.length == 4) { 
if (fn.objType(arguments[3]) == "Object") { 
this.funObj = arguments[3]; 
for (var p in this.funObj) { 
if (p.toString() == "start") this.start = true; 
if (p.toString() == "complete") this.complete = true; 
} 
} 
if (typeof (arguments[3]) == "string") { 
this.animType = arguments[3]; 
} 
} else if (arguments.length == 5) { 
this.animType = arguments[3]; 
if (fn.objType(arguments[4]) == "Object") { 
this.funObj = arguments[4]; 
for (var p in this.funObj) { 
if (p.toString() == "start") this.start = true; 
if (p.toString() == "complete") this.complete = true; 
} 
} 
} 
this.startAnim(); 
}, 
startAnim: function () { 
if (this.start) this.funObj["start"].call(this, this.elem); 
var that = this; 
var t = 0; 
var props = []; 
for (var pro in this.cssObj) { 
if (!this.cssObj.hasOwnProperty(pro)) continue; 
props.push(pro); 
} 
var tt = new Date().getTime(); 
clearInterval(this.timer); 
this.timer = setInterval(function () { 
if (that.onPause) { 
clearInterval(that.timer); 
return; 
} 
if (t < that.durtime / 10) { 
t++; 
for (var i = 0; i < props.length; i++) { 
var b, c; 
fn.objType(that.cssOri[i]) != "Array" && (b = that.cssOri[i]); //开始值 
fn.objType(that.cssEnd[i]) != "Array" && (c = that.cssEnd[i] - that.cssOri[i]); // 变化量 
var d = that.durtime / 10; // 持续时间 
if (fn.objType(that.cssOri[i]) == "Array" && fn.objType(that.cssEnd[i]) == "Array") { 
var b1 = that.cssOri[i][0], b2 = that.cssOri[i][1], b3 = that.cssOri[i][2]; 
var c1 = that.cssEnd[i][0] - that.cssOri[i][0], 
c2 = that.cssEnd[i][1] - that.cssOri[i][1], 
c3 = that.cssEnd[i][2] - that.cssOri[i][2]; 
var r = color.hex(Math.ceil((eval(that.animType))(t, b1, c1, d))), 
g = color.hex(Math.ceil((eval(that.animType))(t, b2, c2, d))), 
b = color.hex(Math.ceil((eval(that.animType))(t, b3, c3, d))); 
that.elem.style[props[i]] = "#" + r + g + b; 
} else if (props[i].toString() == "opacity") { 
that.elem.style[props[i]] = Math.ceil((eval(that.animType))(t, b, c, d)) / 100; 
} else { 
that.elem.style[props[i]] = Math.ceil((eval(that.animType))(t, b, c, d)) + "px"; 
} 
} 
} else { 
for (var i = 0; i < props.length; i++) { 
if (fn.objType(that.cssOri[i]) == "Array" && fn.objType(that.cssEnd[i]) == "Array") { 
var c1 = that.cssEnd[i][0], 
c2 = that.cssEnd[i][1], 
c3 = that.cssEnd[i][2]; 
var r = color.hex(Math.ceil((eval(that.animType))(t, b1, c1, d))), 
g = color.hex(Math.ceil((eval(that.animType))(t, b2, c2, d))), 
b = color.hex(Math.ceil((eval(that.animType))(t, b3, c3, d))); 
that.elem.style[props[i]] = "#" + r + g + b; 
} else if (props[i].toString() == "opacity") { 
that.elem.style[props[i]] = that.cssEnd[i] / 100; 
} else { 
that.elem.style[props[i]] = that.cssEnd[i] + "px"; 
} 
} 
clearInterval(that.timer); 
if (that.complete) that.funObj["complete"].call(that, that.elem); 
//alert(new Date().getTime() - tt); 
} 
}, 10); // 一般要给10毫秒异步调用时间，不能是1 
}, 
pause: function () { 
this.onPause = true; 
} 
} 
window.anim = function () { 
return new _anim(arguments); 
} 
})(); 
</script> 
<script type="text/javascript"> 
var bbtn = document.getElementById("Abegin"), 
pbtn = document.getElementById("Apause"); 
var a; 
bbtn.onclick = function () { 
a = anim("aa", { 
left: '200px', 
top: '200px', 
width: '200px', 
height: '200px', 
backgroundColor: '#f00', 
borderWidth: '8px' 
}, 4000, 'Tween.Bounce.easeInOut', { 
start: function (el) { el.innerHTML = 'start!'; }, 
complete: function (el) { el.innerHTML = 'Completed!'; } 
} 
); 
} 
pbtn.onclick = function () { 
a.pause(); 
} 
anim("bb", { 
marginTop:'160px', 
opacity:0.1, 
width: '200px', 
height: '200px', 
borderWidth: '8px' 
}, 2000, 'Tween.Bounce.easeIn', { 
start: function (el) { el.innerHTML = 'start!'; }, 
complete: function (el) { el.innerHTML = 'Completed!'; } 
} 
); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat Commands and How to Use Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7543

CakePHP Tutorial

1381

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How do I create and publish my own JavaScript libraries? Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

How do I optimize JavaScript code for performance in the browser? Mar 18, 2025 pm 03:14 PM

The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.

What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

How do I debug JavaScript code effectively using browser developer tools? Mar 18, 2025 pm 03:16 PM

The article discusses effective JavaScript debugging using browser developer tools, focusing on setting breakpoints, using the console, and analyzing performance.

Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

How do I use source maps to debug minified JavaScript code? Mar 18, 2025 pm 03:17 PM

The article explains how to use source maps to debug minified JavaScript by mapping it back to the original code. It discusses enabling source maps, setting breakpoints, and using tools like Chrome DevTools and Webpack.

How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

See all articles