JavaScript 動畫

来源:https://www.cnblogs.com/py-web/archive/2020/03/18/12517103.html
-Advertisement-
Play Games

動畫原理 Document 動畫原理 Document 夏雨荷 動畫封裝 Document 點擊夏雨荷才走 夏雨荷 不同動畫緩動動畫 Document 點擊夏雨荷才走 夏雨荷 ... ...


動畫原理
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        var tinner = setInterval(function () {
            if (div.offsetLeft > 400) {
                clearInterval(tinner);
            }
            div.style.left = div.offsetLeft + 1 + 'px'

        }, 30)

    </script>
</body>

</html>
動畫原理 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div></div>
    <span>夏雨荷</span>
    <script>
       function animate(obj, target) {
           var inner = setInterval(function () {
               if (obj.offsetLeft >= target) {
                   clearInterval(inner)
               }
               obj.style.left = obj.offsetLeft + 1 + 'px'
           },30)
       }
       var div = document.querySelector('div');
       var span = document.querySelector('span');
       animate(div, 200);
       animate(span, 300);

    </script>
</body>

</html>
動畫封裝 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button>點擊夏雨荷才走</button>
    <div></div>
    <span>夏雨荷</span>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var span = document.querySelector('span');

        function move(obj, target) {
            clearInterval(obj.tinner); // 防止多次點擊
            obj.tinner = setInterval(function () {
                if (obj.offsetLeft >=target) {
                clearInterval(tinner)
                }
                obj.style.left = obj.offsetLeft + 1 + 'px'
            },10)
        }
        move(div, 300);

        btn.addEventListener('click', function () {
            move(span,400)
        })


    </script>
</body>

</html>
不同動畫
緩動動畫
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button>點擊夏雨荷才走</button>
    <span>夏雨荷</span>
    <script>
        // 緩動動畫函數封裝obj目標對象 target 目標位置
        // 思路：
        // 1. 讓盒子每次移動的距離慢慢變小， 速度就會慢慢落下來。
        // 2. 核心演算法：(目標值 - 現在的位置) / 10 做為每次移動的距離 步長
        // 3. 停止的條件是： 讓當前盒子位置等於目標位置就停止定時器
        function animate(obj, target) {
            // 先清除以前的定時器，只保留當前的一個定時器執行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步長值寫到定時器的裡面
                var step = (target - obj.offsetLeft) / 30;
                if (obj.offsetLeft == target) {
                    // 停止動畫 本質是停止定時器
                    clearInterval(obj.timer);
                }
                // 把每次加1 這個步長值改為一個慢慢變小的值  步長公式：(目標值 - 現在的位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';

            }, 15);
        }
        var span = document.querySelector('span');
        var btn = document.querySelector('button');

        btn.addEventListener('click', function() {
                // 調用函數
                animate(span, 500);
            })
            // 勻速動畫 就是 盒子是當前的位置 +  固定的值 10 
            // 緩動動畫就是  盒子當前的位置 + 變化的值(目標值 - 現在的位置) / 10）
    </script>
</body>

</html>
原理 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button class="btn500">點擊夏雨荷到500</button>
    <button class="btn800">點擊夏雨荷到800</button>
    <span>夏雨荷</span>
    <script>

    function animate(obj, target) {
        // 清理定時器，防止多次點擊
        clearInterval(obj.timer);

        obj.timer = setInterval(function () {

            // 把我們步長值改為整數 不要出現小數的問題
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);

            // 到達目標就清除
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
            }

            obj.style.left = obj.offsetLeft + step + 'px'

        }, 15);
    }

    var btn500 = document.querySelector('.btn500');
    var btn800 = document.querySelector('.btn800');
    var span = document.querySelector('span');

    btn500.onclick = function () {
        animate(span, 500);
    };

    btn800.onclick = function () {
        animate(span, 800);
    }


    </script>
</body>

</html>
緩動動畫數值間移動 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button class="btn500">點擊夏雨荷到500</button>
    <button class="btn800">點擊夏雨荷到800</button>
    <span>夏雨荷</span>
    <script>

    function animate(obj, target, callback) {
        // 清理定時器，防止多次點擊
        clearInterval(obj.timer);

        obj.timer = setInterval(function () {

            // 把我們步長值改為整數 不要出現小數的問題
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);

            // 到達目標就清除
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);

                // 回調函數
                if (callback){
                    callback()
                }
            }

            obj.style.left = obj.offsetLeft + step + 'px'

        }, 15);
    }

    var btn500 = document.querySelector('.btn500');
    var btn800 = document.querySelector('.btn800');
    var span = document.querySelector('span');

    btn500.onclick = function () {
        animate(span, 500);
    };

    btn800.onclick = function () {
        animate(span, 800, function () {
            span.style.backgroundColor = 'red';  // 回調函數
        });
    }


    </script>
