tween.js를 사용하여 완화 트위닝 애니메이션 알고리즘 구현

이 글에서는 주로 tween.js easing tween 애니메이션 예제를 소개하고 참고용으로 제공합니다.

1. tween.js 이해하기

위 내용을 이해하셨다면 다음 부분은 건너뛰셔도 됩니다. 다음은 Tween.js에 대한 설명입니다. 먼저, b. 완화가 시작되기 전에 세 가지 매개변수 c 및 d(즉, 초기 값, 변경량, 기간)를 결정해야 합니다. 먼저 애니메이션 트위닝의 개념을 소개합니다. Flash는 애니메이션을 수행할 때 Tween 클래스를 사용하여 이징, 스프링 등과 같은 다양한 애니메이션 효과를 만드는 데 사용할 수 있습니다. tween.js는 Flash에서 트위닝 애니메이션으로 해석될 수 있습니다. 그렇다면 트위닝 애니메이션이 무엇입니까?

Flash를 연구한 모든 사람은 트위닝 애니메이션이 Tween의 주요하고 매우 중요한 표현 수단 중 하나라는 것을 알고 있을 것입니다. 애니메이션 트위닝 애니메이션에는 액션 트위닝 애니메이션과 모양 트위닝 애니메이션의 두 가지 유형이 있지만 js에서는 이에 대해 너무 많이 알 필요가 없습니다. 자, 더 이상 고민하지 말고 다음에서 제공하는 트위닝 애니메이션의 정의를 살펴보겠습니다. Baidu 백과사전: 트위닝 애니메이션: 플래시 애니메이션을 수행할 때 트위닝 애니메이션을 삽입한 후 그림의 움직임을 실현하려면 두 키 프레임 사이에 "트위닝 애니메이션"을 수행해야 하며 두 키 프레임 사이의 보간 프레임은

그러면 키 프레임이 무엇인가요? 예를 들어, 일반적으로 보는 영화와 애니메이션은 모두 24프레임이고, 24프레임은 사람의 눈으로 포착할 수 있는 범위 내입니다. 두 점을 상상해 보세요. 그 사이에 22개의 점이 직선이나 곡선을 이루고 있습니다. 각 점은 프레임을 나타냅니다. 프레임은 애니메이션에서 단일 이미지를 구성하는 가장 작은 단위이며, 단일 이미지는 하나의 객체로 간주됩니다. 객체, 값 유형 제외) 그리고 이 선은 객체의 이동 궤적을 나타냅니다.

두 번째 및 네 개의 매개변수

1. t: 현재 시간--> 애니메이션이 시작되는 프레임입니다.

2. b: 시작값-->은 초기값을 나타내며, 이는 시작값입니다. 우리는 영화나 애니메이션을 볼 때 일반적으로 프롤로그를 보지 않으므로 시작 부분을 건너뛰고 첫 번째 프레임과 마지막 프레임 위치를 살펴보기 시작하려고 하는데 이 위치가 초기값입니다.

3. c: 값 변화-->는 마지막 프레임에서 초기 값(변화량)을 뺀 값을 나타냅니다.

4. d: 지속 시간-->은 마지막 프레임, 1초의 끝을 나타냅니다. 이는 또한 애니메이션 마침입니다.

tween.js 사용법 1. 다운로드 2. 가져오기 3. tween.js 구문 사용

Easing 함수 이름(t, b, c, d)

참고: 숫자가 시작 단계 수가 종료 단계 수와 같아지면 전체 동작이 종료됩니다. 참고: t가 d와 같아질 때만 동작이 종료됩니다. 그렇지 않으면 동작이 중지되지 않습니다. 트윈 파일 코드

