JavaScript 단순 여유 플러그인(소스 코드 패키징)_javascript 기술

요구 사항은 다음과 같습니다.
시작, 일시 정지(선형 및 비선형 트윈 모두 지원), 계속, 종료 가능
여러 스타일을 병렬로 지원
특정 프레임워크에 의존하지 않는 것이 가장 좋습니다. 실행
파일 크기가 클수록 작을수록 좋습니다
기존 플러그인이나 라이브러리를 검색했지만 그 중 만족스럽거나 상대적으로 균형 잡힌 것이 거의 없었습니다. 이 요구 사항에 따라 기본적으로 비교적 간단한 애니메이션 구성 요소를 작성했습니다. 이 요구 사항을 충족했습니다. 첫 번째 코드
온라인 데모: http://demo.jb51.net/js/2012/animate/
패키지 다운로드: animate_jquery.rar
html 부분 :

코드 복사 코드는 다음과 같습니다.

>

코드 복사

코드는 다음과 같습니다. function animate(options){ this.from = options. from;//from이 없으면 this.to = options.to ||

this.onStart = options.onStart || 다음은 일부 콜백 함수입니다. 메커니즘이 사용되지 않습니다

this.onStop = options.onStop || 비어 있음
this.onContinue = options.onContinue || .onPause = options .onPause || 비어 있음;
var element = options.element;
var Duration = options.duration || 300;//총 변경 기간은 ms입니다.
var 보류 중 = false;//예 일시 중지되지 않았지만 아직 시작되지 않은 경우 값도 true입니다.
var time = null
var mixin = options.mix
var defaultState = this.from || getState(element, this .to);//원본 데이터
varthiz = this
//초기 스타일 가져오기
function getState(ele, targetStyles){
var obj = {};
var i = 0;
for(targetStyles의 var p)
{
i
obj[p] =parseFloat(mixin.getStyle(ele, p) );
}
if(i == 0){
return null;
}
return obj; animate(from, to, elapse) {
var startTime = (new Date).getTime() (elapse ? - elapse : 0);//일시정지에서 시작함을 증명하는 세 번째 매개변수가 있는 경우, 그런 다음 startTime을 현재 시간에서 임시 시간의 경과 시간을 뺀 값으로 설정합니다. 매개변수가 2개뿐이면 경과 시간은 0입니다.
timer = setInterval(function(){
var endTime = (new Date) .getTime();
if( endTime - startTime < 기간){
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], 기간)
mixin.setStyle(element, p , currentPropertyStyle);
}
}
else{
thiz.stop(thiz.to)
}
}, 16); 🎜>this.start = function(){
if(보류 중){
this.resume()
}
else{
this.onStart()
animate( defaultState, this.to);
}
}
this.stop = function(){
clearInterval(timer)
var styles =
for(var 스타일의 p){
if( styles.hasOwnProperty(p)){
mixin.setStyle(element, p, styles[p])
}
}
this.onStop( );
}
this .pause = function(){
clearInterval(timer);
pending = true; 이력서 = 함수(){
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) 반환 b;
if (t==d) return b c;
if ((t/=d/2) 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},
끝:{왼쪽:500},
mix:mixinT,
기간:2000
});
if(/demo=1/.test(location.search)){
var decolink = baidu.g('demolink');
demolink.href= 'animate.html';
demolink.innerHTML = '뒤로';
an.start();
setTimeout(function(){
an.pause();
resume();
}, 1200);
함수 재개(){
setTimeout(function(){an.resume()}, 1000);
}
}

상면是一个完整demo的代码。做几点说明：
代码尺寸足够小了，一共才100行，gzip后连1kduc不到.
满足了可以시작, 일시중지, 재개, 중지하기一个mixin变weight，传进来三个函数需要에서 执行动画时的操作，getStyle、setStyle、compute，我感觉这三个确实와 个择有关系，前两个可能와框架有关，第三个和用户采用变化计算方式有关， 之所以传进去 4个参数 主要是 와 主流的tween类能适应起来，可以参考http://www.robertpenner.com/easing/和http://www.actionscript.org/resources/articles/170/1 /Flash-MX-2004-Undocumented-TweenEasing-Classes-Documented/Page1.html了.
일체는 "확실히" 많은 양을 가지고 있으며, 더 많은 것을 사용하고 있습니다.每个实例都维护自己적 방법입니다.
使候,可以不提供options.from,函数会根据额options.to,来计算from中对应样式 的值,这很大程島上依赖于mixin提供적 방법은 없습니다.够强大，所以这一块还是有bug 的， 80%의 효과가 없습니다.