js(2.5K)_jquery를 사용하여 구현된 jquery를 시뮬레이션하는 사용자 정의 애니메이션을 애니메이션화합니다.

나중에 알고 보니 꽤 괜찮더군요. 계속 쓰는 것이 나을 수도 있다.
이 버전은 기본적으로 jquery의 animate와 동일합니다.
기본적으로 효과는 동일하다는 뜻입니다. (아직 효율성은 테스트되지 않았습니다.)
전문 테스터가 있다면 테스트를 도와주세요.
1: 기능 설명
주류 브라우저와 호환됩니다.
1: 콜백 기능 지원;
2: 계단식 애니메이션 호출 지원
4: 애니메이션 중지 지원
🎜>6: 지원 = -= *= /= 연산;
7: 지원 단위 연산(px, %)
2: 사용 지침
jelle(A).animate(B, C , D);
A: 애니메이션이 필요한 dom 요소의 ID입니다.
B: 애니메이션의 주요 매개변수는 {width:'100px와 같이 전달됩니다. ',height:' =100px ',opacity:0.5},
불투명도--투명도 변경은 = -= *= /= 작업을 지원합니다.
C: 애니메이션 실행 시간(밀리초); [선택 사항 기본값 500밀리초];
D: 콜백 함수; [선택 사항]
3: 메서드 설명
1: animate() 메서드
jelle ('cc').animate({width:'100px'},300,function(){alert('Complete')});//300밀리초 애니메이션에서 cc의 너비가 100px로 변경됩니다. 마지막에 'Complete'가 팝업됩니다. '
2:stop() 메소드
jelle('cc').stop();//cc 객체에서 재생 중인 애니메이션을 중지합니다.
3: 지연() 메서드
jelle('cc').delay(1000).animate({width:'100px'}) //cc 너비 변경은 다음의 지연으로 실행됩니다. 1초.
계속해서 발전시켜 나가겠습니다.

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

