>  기사  >  웹 프론트엔드  >  자바스크립트 단순 애니메이션 클래스(div 그래디언트)_전형적인 특수 효과

자바스크립트 단순 애니메이션 클래스(div 그래디언트)_전형적인 특수 효과

WBOY
WBOY원래의
2016-05-16 18:23:47996검색

程序源码

复代码 代码如下:

function Animate(el, prop, opts) {
this.el = 엘;
this.prop = prop;
this.from = opts.from;
this.to = opts.to;
this.time = opts.time;
this.callback = opts.callback;
this.animDiff = this.to - this.from;
}

Animate.prototype._setStyle = function(val) {
switch(this.prop) {
case 'opacity':
this.el.style[this. 소품] = 발;
this.el.style.filter = 'alpha(opacity=' val * 100 ')';
휴식;
기본값:
this.el.style[this.prop] = val 'px';
휴식;
}
}

Animate.prototype._animate = function() {
var that = this;
this.now = 새로운 날짜();
this.diff = this.now - this.startTime;

if (this.diff > this.time) {
this._setStyle(this.to);

if (this.callback) {
this.callback.call(this);
}
clearInterval(this.timer);
반환;
}

this.percentage = (Math.floor((this.diff / this.time) * 100) / 100);
this.val = (this.animDiff * this.percentage) this.from;
this._setStyle(this.val);
}

Animate.prototype.start = function() {
var that = this;
this.startTime = new Date();
clearInterval(this.timer);
this.timer = setInterval(function() {
that._animate.call(that);
}, 4);
}

Animate.canTransition = function() {
var el = document.createElement('foo');
el.style.cssText = '-webkit-transition: 모든 .5s 선형;';
return !!el.style.webkitTransitionProperty;
}();

이용방법
复제대码 代码如下:

/ / 透명도渐变
functionchangeOpacity() {
// 透명도渐变 从1 - 0 渐变时间1000ms
var fx = 'opacity', from = 1, to = 0, time = 1000;
// 渐变完毕执行的回调函数
var callback = function() {
from = 0; = 1;
new Animate(demo, fx, { from: from, to: to, time: time, callback: ResetButton}).start();
}
// 实例化渐变函数
new Animate(demo, fx, {
from: from,
to: to,
time: time,
callback: 콜백
}).start();
}

演示代码:
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.