按要求添加緩動動畫幀

我需要重現與此處相同的效果：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過渡/動畫。

來源

2016-05-17 enguerranws

-2

使用class images-gallery爲您的元素添加CSS過渡。如下圖所示：

transition: transform .5s ease-in;

來源

2016-05-17 06:29:37 Rein

我無法使用CSS轉換/動畫（因爲每次在requestAnimationFrame（）上變換的值發生變化時都會觸發它，因此幾乎每1/33秒）。 – enguerranws

-1

您可以創建自己的ease功能，使用它你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; 

});

來源

2016-05-17 07:07:33 Luka

我想我已經找到了你一個答案。它是基於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

實際上，我還挺自豪這一個。我一直想弄清楚這一點。很高興我有一個理由。

來源

2017-10-06 11:09:26 TKoL

按要求添加緩動動畫幀

回答

相關問題