步速動畫不能用速度進度

當我知道速度的力量。我不想使用速度將我所有的CSS3動畫轉換爲我的應用程序。現在我有步驟動畫的問題。步速動畫不能用速度進度

這是段

$el = $(".velocity-animation"); 
 

 
$el.velocity({ 
 
\t paddingLeft : "0" 
 
}, { 
 
\t \t duration: 3000, 
 
    easing : "ease", 
 
    \t progress: function(elements, complete) { 
 
    \t var step = complete * 100 ; 
 
    \t if(step <= 50){ 
 
     \t \t $el.velocity({ 
 
      \t paddingLeft : "50px" 
 
      }) 
 
     } else if(step <= 70){ 
 
     \t $el.velocity({ 
 
      \t paddingLeft : "0px" 
 
     }) 
 
     } else if(step <= 100){ 
 
     \t $el.velocity({ 
 
      \t paddingLeft : "300px" 
 
     }) 
 
     } 
 
    } 
 
})

.css-animation, .velocity-animation { 
 
    background : red; 
 
} 
 

 
.css-animation { 
 
    animation : 3s move; 
 
} 
 

 
@keyframes move { 
 
    0% { 
 
    padding-left:0; 
 
    } 
 
    50% { 
 
    padding-left:50px; 
 
    } 
 
    70% { 
 
    padding-left:0; 
 
    } 
 
    100% { 
 
    padding-left:300px; 
 
    } 
 
}

<div class="css-animation"> 
 
    Animate it 
 
</div> 
 

 
<div class="velocity-animation"> 
 
    Animate It 
 
</div> 
 

 

 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.1/velocity.min.js"></script>

而這裏的小提琴https://jsfiddle.net/nLx3z32z/

來源

2017-01-27 Engkus Kusnadi

如果你想速度改變也許你想使用的緩動函數？：http://cubic-bezier.com/#.17,.67,.83 ,. 67 –

更重要的是，我想要速度跑步動畫，就像css3一樣。（30％，70％，100％） –

你可以使用

Velocity.RunSequence(mySequence);

運行步驟動畫（按順序動畫）。

例子：

var animationSequence = [ 
    { e: $("#yourElm"), p: { translateX: 0 } , o: duration: 300 }, 
    { e: $("#yourElm"), p: { translateX: 100, opacity: 0 } , o: duration: 300 }, 
    { e: $("#yourElm"), p: { translateY: 100, rotateZ: 45 } , o: duration: 150 } 
]; 
$.Velocity.RunSequence(animationSequence);

來源

2017-01-30 07:33:02 GibboK

步速動畫不能用速度進度

回答

相關問題