11 《每週一點canvas動畫》緩動動畫

本系列文章**檔案

前面的章節我們介紹了許多基本的動畫，在本節我們將使用這些基本的動畫來建立一些高階動畫。今天我們介紹的第乙個高階動畫叫做緩動動畫(ease),也許在寫css動畫的時候已經接觸過ease這個概念。但我們今天要介紹的是如何在canvas中實現這樣的動畫效果。本章主要內容：

百分比運動的概念

定點緩動動畫

非定點緩動動畫

只能用在運動中嗎

百分比運動的概念是我們講解緩動動畫，包括下一節彈性動畫的核心。這兩個動畫的核心概念都是基於百分比運動，只是作用的物理元素不同。這裡我們把概念都一起介紹了，下一節就可以直接上菜。

緩動動畫和彈性動畫這兩種動畫，都是讓乙個物體從當前位置移動到乙個我們設定的目標位置。在緩動動畫中，物體是由快到慢的滑行到目標位置，然後停止。在彈性動畫中，物體運動到目標位置的時候，並不會立刻停止而是以目標位置為中心點做乙個類似彈簧的往復運動，最終會停止在目標位置。為了讓大家有個更直觀的認識，來兩張**。

緩動動畫(easing)

彈性動畫(spring)

兩種動畫都有著一樣的流程：

設定目標位置

計算到目標位置的距離

根據距離百分比計算速度或加速度

這兩種動畫唯一的不同是：緩動動畫中，距離的百分比作用於速度，物體距離目標位置越遠，運動的速度就越大，隨著物體距離目標位置越來越近，速度逐漸降低為零，停止在目標位置。彈性動畫中，距離的百分比作用於加速度，同樣是距離目標位置越遠，加速度越大，隨著距離越來越近，加速度最終為零。

在上圖的緩動動畫中我們可以看到，小球運動到目標位置的速度，有乙個由快到慢的過程。這裡我們是怎樣實現的呢？其實原理很簡單：

easing就是我們設定的緩動引數，每一幀都乘以距離，隨著距離的不斷減小，速度也就不斷減小。光說不練假把式，上**：

效果圖這裡就不上了，和上面展示的一樣。這裡只是展示了水平方向的運動，你也可以加上豎直方向或者任意的目標位置：

var targetx = 任意位置;
var targety = 任意位置;

然後再動畫迴圈中：

var vx = (targetx - ball.x)*easing; 
var vy = (targety - ball.y)*easing;

ok,我們就可以得到向任意位置運動的緩動動畫了！是不是很簡單。

當然，這裡還有個問題。為了提公升動畫的效能，在這裡我們可以做個條件限制。在動畫迴圈裡：

var stopani = window.requestanimationframe(drawframe, canvas);
...var dx = targetx - ball.x;
if(math.abs(dx)<1)else
...

說到非定點緩動動畫，你有沒有想到在前幾章裡講到的跟隨滑鼠運動的箭頭啊！好吧，可憐的滑鼠我們這次又要用到你了。我們讓滑鼠的位置作為我們的目標位置（target），然後讓小球做緩動動畫，看看能出現什麼樣精彩的效果.

看這個動畫看上去是比不是跟家的平滑有質感呢？(原諒我，我也不知道質感是個什麼鬼！！！)，上**：

window.onload = function()())
}

是不是趕腳有點過於簡單了呢？我們來個難點的，再來乙個小球，讓它跟著前乙個小球走。效果圖是這樣的：

**呢我這裡就不例出來了，因為炒雞簡單！！！只要改改上面的**就可以了。

緩動動畫只能用在運動中嗎？這肯定是不可嗯那個的啦。為了讓你更好的理解，這裡我們舉幾個緩動動畫用在其他方面的例子

1.旋轉（rotation）

設定當前旋轉速度和目標旋轉速度。當然這裡我們要引入一些物體，比如我們以前用過的箭頭arrow.

var rotation = 90,
targetrotation = 270;
//then ease it:
rotation += (targetrotation - rotation) * easing;
arrow.rotation = rotation * math.pi / 180;

2.顏色（colors）

設定初始的顏色值

var red = 255,
green = 0,
blue = 0,
redtarget = 0,
greentarget = 0,
bluetarget = 255;

然後在drawframe中，easing it:

red += (redtarget -red) * easing;
green += (greentarget -green) * easing;
blue += (bluetarget -blue) * easing;

然後把這三個值轉換為乙個16進製制的值：

var color= red << 16 | green  << 16 | blue

2.透明度（transparency）

設定透明度：

var alpha = 0,
targetalpha = 1;
//動畫迴圈中
alpha += (targetalpha - alpha) * easing;
ball.color = "rgba(255, 0, 0," + alpha + ");

ok,本章內容就到這裡了，更多高階緩動動畫看這裡緩動動畫的原理及使用方法已經告訴你了，能創造出什麼樣amazing的動畫就看你的想象力了。

下一節，我們將彈性動畫，敬請期待！！！

11 《每週一點canvas動畫》緩動動畫

23 《每週一點canvas動畫》 3維環境搭建

一每週一學 Harris角點

每週一點小技術之不是我說的

11 《每週一點canvas動畫》 緩動動畫

23 《每週一點canvas動畫》 3維環境搭建

一 每週一學 Harris角點

每週一點小技術之不是我說的

相關推薦

11 《每週一點canvas動畫》緩動動畫

一每週一學 Harris角點