tween.js 완화 트윈 애니메이션 알고리즘에 대한 자세한 설명

이 글에서는 주로 tween.js easing tween 애니메이션 예제를 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

1. tween.js를 이해하세요

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

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

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

두 번째 및 4개의 매개변수

1. t: 현재 시간--> 시작됩니다.

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

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

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

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

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

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

/*
 * 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) <br> 4. 밤을 주세요 <p></p><pre class="brush:php;toolbar:false">nbsp;html>


  
    <meta>
    <title></title>
    <script></script>
    <script></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>
  

  
    <p>
      </p><p></p>
      <button>start</button>
    
  
  <script>
    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>

5. 개인적인 경험

트윈의 장점은 트윈의 효과가 특정 언어의 문법이 아닌 알고리즘을 기반으로 하기 때문에 어떤 언어에서도 사용할 수 있다는 것입니다. 다양한 곳에서 배울 수 있으며 평생 배우면 혜택을 누릴 수 있습니다.

관련 권장사항:

tween.js 사용에 대한 자세한 예

간단한 애니메이션 라이브러리 캡슐화 tween.js 예제 튜토리얼

Tween.js 애니메이션에 대한 자세한 소개

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