Tween.js アニメーションの詳細な紹介-jsチュートリアル-php.cn

Tween.js アニメーションの詳細な紹介

零下一度

リリース： 2017-06-26 13:34:38

オリジナル

2311 人が閲覧しました

1. applyとcallの使い方。

まず、このブログ記事とは関係のないこと、apply と call の使用法について話しましょう。実際、apply と call の使い方は同じですが、パラメーターが異なります。 apply は配列ですが、call は列挙型と同様に個別に渡されます。

1. 引数を標準の配列に変換すると、push やその他のメソッドが使用できるようになります。

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 行です。

には主に以下が含まれます:

Linear: 線形等速モーション効果
Quadratic: 二次イージング (t^2); ic
： 3 度までイージングべき乗 (t^3);
Quartic
: 4 乗への緩和 (t^4)
Quintic
: 5 乗への緩和 (t^5) ;
Sinusoidal
: 正弦曲線のイージング (sqrt(t);
Exponential
: 指数曲線のイージング (2^t); 1-t^2));
Elastic
: 範囲を超えた指数関数的に減衰する正弦波イージング; ((s+ 1)*t^3 – s*t^2) ;
バウンス
: 指数関数的に減衰するリバウンド緩和。
各エフェクトは、次の 3 つのイージング方法に分割されます。
easeIn: 0 から加速するイージング、つまり、最初は遅く、次に速くします。
easeOut: ゆっくりイージングします。 0 まで、つまり最初は速く、次にゆっくりです。

easeInOut

: イージングは前半で 0 から始まり、後半で 0 まで減速します。

多くの友人は、easeIn と easeOut のどちらが速いのか、それとも遅いのか思い出せません。私たちの最初の邪悪な表記方法をもう一度教えてください。 OOXX。入るとき (easeIn)、最初は遅くなりますが、入ってから出るとき (easeOut) は速くなります。始まりはとても速かったのですが、出ようとして出ようとしないときから速度が落ちました。これは、ここでのアニメーション効果と完全に一致します。
これらすべてのイージングアルゴリズムは、次の 4 つのパラメータ、t、b、c、d から分離できません。意味は以下の通りです

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

ログイン後にコピー

2.console.log(TWEEN);

console.log(TWEEN)

ログイン後にコピー

TWEENには多くのメソッドやオブジェクトが実装されていることがわかります。一つ一つ掘り出していけば、具体的な用途が分かります。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#target{width: 100px;height: 100px;background: red;}</style></head><body><div id="target"></div></body><script src="tween.js?1.1.11"></script><script src="index.js?1.1.11"></script></html>

ログイン後にコピー

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

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

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 < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    } if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16 - (currTime - lastTime));var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;return id;
        }; if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

ログイン後にコピー

人の人生には、小さな道、回り道、大きな道、デコボコの泥道がたくさんあります。とにかく、私の地元はデコボコの泥道がいっぱいです。私が最初のウェブサイトに出会ってから約 6 年が経ちました。時間の流れはとても速く、人生の軌道もすぐに変わります。でこぼこした泥道から明るい道を見つけたければ、後退するつもりはなく、前進しなければなりません。フィールドでどれだけ遠くまで行けるかは、どれだけ長く継続できるかによって決まります。ある分野で 10,000 時間粘り強く続ければ、その分野の達人になれると言う人もいます。 10000/24? 400日以上かかるそうです。睡眠時間、仕事時間、ゲーム時間は除きます。 10,000時間に達するには4〜6年かかると推定されています。また、皆さんが幸せな一日を過ごし、すべてがうまくいくことを祈っています。

以上がTween.js アニメーションの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。