var jelle = function(id){
var $ = function(id){ return document.getElementById(id) },
elem = $(id),//Object
f = 0, _this = {},lazy = 10,lazyque = 10,//f 애니메이션 카운터 지연 애니메이션 지연 지연 큐 지연
//연산자를 변경하여 애니메이션을 다르게 만들 수 있습니다
tween = 함수 (t, b, c, d){ return - c * (t /= d) * (t - 2) b},
// adv는 = -= *= /= 작업에 사용됩니다
adv = function(val, b){
var va, re= /^([ -\*/]=)([-]?[d.] )/
if (re.test( val) ){
var reg = val.match(re);
reg[2] = parsFloat(reg[2])
스위치( reg[1] ){
case ' = ':
va = reg[2];
break;
case '-=':
va = -reg[2]
case '*=':
va = b*reg[2] - b;
break
case '/=':
va = b/reg[2] -
break;
return va;
}
return parsFloat(val) - b;
}
// elem.animate는 현재 dom 요소에 사용된 애니메이션 대기열을 읽습니다.
elem .animate = elem.animate ||
//사용할 함수
jelle[id]= {}
jelle[id]['stop'] = true; (jelle[id]['stop'])
// 통합 대기열 항목을 사용하여 지연을 편리하게 설정하고 중지할 수 있습니다
_this.entrance = function(fn, ags,lazytime){
/ /fn 호출 함수 ags 매개변수 지연 시간 지연 시간
setTimeout(function(){
fn(ags[0], ags[1], ags[2]);
}, (lazytime || 0) );
}
// 이 애니메이션 중지 방법은 아직 사용할 수 없습니다.
_this.stop = function(){
jelle[id]['stop'] =
elem; .animate .length=0;
$(id).animate.length=0;
return _this;
// 큐 작업
_this.queue = function() 🎜> if (elem.animate && f == elem.animate[0].length){
f = 0; // 카운터 지우기
elem.animate[0].callback ? .callback .apply(elem) : false;
// 실행 대기 중인 애니메이션이 있는지 확인
if (elem.animate.length > 1){
elem.animate[0].callback = elem.animate [1].callback;
elem.animate = $(id).animate || [];// dom 객체에서 최신 애니메이션 대기열 가져오기
elem.animate.shift(); // 방금 실행된 완료된 애니메이션 대기열 지우기
$(id).animate = elem.animate;// dom에 새 대기열 업데이트
var ea = elem.animate[0]// 재생 루프의 대기열 애니메이션
for(var i = 0; i < ea.length; i ){
ea[i][0] === 'opacity' _this.entrance(_this.alpha , [ea[i][ 1], ea[i][2]],lazyque):
_this.entrance(_this.execution, [ea[i][0], ea[i][1], ea[i][2] ],lazyque);
}
}else{
elem.animate.length = 0; // 대기열이 지워졌습니다
$(id).animate.length = 0; // 큐가 지워졌습니다
}
}
}
//lazy 메소드 설정, 향후 큐 애니메이션 지연 시간
_this.delay = function(val){
lazyque = val;
return _this;
}
//애니메이션 변경
_this.execution = function(key, val, t){
//alert(val)
var s = (new Date()).getTime (), d=t || 500 ,
b =parseFloat(elem.style[key]) || 0 ,
c = adv(val, b) , // adv는 = -= 등과 같은 고급 작업을 설정하는 데 사용됩니다.
un = val.match(/d (. )/)[1];// 단위
(function(){
var t = (new Date()).getTime( ) - s;
if (t > d){
t = d
elem.style[key] =parseInt(tween(t, b, c, d)) un;
_this.queue(); // 작업 대기열
return _this;
elem.style[key] =parseInt(t, b, c, d)) un
jelle[ id]['stop'] && setTimeout(arguments.callee,lazy)
// _this.entrance(arguments.callee,[1,1,1], lazy);//args.callee 익명 함수 재귀 호출
}
// 항목
_this.animate = function(sty, t, fn){
// sty, t, fn은 각각 매개변수 키, val 형식, 애니메이션 시간, 콜백 함수입니다.
var len = elem.animate.length; // len은 애니메이션 대기열 길이를 확인합니다.
elem.animate[ len] = [];
elem.animate [len].callback = fn;
//다중 키 루프 설정 변경
for(var i in sty){
elem.animate[len ].push([i, sty[i], t ]);
if(len == 0){
i == '불투명도' _this.entrance(_this.alpha, [sty[i] , t],lazyque) :
_this.entrance (_this.execution, [i, sty[i], t],lazyque)
}
}
$(id).animate = elem.animate;//
dom 요소에서 _this를 반환하는
}
// 투명도 변경 코드
_this.alpha = function(val, t){
var s = (new Date()).getTime (),
d = t || 500, b, c
if( document.defaultView ){
b = document.defaultView.getComputeStyle (elem,null)['opacity'] || 1 ,
c = adv(val,b) * 100;
(function(){
var t = (new Date()).getTime () - s;
if(t > d){
t = d
elem.style['opacity'] = tween(t, (100 * b), c, d) / 100;
_this.queue(); // 대기열 제어
return _this;
elem.style['opacity'] = tween(t, (100 * b), c, d ) / 100;
jelle[id][' stop'] && setTimeout(arguments.callee,lazy)
})()
}else{
b = elem.currentStyle['filter '] ?
(elem.currentStyle['filter '].match(/^alpha(opacity=([d.] ))$/))[1]/100 : 1; val, b) * 100;
(function( ){
var t = (new Date()).getTime() - s;
if (t > d){
t = d;
elem.style['filter'] ='alpha(opacity=' tween(t, (100 * b), c, d) ')'
_this.queue(); 제어
return _this
}
elem.style['filter'] = 'alpha(opacity=' tween(t, (100*b) , c, d) ')'
jelle[id]['stop'] && setTimeout (arguments.callee,lazy);
})()
}
}
return _this;
}

코드 패키징

다운로드 프로그램은 매일 수정될 수 있습니다. 최신 aanimate를 원하시면 이메일로 저에게 연락해주세요.

위 코드는 더 이상 최신 코드가 아닙니다.

지난 이틀 동안 여러 가지 오류가 수정되었습니다.
이 글은 블로그파크 jelle 블로그 http://www.cnblogs.com/idche/에서 발췌한 것입니다.