フロントエンドアニメーションを実装する 7 つの方法のまとめ (コード付き)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

フロントエンドアニメーションを実装する 7 つの方法のまとめ (コード付き)

不言

Aug 20, 2018 am 11:10 AM

フロントエンドアニメーション

この記事では、フロントエンドアニメーションを実装するために使用できる 7 つの方法をまとめています (コード付き)。必要な方は参考にしていただければ幸いです。

1. JavaScript は

を直接実装します。主なアイデアは、setInterval または setTimeout メソッドのコールバック関数を通じて要素の CSS スタイルを継続的に呼び出して変更し、要素スタイルの変更の効果を実現することです。。

<div id="rect"></div>
 
    <script>
 
        let elem = document.getElementById(&#39;rect&#39;);
 
        let left = 0;
 
        let timer = setInterval(function(){
 
            if(left<window.innerWidth-200){
 
                elem.style.marginLeft = left+&#39;px&#39;;
 
                left ++;
 
            }else {
 
                clearInterval(timer);
 
            }
 
        },16);
 
</script>

短所: Javascript によるアニメーションの実装では、通常、ページの再配置と再描画が頻繁に行われるため、パフォーマンスが消費されます。通常はデスクトップブラウザーで使用する必要があります。モバイル端末で使用すると明らかな遅延が発生します。

2、SVG (スケーラブルベクターグラフィックス);

3、CSS3 アニメーション;

6、リクエストアニメーションフレーム;

requestAnimationFrame は別の Web API であり、その原理は JavaScript の連続ループメソッド呼び出しを通じてアニメーションアクションをトリガーします。ただし、requestAnimationFrame はアニメーション用にブラウザーによって特別に最適化された API であり、そのパフォーマンスは他の 2 つよりも優れています。

    <div id="rect"></div>
 
 <script type="text/javascript">
 
window.requestAnimationFrame = window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;
 
    let elem = document.getElementById("rect");
 
    let left = 0;
 
    //自动执行持续性回调
 
    requestAnimationFrame(step);
 
    //持续该改变元素位置
 
    function step() {
 
        if(left<window.innerWidth-200){
 
            left+=1;
 
            elem.style.marginLeft = left+"px";
 
            requestAnimationFrame(step);
 
        }
 
    }
 
</script>

7、jqアニメーション

1) 表示と非表示:

.show(ms) .hide(ms) .toggle(ms) パラメータがない場合、デフォルトではアニメーションなしで即座に表示および非表示になります。表示属性ミリ秒パラメータを使用して実装されます。アニメーション効果があります。

トグルは非表示の要素を表示し、表示されている要素を非表示にします2) 上下にスライド: .slideUp(ms) .slideDown(ms) .slideToggle(ms)

3) フェードインおよびフェードアウト: .fadeIn(ms) .fadeOut (ms) .fadeToggle(ms)

2. ユニバーサルアニメーション:

$(...).animate(params,speed,callback)

params: スタイル属性と値を含むマッピング

speed: 速度パラメータ [オプション]

コールバック: アニメーションの完了時に実行される関数 [オプション]。コールバック関数内のこれは、アニメーションを再生している現在の DOM 要素を参照します

8アニメーションまたは SVG メソッドを実装します

モバイル端末は、CSS3transition、CSS3animation、Canvas、または requestAnimationFrame メソッドの使用を検討できます