ホームプログラミング言語 Web関連 javascript JSアニメーション効果の実装（例あり）

JSアニメーション効果の実装（例あり）

CSS を学習すると、単純なアニメーション効果は CSS で実現できることがわかりますが、より複雑なアニメーションの場合、CSS を使用して実現するのはより困難になります。 CSSが使用できるほか、JavaScriptも使用できます。 JavaScript アニメーションは主に要素のスタイルを変更することで実現され、一時停止や再生など、CSS アニメーションでは実現できない多くの効果を実現できます。

CSS アニメーションと比較すると、JavaScript アニメーションには次の特徴があります。

JavaScript のアニメーション制御機能が強化され、開始、一時停止、再生、終了、キャンセルなどのアニメーション再生プロセス中にアニメーションを制御できます。
JavaScript アニメーションには、CSS アニメーションよりも豊富な効果があり、曲線の動き、衝撃のちらつき、視差スクロールなど、JavaScript アニメーションでのみ完成させることができます。
CSS アニメーションには互換性の問題がありますが、JavaScript にはほとんどの場合互換性の問題がありません。

JavaScript は主に DOM 要素をコードで変更することでアニメーションを実装しており、タイマーと連携してループ再生を実現することができます。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box {
            width: 200px;
            height: 200px;
            margin-top: 10px;
            background: rgb(43, 221, 255);
            position: relative;
            left: -200px;
            top: 0;
        }
        #box span {
            width: 20px;
            background: rgb(255, 119, 157);
            position: absolute;
            left: 200px;
            top: 75px;
            color: #fff;
            text-align: center;
            cursor: pointer;
            padding: 5px 1px 5px 0;
            border-radius: 0 5px 5px 0;
        }
        #box span:hover {
            background: rgb(255, 84, 137);
        }
    </style>   
</head>
<body>
    <div id="box">
        <span id="share">共有</span>
    </div>
    <script>
        window.onload = function () {
            //アニメーション
            var div = document.getElementById("box");
            var timer = null;
            div.onmouseover = function () {
                startMove(0);
            };
            div.onmouseout = function () {
                startMove(-200);
            };
            function startMove(targetPosition) {
                clearInterval(timer);
                var speed = 0;
                if (targetPosition < 0) {
                    speed = -10;
                } else {
                    speed = 10;
                }
                timer = setInterval(function () {
                    if (div.offsetLeft == targetPosition) {
                        clearInterval(timer);
                    } else {
                        div.style.left = div.offsetLeft + speed + 'px';
                    }
                }, 17);
            }
        };
    </script>
</body>
</html>

操作の結果は次のようになります。

ヒント: 最近のほとんどのモニターのリフレッシュレートは 60HZ で、アニメーションをよりスムーズにするには、最適なループ間隔が約 17 ミリ秒のタイマーを使用してください。

別の例を使用して、JavaScript アニメーションを作成する方法を示します。サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <style type="text/css">
        * {
            margin: 0 auto;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        #view {
            position: relative;
            width: 320px;
            height: 120px;
            border: 10px solid #bc8f8f;
            overflow: hidden;
            margin-top: 5px;
        }
        #img_list {
            position: absolute;
            width: 960px;
        }
        #img_list li {
            float: left;
            width: 320px;
            height: 120px;
        }
    </style>
</head>

<body>
    <div id="view">
        <ul id="img_list">
            <li style="background-color: #87ceeb;"></li>
            <li style="background-color: #ff69b4;"></li>
            <li style="background-color: #98fb98;"></li>
        </ul>
    </div>
    <script type="text/javascript">
        var img_list = document.getElementById('img_list');

        setInterval(function() {
            for (var i = 0; i <= 100; i++) {
                (function(pos) {
                    setTimeout(function() {
                        img_list.style.left = - (pos / 100) * 320 + 'px';
                    }, (pos + 1) * 10)
                })(i)
            }

            var current = img_list.children[0];
            setTimeout(function() {
                img_list.appendChild(current);
                img_list.style.left = '0px';
            }, 1100);
        }, 2000);
    </script>
</body>
</html>

操作の結果は次のようになります。

「JSアニメーション効果の実装（例あり）」についてわかりやすく解説！絶対に観るべきベスト2動画

gsapアニメーションでお洒落なテキストアニメーションを実装してみよう

https://www.youtube-nocookie.com/watch?v=3j-Sxmga6Dw&pp=ygU7SlPjgqLjg4vjg6Hjg7zjgrfjg6fjg7Plirnmnpzjga7lrp_oo4XvvIjkvovjgYLjgorvvIkmaGw9SkE%3D

gsapアニメーションでお洒落なテキストアニメーションを実装してみよう (https://www.youtube-nocookie.com/watch?v=3j-Sxmga6Dw&pp=ygU7SlPjgqLjg4vjg6Hjg7zjgrfjg6fjg7Plirnmnpzjga7lrp_oo4XvvIjkvovjgYLjgorvvIkmaGw9SkE%3D)

CSSアニメーション #1 transitionを覚えて簡単なアニメーションを実装しよう

https://www.youtube-nocookie.com/watch?v=VT-FI7ZT9MQ&pp=ygU7SlPjgqLjg4vjg6Hjg7zjgrfjg6fjg7Plirnmnpzjga7lrp_oo4XvvIjkvovjgYLjgorvvIkmaGw9SkE%3D

CSSアニメーション #1 transitionを覚えて簡単なアニメーションを実装しよう (https://www.youtube-nocookie.com/watch?v=VT-FI7ZT9MQ&pp=ygU7SlPjgqLjg4vjg6Hjg7zjgrfjg6fjg7Plirnmnpzjga7lrp_oo4XvvIjkvovjgYLjgorvvIkmaGw9SkE%3D)

javascript