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

1. 신청 및 전화 사용법.

먼저 본 블로그 포스팅과 관련없는 신청 및 전화 사용법에 대해 말씀드리겠습니다. 실제로 Apply와 Call의 사용법은 동일하지만 매개변수가 다릅니다. Apply는 배열인 반면 호출은 열거형과 유사하게 개별적으로 전달됩니다.

1. Liezi는 인수를 표준 배열로 변환하며 푸시 및 기타 방법을 사용할 수 있습니다.

function test(){//arguments.push(5); //arguments.push is not a function    console.log(arguments)var arg = Array.prototype.slice.apply(arguments,[]);   // var arg = Array.prototype.slice.call(arguments,'');console.log(arg); //[1,2,3,4]arg.push(5); // [1,2,3,4,5]}

test(1,2,3,4);

2. 인수의 매개변수를 배열에 직접 푸시하는 방법은 무엇입니까? (신청도 도와주세요)

function test(){var arg = [];
    Array.prototype.push.apply(arg,arguments);
    console.log(arg); // [1,2,3,4] 是不是发现要把一个数组//插入到另外一个数组的后面不用for循环了，也不用contact了呢？//其实apply 和call还是有多用法，比如继承。其实主要是把//前面对象的方法赋给后面对象而已。比如 object.apply(object1,arg)//把object的方法赋给 object1。而 arg是参数。}

test(1,2,3,4);

이번화는 여기서 끝입니다. 다음은 tween.js에 대해 주로 설명합니다

2. Tween.js에 대하여

1. Tween.js는 다양한 클래식 애니메이션 알고리즘을 포함하는 JS 리소스입니다. 실제로 jQuery.easing.js와 더 유사합니다. 주요 메소드 이름도 동일합니다. 압축하지 않은 코드는 800줄에 불과합니다.

에는 주로 다음이 포함됩니다.

1. Linear: 선형 균일 모션 효과

2. Quadratic: 2차 여유(t^2); ic

   : 세 번째로 완화 거듭제곱(t^3);
3. Quartic

   : 4제곱(t^4)

4. Quintic

   : 5제곱(t^5) ;

5. Sinusoidal

   : 사인곡선 이징(sin(t));

6. Exponential

   : 지수 곡선 이징(2^t)

7. Circular

   : 원형 곡선 이징(sqrt( 1-t^2));

8. Elastic

   : 지수적으로 감소하는 정현파 이징

9. Back

   : 범위를 넘는 3차 이징((s+ 1)*t^3 – s*t^2)

10. Bounce

    : 기하급수적으로 감소하는 반동 완화.

각 효과는 다음과 같은 세 가지 완화 방법으로 나뉩니다.

11. easeIn
: 0부터 가속, 즉 먼저 느리게 한 다음 빠르게

• easeOut

  : 감속 0으로, 즉 처음에는 빠르게, 그 다음에는 느리게

• easeInOut

  : 완화는 전반부에 0부터 시작하여 후반부에 0으로 감속됩니다.

easeIn 또는 easeOut 중 어느 것이 더 빠르고 느린지 기억하지 못하는 친구들이 많습니다. 저의 독특한 사악한 표기법을 다시 한 번 가르쳐 드리겠습니다. OOXX. 들어갈 때(easeIn) 처음에는 느리다가 들어갈 때(easeOut)로 갈수록 빨라집니다. 아주 빠르게 시작됐지만 막 나오려다가 떠나기 꺼려지자 속도가 느려졌다. 이는 여기에 있는 애니메이션 효과와 완전히 일치합니다.

• 이러한 모든 여유 알고리즘은 다음 네 가지 매개변수 t, b, c, d, 그 의미는 다음과 같습니다

  /*
   * t: current time（当前时间）；
   * b: beginning value（初始值）；
   * c: change in value（变化量）；
   * d: duration（持续时间）。 */

2.console.log(TWEEN);

console.log(TWEEN)

easeIn和easeOut哪个先快，哪个先慢一直记不清楚，我这里再给大家传授一遍我独门的邪恶记法，想想我们第一次OOXX，是不是进去(easeIn)的时候都是先慢，等进去了就快了；然后出来(easeOut)的时候，开始很快，都要出来了恋恋不舍速度就慢了。跟我们这里的动画效果是完全匹配的。

所有的这些缓动算法都离不开下面4个参数，t, b, c, d

TWEEN에는 수많은 메소드와 객체가 탑재되어 있음을 알 수 있습니다. 하나씩 파헤쳐 보면 구체적인 용도를 알게 될 것입니다.

3. 작은 순서부터 시작하겠습니다.

nbsp;html><meta><title>Title</title><style>#target{width: 100px;height: 100px;background: red;}</style><div></div><script></script><script></script>

var position;var target;var tween, tweenBack;

init();
animate();function init() {

    position = {x: 100, y: 100, rotation: 0};
    target = document.getElementById('target');
    tween = new TWEEN.Tween(position)
      .to({x: 700, y: 200, rotation: 359}, 2000)
      .delay(1000)
      .easing(TWEEN.Easing.Elastic.InOut)
      .onUpdate(update);

    tweenBack = new TWEEN.Tween(position)
      .to({x: 100, y: 100, rotation: 0}, 3000)
      .easing(TWEEN.Easing.Elastic.InOut)
      .onUpdate(update);

    tween.chain(tweenBack);
    tweenBack.chain(tween);

    tween.start();

}function animate( time ) {

    requestAnimationFrame( animate );

    TWEEN.update( time );

}function update() {

    target.style.webkitTransform = 'translate('+position.x+ 'px'+','+ position.y + 'px' +')' + 'rotate(' + Math.floor(position.rotation) + 'deg)';//target.style.webkitTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';
   // target.style.MozTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';}

각 API는 추적할 소스 코드에 해당합니다. 사용법만 알아두세요. 소스코드를 비교하면 800줄이 조금 넘습니다.

4. 모션 기능

(function() {var lastTime = 0;var vendors = ['ms', 'moz', 'webkit', 'o'];for(var x = 0; x <p></p>5. <p></p>사람의 삶에는 작은 길, 우회로, 큰 길, 울퉁불퉁한 진흙길이 많습니다. 아무튼 제 고향은 울퉁불퉁한 진흙길로 가득 차 있습니다. 제가 첫 번째 웹사이트를 접한 지 거의 6년이 되었습니다. 시간은 너무나 빨리 흐르고, 삶의 궤적도 빠르게 변합니다. 울퉁불퉁한 진흙길에서 밝은 길을 찾으려면 후퇴할 생각 없이 앞으로 나아가야 합니다. 한 분야에서 얼마나 멀리 갈 수 있는지는 얼마나 오랫동안 지속할 수 있는지에 달려 있습니다. 어떤 사람들은 한 분야에서 10,000시간 동안 끈기 있게 노력하면 이 분야의 달인이라고 말합니다. 10000/24? 400일이 넘은 것 같습니다. 잠자는 시간, 일하는 시간, 게임하는 시간은 제외됩니다. 10,000시간에 도달하려면 4~6년이 걸릴 것으로 추정된다. 또한 모두 행복한 하루 되시고 모든 일이 잘되길 바랍니다. <p></p><div class="cnblogs_code"></div>

위 내용은 Tween.js 애니메이션에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!