javascript_javascript 스킬의 Easing 효과 구현 프로그램

애니메이션에는 네 가지 일반적인 유형이 있는데, 이를 소개하겠습니다.
Linear: 선형 애니메이션, 즉 일정한 속도
easyIn: 작은 것에서 큰 것까지의 속도, 즉 fade in
easyOut: 속도 큰 것에서 작은 것, 즉 페이드 아웃
easeInOut: 처음에는 속도가 작은 것에서 큰 것, 마지막에는 큰 것에서 작은 것, 즉 페이드 인과 페이드 아웃

사실 완화에 관해서는 N-다중 완화 공식을 발명한 Robert Penner를 언급해야 합니다. 예를 들어

설명해 보겠습니다.

현재 변화량을 X라고 가정하면
t / d = X / c이므로 X = c * t / d이고, 조금 더 복잡한 것을 살펴보겠습니다.

페이드인 효과가 있는데, 애니메이션이 시작되면 값이 작은 것에서 큰 것으로 바뀌는 것을 의미합니다.
둘 사이의 유일한 차이점은 t/d와 (t /= d) * t라는 것을 알 수 있습니다. 방금 t/d는 >=0 && <=1의 비율이라고 임시로 명명했습니다. a, And (t /= d) * t는 Math.pow(a, 2)와 동일합니다.

왜 제곱을 합니까?

1. 우선 a >= Math.pow(a, 2)는 확실합니다
2. 함수가 호출될 때마다 t/d의 비율도 커집니다. 예를 들어 첫 번째 호출은 0.1(제곱 0.01), 두 번째 호출은 0.2(제곱 0.04) 등입니다. 그러면 10번째 호출은 1이어야 합니다. 바로 이때 c * 1 b, 애니메이션이 종료됩니다. 여기서 끝
3. 포인트 2는 비율이 작을수록 값의 변화가 적고, 비율이 클수록 값의 변화가 크다는 것을 증명합니다. 정사각형을 사용하지 않고 큐브로 만들면 페이드인 효과가 나타납니다. 좀 더 분명해지세요.
스타일, 구조, 공용 함수는 다음과 같습니다.

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

 


먼저 가장 간단한 것부터 시작하세요. 시작 위치, 끝 위치 및 단계 크기를 설정하고 매번 종료 조건까지 고정 값을 늘립니다.

코드 복사 코드는 다음과 같습니다.var 타이머 = null ;

var start = 0, end = 400 , 단계 = 5;

var drag = $("drag");
function run() {
if((iLeft = parseInt(getStyle( drag,"left"))) < end) {
                                               drag.style.left = iLeft step "px"; 🎜> }
var 타이머 = setInterval(run, 20);

위 방법 는 일정한 속도이고, 각 움직임의 거리는 고정되어 있습니다. 또 다른 구현 방법을 살펴보겠습니다.





코드 복사

코드는 다음과 같습니다.

var 타이머 = null;
var start = 0, end = 400;
var drag = $("drag");
function run() {
if(( iLeft = parsInt(getStyle(drag,"left"))) < end){
var step = Math.ceil((400 - iLeft)/7);
drag.style.left = iLeft 단계 " px";
                                                                                                                                             >


위 방법은 현재 위치와 대상 사이의 거리를 기준으로 변위의 보폭을 계산하는 것입니다.
플래시에는 여유를 특별히 처리하는 트윈 클래스가 있습니다.

코드 복사

코드는 다음과 같습니다.

var Tween = {
 선형: function(t,b,c,d){ return c*t/db; },
 쿼드: {
 easyIn: function(t,b,c,d){
   return c*(t/=d)*t b;
  },
 easyOut: 함수 (t,b,c,d){
   return -c *(t/=d)*(t-2) b;
  },
  easyInOut: 함수(t,b,c,d ){
   if ((t/=d/2) < 1) return c/2*t*t b;
   return -c/2 * ((--t)*(t-2) - 1) b;
  }
 },
 큐빅: {
 easyIn: function(t,b,c,d){
   return c*(t/=d)*t* t b;
  },
  easyOut: function(t,b,c,d){
   return c*((t=t/d-1)*t*t 1) b;
},
  easyInOut: 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: {
 easyIn: function(t,b,c,d){
   return c*(t/=d)*t*t*t b;
  },
  easyOut: function(t,b,c,d){
   return -c * ((t =t/d-1)*t*t*t - 1) b;
  },
  easyInOut: 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: {
 easyIn: function(t,b,c,d){
   return c*(t/=d)*t*t*t*t b;
  },
  easyOut: function(t,b,c,d){
   return c*((t=t/d-1)*t*t*t*t 1) b;
},
  easyInOut: 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;
  }
 },
 사인: {
  easyIn: function(t,b,c,d){
   return -c * Math.cos(t/d * (Math.PI/2)) c b;
  },
  easyOut: function(t,b,c,d){
   return c * Math.sin(t/d * (Math.PI/2)) b;
  },
  easyInOut: function(t,b,c,d){
   return -c/2 * (Math.cos(Math.PI*t/d) - 1) b;
  }
},
 Expo: {
  easyIn: function(t,b,c,d){
   return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) b;
  },
  easyOut: function(t,b,c,d){
   return (t= =디) ? b c : c * (-Math.pow(2, -10 * t/d) 1) b;
  },
  easyInOut: 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;
  }
 },
 원: {
  easyIn: function(t,b,c,d){
   return -c * (Math.sqrt(1 - (t/=d)*t) - 1) b;
  },
  easyOut: function(t,b,c,d){
   return c * Math.sqrt(1 - (t=t/d-1)*t) b;
  },
  easyInOut : 함수(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: {
  easyIn: 함수 (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;
  },
  easyOut: 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);
  },
  easyInOut: function(t,b,c,d,a,p){
   if (t ==0) 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;
  }
 },
 뒤로: {
easyIn: function(t,b,c,d,s){
   if (s == 정의되지 않음) s = 1.70158;
   return c*(t/=d)*t*((s 1)* t - s) b;
  },
  easyOut: function(t,b,c,d,s){
   if (s == 정의되지 않음) s = 1.70158;
   return c*( (t=t/d-1)*t*((s 1)*t s) 1) b;
  },
  easyInOut: function(t,b,c,d,s){
if (s == 정의되지 않음) 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;
  }
 },
바운스: {
easyIn: function(t,b,c,d){
return c - Tween.Bounce.easeOut(d-t, 0, c, d) b;
},
easyOut: function(t,b,c,d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) b ;
} else if (t return c*(7.5625*(t-=(1.5/2.75))*t .75) b;
} else if (t 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;
}
},
easyInOut: 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;
}
}
}

각 easing 메소드는 3가지 유형에 해당합니다.
easeIn: 0부터 시작 가속 완화;
easeOut: 0으로 감속 완화
easeInOut: 전반 0에서 가속 0으로 감속
매개변수 설명:
t: 현재 시간
b: 초기값
c: 변화량
d: 기간
호출 방법:

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

var 타이머 = null;
var b=0 ,c=400,d=100,t=0;
var drag = $("drag");
function run() {
drag.style.left = Math.ceil( Tween.Circ .easeInOut(t,b,c,d)) "px";
if(t   t ;
}else{
clearInterval(timer);
        }
}
var 타이머 = setInterval(run, 20)