requestAnimationFrameでイージングを追加する

Question

ここで同じ効果を再現する必要があります：http://www.chanel.com/fr_FR/mode/haute-couture.html =マウス移動イベントでのスワイプ効果です。

私はちょうどアニメーションの部分にいくつかの助けが必要です。

function frame() { 
     $('.images-gallery').css({ 
     'transform': 'translateX('+ -mouseXPerc +'%)' 
     }); 
     requestAnimationFrame(frame); 
    } 

    requestAnimationFrame(frame); 
    $(document).on('mousemove',function(e){ 
     mouseXPerc = e.pageX/containerWidth*100; 

    }); 

これまでのことはこれまでのとおりです。 それは想定どおりに動作しますが、あなたが想像することができるように、それはかなり生であり、私はその中でいくらかの緩和が必要です。 frame() functionを編集して、なんらかのスムーズにするにはどうすればよいですか？

編集：requestAnimationFrame（それぞれ1/30秒）の値を変更するとCSSトランジション/アニメーションを使用できません。

Answer 1

class images-galleryを使用して要素にCSSトランジションを追加します。以下のように：

transition: transform .5s ease-in;

Answer 2

独自01​​関数を作成することができますし、あなたのframe関数内でそれを使用する：

var ease = function() { 
    var x = 0; 
    return function(x_new) { 
     x = (x_new+x)*.5; 
     return x; 
    } 
}(); 

function frame() { 
    $('.images-gallery').css({ 
    'transform': 'translateX('+ -ease(mouseXPerc) +'%)' 
    }); 
    requestAnimationFrame(frame); 
} 

requestAnimationFrame(frame); 
$(document).on('mousemove',function(e){ 
    mouseXPerc = e.pageX/containerWidth*100; 

}); 

Answer 3

私はあなたのための答えを見つけたと思います。それthis library

まずに基づいています、私はちょうどその時、私はサンプルコードの改変形態を使用することになり、そのサイトから

function inOutQuad(n){ 
    n *= 2; 
    if (n < 1) return 0.5 * n * n; 
    return - 0.5 * (--n * (n - 2) - 1); 
}; 

を機能をつかむだろう、この

function startAnimation(domEl){ 
    var stop = false; 

    // animating x (margin-left) from 20 to 300, for example 
    var startx = 20; 
    var destx = 300; 
    var duration = 1000; 
    var start = null; 
    var end = null; 

    function startAnim(timeStamp) { 
     start = timeStamp; 
     end = start + duration; 
     draw(timeStamp); 
    } 

    function draw(now) { 
     if (stop) return; 
     if (now - start >= duration) stop = true; 
     var p = (now - start)/duration; 
     val = inOutQuad(p); 
     var x = startx + (destx - startx) * val; 
     $(domEl).css('margin-left', `${x}px`); 
     requestAnimationFrame(draw); 
    } 

    requestAnimationFrame(startAnim); 
} 

のようなもの、私は「停止」の計算方法を変更する可能性があります。destxなどで終了するように書き込むかもしれませんが、それは基本形式です。

this jsfiddle

私は実際にこれを誇りに思っています。私はこれをしばらく理解したいと思っています。うれしい私には理由があった。