지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

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

亚连
풀어 주다： 2018-06-05 18:03:16
원래의
1602명이 탐색했습니다.

이 글에서는 주로 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: &#39;#app&#39;,
      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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
tween.js缓动补间动画 tween.js 缓动
원천：php.cn
이전 기사：React의 ref에 대한 자세한 설명(자세한 튜토리얼) 다음 기사：Node.js를 사용하여 압축 및 압축 해제 기능 구현
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
0ms 수면을 생략하면 CSS 전환이 중단되는 이유는 무엇입니까? 제가 제대로 이해하고 있는지 알아보기 위해 FLIP 애니메이션을 구현해 보려고 합니다. 이 코드펜에서(잘못된 코드를 양해해 주세요. 그냥 장난을 쳤을 뿐입니다) ...
에서 2024-04-06 16:29:50
0
2
490
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