/*
 * Tween.js
 * t: current time（当前时间）；
 * b: beginning value（初始值）；
 * c: change in value（变化量）；
 * d: duration（持续时间）。
*/
var Tween = {
  Linear: function(t, b, c, d) { //匀速
    return c * t / d + b; 
  },
  Quad: { //二次方缓动效果
    easeIn: function(t, b, c, d) {
      return c * (t /= d) * t + b;
    },
    easeOut: function(t, b, c, d) {
      return -c *(t /= d)*(t-2) + b;
    },
    easeInOut: function(t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t + b;
      return -c / 2 * ((--t) * (t-2) - 1) + b;
    }
  },
  Cubic: { //三次方缓动效果
    easeIn: function(t, b, c, d) {
      return c * (t /= d) * t * t + b;
    },
    easeOut: function(t, b, c, d) {
      return c * ((t = t/d - 1) * t * t + 1) + b;
    },
    easeInOut: 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: { //四次方缓动效果
    easeIn: function(t, b, c, d) {
      return c * (t /= d) * t * t*t + b;
    },
    easeOut: function(t, b, c, d) {
      return -c * ((t = t/d - 1) * t * t*t - 1) + b;
    },
    easeInOut: 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: { //五次方缓动效果
    easeIn: function(t, b, c, d) {
      return c * (t /= d) * t * t * t * t + b;
    },
    easeOut: function(t, b, c, d) {
      return c * ((t = t/d - 1) * t * t * t * t + 1) + b;
    },
    easeInOut: 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;
    }
  },
  Sine: { //正弦缓动效果
    easeIn: function(t, b, c, d) {
      return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
    },
    easeOut: function(t, b, c, d) {
      return c * Math.sin(t/d * (Math.PI/2)) + b;
    },
    easeInOut: function(t, b, c, d) {
      return -c / 2 * (Math.cos(Math.PI * t/d) - 1) + b;
    }
  },
  Expo: { //指数缓动效果
    easeIn: function(t, b, c, d) {
      return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
    },
    easeOut: function(t, b, c, d) {
      return (t==d) ? b + c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
    },
    easeInOut: 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;
    }
  },
  Circ: { //圆形缓动函数
    easeIn: function(t, b, c, d) {
      return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
    },
    easeOut: function(t, b, c, d) {
      return c * Math.sqrt(1 - (t = t/d - 1) * t) + b;
    },
    easeInOut: function(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: { //指数衰减正弦曲线缓动函数
    easeIn: function(t, b, c, d, a, p) { //加速
      var s;
      if (t==0) return b;
      if ((t /= d) == 1) return b + c;
      if (typeof p == "undefined") p = d * .3;
      if (!a || a < Math.abs(c)) {
        s = p / 4;
        a = c;
      } else {
        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;
    },
    easeOut: function(t, b, c, d, a, p) { //减速
      var s;
      if (t==0) return b;
      if ((t /= d) == 1) return b + c;
      if (typeof p == "undefined") p = d * .3;
      if (!a || a < Math.abs(c)) {
        a = c; 
        s = p / 4;
      } else {
        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);
    },
    easeInOut: function(t, b, c, d, a, p) { //先加速后减速
      var s;
      if (t==0) return b;
      if ((t /= d / 2) == 2) return b+c;
      if (typeof p == "undefined") p = d * (.3 * 1.5);
      if (!a || a < Math.abs(c)) {
        a = c; 
        s = p / 4;
      } else {
        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;
    }
  },
  Back: { //超过范围的三次方的缓动函数
    easeIn: function(t, b, c, d, s) {
      if (typeof s == "undefined") s = 1.70158;
      return c * (t /= d) * t * ((s + 1) * t - s) + b;
    },
    easeOut: function(t, b, c, d, s) {
      if (typeof s == "undefined") s = 1.70158;
      return c * ((t = t/d - 1) * t * ((s + 1) * t + s) + 1) + b;
    },
    easeInOut: function(t, b, c, d, s) {
      if (typeof s == "undefined") 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;
    }
  },
  Bounce: { //指数衰减的反弹曲线缓动函数
    easeIn: function(t, b, c, d) {
      return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
    },
    easeOut: function(t, b, c, d) {
      if ((t /= d) < (1 / 2.75)) {
        return c * (7.5625 * t * t) + b;
      } else if (t < (2 / 2.75)) {
        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
      } else if (t < (2.5 / 2.75)) {
        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;
      }
    },
    easeInOut: 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;
      }
    }
  }
}
Math.tween = Tween;

4. 밤을 주세요

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="Tween/tween.js"></script>
    <style>
      *{margin: 0;padding: 0;}
      .out{width: 800px;height: 500px;background: #e5e5e5;position: relative;padding: 20px;text-align: center;}
      .inner{width: 50px;height: 50px;border-radius: 50%;background: #FF0000; position: absolute;left: 50px;top: 50px;}
    </style>
  </head>

  <body>
    <p id="app" class="out">
      <p class="inner" id="ball"></p>
      <button id="start" @click="start()">start</button>
    </p>
  </body>
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        t: 0,
        b: 50,
        c: 500,
        d: 1500,
      },
      methods:{
        start(){
          var t = this.t;
          const b = this.b;
          const c = this.c;
          const d = this.d;
          const setInt = setInterval(()=>{
            t++;
            console.log(t)
            if(t==300){clearInterval(setInt)}
            console.log(t);
            const ballLeft = Tween.Linear(t,b,c,d)+"px";
            ball.style.left = ballLeft;
          },20)
        }
      }
    })
  </script>
</html>

5. 개인적인 경험

트윈의 장점은 트윈의 효과가 문법이 아닌 알고리즘을 기반으로 한다는 점입니다. 특정 언어를 사용할 수 있으므로 장소가 매우 넓고 한번 배우면 평생에 도움이 될 것입니다. 위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

vue에 따라 전역 변수 또는 데이터 메서드 설정(자세한 튜토리얼)

jquery를 사용하여 Enter 키를 클릭하여 로그인 효과를 얻으세요(자세한 튜토리얼)

현재를 가져오는 방법 vue.js의 값 요소의 텍스트 정보 방법

위 내용은 tween.js를 사용하여 완화 트위닝 애니메이션 알고리즘 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!