通過時間扭曲實現緩動動畫

oogh 發布于2019-08-21 14:29 / 698人閱讀

摘要：通過時間扭曲實現緩動動畫經常會見到各類緩動函數，在里面有現成的等緩動效果直接用。這次的實踐在一個封裝的基礎上，請參考精靈封裝緩動動畫的本質，是在單位時間內移動不同的距離。

通過時間扭曲實現緩動動畫

經常會見到各類緩動函數，在CSS里面有現成的bounce、elastic等緩動效果直接用。如果在canvas動畫中，我們要實現這些緩動函數。直接去思考怎么處理挺頭疼的，介紹一種不錯的實現方式，源自《HTML5 Canvas核心技術》。

這次的實踐在一個封裝的基礎上，請參考：canvas精靈封裝

Begin

緩動動畫的本質，是在單位時間內移動不同的距離。

一個簡單的公式：距離 = 速度 × 時間；

要實現距離緩動，只有兩種方式：

要么保持時間正常流動，實現速度緩動；

要么保持速度不變實現時間扭曲；

下圖是elastic效果的距離與時間函數，我亂拿了一個三角函數圖像，忽略掉負軸就好

△V = △S / △T，理論上對距離/時間曲線進行求導，得到速度的變化曲率，改變速度也能實現。

這次實現的是保持速度不變，扭曲時間實現緩動：

1、每個動畫時間固定，通過時間能獲取到動畫進度：

先給出時間扭曲函數：

f(x) = ((1 - cos(x * pi * 3)) * (1-x)) + x

轉換成代碼：

var makeElastic = function (passes) {// passes是跳動的次數
       passes = passes || 3;
       return function (percentComplete) {
           return ((1-Math.cos(percentComplete * Math.PI * passes)) *
               (1 - percentComplete)) + percentComplete;
    };
};

函數圖像：

通過Sprite封裝的behavior來實現時間扭曲

var moveBall = {
        updateBallPosition: function(elapsed){
            if (arrow === LEFT){
                ball.left -= ball.velocityX * (elapsed/1000);
            } else{
                   ball.left += ball.velocityX * (elapsed/1000);
            }
        },
        execute: function(ball, context,time){
            // 核心！
            // 這里的animationElapsed是被扭曲過的時間
            // getElapsedTime()就是上面的makeElastic
            // 經過一些封裝，傳入t得出扭曲過的時間
            var animationElapsed = pushAnimationTimer.getElapsedTime()，
                elapsed;
                
            elapsed = animationElapsed - this.lastTime;
            this.updateBallPosition(elapsed);
            
        }
    }

GPU云服務器云服務器實現加載動畫 javascript實現動畫通過消息隊列實現 html 時間軸動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87925.html

可能是最全的前端動效庫匯總

摘要：非常的龐大，而且它是完全為設計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一。可能是創建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性。可以通過安裝吊炸天了，接近現實生活中的物理運動碰撞慣性動畫庫。收集日期為2019-02-28，★代表當時的該項目在github的star數量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎庫，是許多基礎動...

afishhhhh 2019-05-23 16:24 評論0 收藏0
React Motion 緩動函數剖析

摘要：大家可以嘗試使用的，配置一個合適的勁度系數和空氣阻力。所做的事，只不過自己實現了一套緩動函數。根據經典力學的觀點，世界上所有的原子每時每刻仿佛都會根據當前速度、受力和位置計算出下一刻的速度、受力和位置。上帝有一臺超級計算機嗎？非也，反而計算機是我們利用原子的這些特性拼裝出來的。現在，我們卻要用計算機，像上帝那樣，再造一個世界。我不知道這個世界上有沒有仿世學，但是既然動畫是要模仿現實...

wfc_666 2019-08-19 17:18 評論0 收藏0
【前端優化】動畫幾種實現方式總結和性能分析

摘要：備注沒整理格式，抱歉動畫實現的幾種方式性能排序實現方式自身調用調用的定時器值推薦最小使用的原因即每秒幀為什么倒計時動畫一定要用而避免使用兩者區別及引發的線程討論線程討論為什么單線程是的一大特性。備注：沒整理格式，抱歉動畫實現的幾種方式：性能排序js < requestAnimationFrame 3->4->2. 那么在來看你這段代碼。 var t = true; window...

IamDLY 2019-08-23 15:35 評論0 收藏0
JS—動畫緩動—tween.js

摘要：動畫運動算法線性勻速運動效果二次方的緩動三次方的緩動四次方的緩動五次方的緩動正弦曲線的緩動指數曲線的緩動圓形曲線的緩動指數衰減的正弦曲線緩動超過范圍的三次方緩動指數衰減的反彈緩動。 requestAnimFrame兼容 window.requestAnimFrame = (function (callback,time) { return window.requestAnima...

wangxinarhat 2019-08-26 12:11 評論0 收藏0
CSS Animations vs Web Animations API

摘要：方法接受兩個參數關鍵幀和持續時間。第一個參數，關鍵幀，是一個對象數組，每個對象都是動畫中的一個關鍵幀。為我們提供了兩種不同的方式設置緩動在我們的關鍵幀數組或我們的選項對象內。實際上，這些緩動應用在關鍵幀之間，而不是整個動畫。作者：Ollie Williams 原文：CSS Animations vs Web Animations API 在 JavaScript 有一個原生動畫...

2501207950 2019-08-29 12:50 評論0 收藏0