</body>

</html>
緩動動畫回調函數 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .sliderbar {
            position: fixed;
            right: 0;
            bottom: 100px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            color: #fff;
        }

        .con {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 40px;
            background-color: purple;
            z-index: -1;
        }
    </style>
    <script src="animate.js"></script>
</head>

<body>
    <div class="sliderbar">
        <span>←</span>
        <div class="con">問題反饋</div>
    </div>

    <script>
        // 獲取元素
        var sliderbar = document.querySelector('.sliderbar');
        var con = document.querySelector('.con');

        sliderbar.onmouseenter = function () {
            animate(con, -160, function() {
                // 當我們動畫執行完畢，就把 ← 改為 →
                sliderbar.children[0].innerHTML = '→';
            });
        };

        sliderbar.onmouseleave = function () {
            animate(con, 0, function() {
                // 當我們動畫執行完畢，就把 → 改為 ←
                sliderbar.children[0].innerHTML = '←';
            });
        }



    </script>
</body>

</html>
緩動動畫底部


相關資料: https://github.com/1515806183/html-code/tree/master/wapapi-04


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 輪播圖與圖片查看器
    記錄下兩款好用的輪播圖插件： Swiper 官網：https://www.swiper.com.cn/ slick 官網：http://kenwheeler.github.io/slick/ 中文詳解參考：https://www.awesomes.cn/repo/kenwheeler/slick 圖 ...
  • setInerval實現圖片滾動離開頁面後又返回頁面時圖片加速滾動問題解決
    問題： setInerval實現圖片滾動，離開頁面後又返回頁面時圖片加速滾動 代碼本身實現方案： 在每次頁面載入的時候會清除定時器。 問題產生原因： 由於在載入了圖片滾動的頁面之後，又去到了其他頁面，但是定時器沒有停止，而頁面又沒有顯示在用戶面前，當返回頁面的時候，就會把之前定時器中已經移動的圖片動 ...
  • 一個毫無名氣的Web前端人士知識小結
    點我！ ...
  • CSS position元素定位屬性
    本文主要是對CSS 的定位屬性基礎學習，寫了一些實際使用的示例。 屬性定義和語法 定義：指定一個元素在文檔中定位方式，可以通過left，right，top，bottom調整元素的位置。 用法： div{ positon:static; } 賦值： static：預設值。元素根據正常的文檔流進行排列， ...
  • 學習 CSS 之用 CSS 3D 實現炫酷效果
    一、前言 把大象關進冰箱需要幾步？三步，把冰箱門打開，把大象關進去，把冰箱門關上。 用 CSS 實現 3D 效果需幾步？三步，設置透視效果 perspective，改變元素載體為 preserve-3d，對元素進行 3D 轉換操作。 perspective 屬性決定了我們從什麼地方查看元素，定義時的 ...
  • vue-苟曰的老闆不發工資230行原創js代碼寫個掃雷小游戲
    上gif： 1.開局提示動畫 2.游戲中狀態提示 3.開掛模式提示 4.計時器 5.游戲模式掃雷成功，藍色進度條表示當次掃雷的完成度 6.若當次時間小於最佳記錄，則更新最佳記錄，如果最佳記錄小於設置的某個值，解鎖對應彩蛋 7.開掛模式全部掃雷成功不會記錄到最佳時間 ...
  • IDEA常用快捷鍵
    Alt+Insert 實現重載 tostring Alt+Enter 自動生成結果類型（定義類型變數） Ctrl+Shift+空格 可以在new關鍵字之後使用智能類型代碼完成來實例化期望類型的對象 Ctrl+B 跳轉到定義變數源 Alt+F7查找所有引用 ...
  • zepto中的事件
    ready與onload的區別： <script> //DOM載入完畢（不包括圖片等） $(document).ready(function(){ }) //全部文件載入完畢（html文件+css文件+js文件+圖片等） window.onload=function(){ } </script> 綜 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類