Home > Web Front-end > JS Tutorial > JavaScript simple easing plug-in (source code packaging)_javascript skills

JavaScript simple easing plug-in (source code packaging)_javascript skills

WBOY
Release: 2016-05-16 17:56:10
Original
1096 people have browsed it

The requirements are as follows:
Can start, pause (both linear and non-linear tween are supported), continue, end
Support multiple styles in parallel
It is best not to depend on a certain framework to run
The larger the file size Small is better
He searched for some existing plug-ins or libraries, but few of them were satisfactory or relatively balanced. Under this requirement, I wrote a relatively simple animation component, which basically met this requirement. First code
Online demo: http://demo.jb51.net/js/2012/animate/
Package download: animate_jquery.rar
html Part:

Copy code The code is as follows:


< ;html>


animate









animate part:
Copy code The code is as follows:

function animate(options){
this.from = options.from;//if Without from, calculate from
this.to = options.to || {};
this.onStart = options.onStart || empty;//The following are some callback functions, the event mechanism is not used
this.onStop = options.onStop || empty;
this.onAnimate = options.onAnimate || empty;
this.onContinue = options.onContinue || empty;
this.onPause = options .onPause || empty;
var element = options.element;
var duration = options.duration || 300;//The total duration of the change, the unit is ms
var pending = false;//Yes It has not been paused, but if it has not started yet, the value is also true
var timer = null;
var mixin = options.mix;
var defaultState = this.from || getState(element, this .to);//Original data
var thiz = this;
//Get the initial style
function getState(ele, targetStyles){
var obj = {};
var i = 0;
for (var p in targetStyles)
{
i ;
obj[p] = parseFloat(mixin.getStyle(ele, p));
}
if(i == 0){
return null;
}
return obj;
}
function empty(){}
function animate(from, to, elapse) {
var startTime = (new Date).getTime() (elapse ? - elapse : 0);//If there is a third parameter, which proves that it starts from a pause, then set startTime to the current time minus The elapsed time in the tentative time. If there are only two parameters, then the elapsed time is 0
timer = setInterval(function(){
var endTime = (new Date).getTime();
if( endTime - startTime < duration){
thiz.onAnimate();
currentElapse = endTime - startTime;
for(var p in from){
if(from.hasOwnProperty(p)){
var currentPropertyStyle = mixin.compute(currentElapse, from[p], to[p]-from[p], duration);
mixin.setStyle(element, p, currentPropertyStyle);
}
}
}
else{
thiz.stop(thiz.to);
}
}, 16);
}
this.start = function(){
if(pending){
this.resume();
}
else{
this.onStart();
animate(defaultState, this.to);
}
}
this.stop = function(){
clearInterval(timer);
var styles = this.to;
for(var p in styles){
if( styles.hasOwnProperty(p)){
mixin.setStyle(element, p, styles[p]);
}
}
this.onStop();
}
this .pause = function(){
clearInterval(timer);
pending = true;
this.onPause();
}
this.resume = function(){
pending = false;
this.onContinue();
animate(defaultState, this.to, currentElapse);
}
}

使用部分:
复制代码 代码如下:

var mixinT = {
getStyle:baidu.dom.getStyle,
setStyle:baidu.dom.setStyle,
compute:function(t, b, c, d){
//return t*c/d b;
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;
}
};
var mixinJQ = {
getStyle:function(ele, styleName){
return $(ele).css(styleName);
},
setStyle:function(ele, styleName, styleValue){
$(ele).css(styleName, styleValue);
},
compute:function(t, b, c, d){
return b t*c/d;
}
};
var an = new animate({
element:document.getElementById('anim'),
//from:{'width':100, 'height':100, left:0, top:30},
to:{left:500},
mix:mixinT,
duration:2000
});
if(/demo=1/.test(location.search)){
var demolink = baidu.g('demolink');
demolink.href= 'animate.html';
demolink.innerHTML = 'back';
an.start();
setTimeout(function(){
an.pause();
resume();
}, 1200);
function resume(){
setTimeout(function(){an.resume()}, 1000);
}
}

上面是一个完整demo的代码。做几点说明:
代码尺寸足够小了,一共才100行,gzip后连1k都不到。
满足了可以start、pause、resume、stop的需求,赠送了几个回调函数:D。
可以支持多个样式一起变化。
采用了一个mixin变量,传进来三个函数需要在执行动画时的操作,getStyle、setStyle、compute,我感觉这三个确实和用户的选择有关系,前两个可能和框架有关,第三个和用户采用的变化计算方式有关,之所以传进去四个参数,主要是和主流的tween类能适应起来,可以参考http://www.robertpenner.com/easing/和http://www.actionscript.org/resources/articles/170/1/Flash-MX-2004-Undocumented-TweenEasing-Classes-Documented/Page1.html。我给的例子用了tangram和jquery俩类库,分别对应了两个mixin对象,做一下简单的适配,就能用了。
一些“私有”变量和函数放闭包里了,这样初始化一个animate的时候,对象是干净的,但是缺点就是占用内存多了,每个实例都维护自己的方法。
使用的时候,可以不提供options.from,函数会根据额options.to来计算from中对应样式的值,这很大程度上依赖于mixin提供的方法够不够强大,所以这一块还是有bug 的,不过,80%的功能够用了。麻雀虽小,五脏俱全了。
Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template