何時にアニメートするのですか？

Question

イメージをアニメートしようとしています。これは、左から右に移動するシンプルなアニメーションです。これは最終的にユーザーがダウンロードしたgifになります。

私は現在、このアニメーションをそれぞれ100msで5フレームとしていますが、アニメーションはちょっとジッタがあります。その後、それぞれ50ミリ秒で20フレームに増加しましたが、まだまだ気になります。イージーイン/スライドインアニメーションをスムーズにするためのインプットがあったかどうかは疑問です。フレームをさらに増やすべきですか？

私の現在のアニメーションは、（100ミリ秒で各フレーム）です 左：[X、X、X、X、X]事前に

ありがとう！

Answer 1

これにはCSSアニメーションを使用する方がよいでしょう。よりスムーズに動作し、コードを簡単にすることができます。次に例を示します。

<style> 
    #movie { 
    transition-property: left; 
    transition-duration: 1s; 
    transition-timing-function: linear; 
    width:100px; 
    height:100px; 
    background-color:red; 
    position:absolute; 
    left:100px; 
    top:100px; 
    } 
</style> 

<script> 
    function move(d) { 
    d.style.left = '500px'; 
    } 
</script> 

<div id="movie" onclick="move(this)"></div> 

右にスムーズに移動する赤い四角形をクリックします。