看Hilo如何描繪HTML5互動世界——補間動畫

在電影裡或者熒屏上，我們經常看到下面的特寫鏡頭。

這種特寫鏡頭（除了最後的效果部分）和我們的今天要說的補間動畫有些相似。在實際操作時，有些場景下我們沒有必要刻畫遊戲物體每一幀的位置顏色等其他資訊。 而是使用一種計算方法，來替我們告訴這些遊戲物件在每一幀裡應該做怎樣的變換。這一類動畫我們可以寬泛的稱之為補間動畫。技術描述上可能很寬泛，比如叫transition，緩動，過渡等等。

有哪些工具和方法

CSS3 transition

CSS3提供transition的方式來對物體做緩動，例如我們想改變一個標籤的寬度值：

div
{
    width:100px;
    transition: width linear 2s;  
}

假設一個div元素的當前寬度為300px，我們想讓這個div在2秒內做從300px到100px的線性漸變。我們就可以指定一個div的元素的transition 屬性值為width，即對物體的寬度做過渡（transition）。

transition 屬性是一個簡寫屬性，用於設定四個過渡屬性：

transition-property
transition-duration
transition-timing-function
transition-delay

transition-property屬性指定了需要對哪些屬性做過渡（transition），後文中會提到。transition-duration指定了過渡效果的時間，而 transition-timing-function則指定過渡的計算方式，CSS3可以使用預設的幾種過渡函式，也可以直接使用貝塞爾曲線函式。下面是可選的幾種列舉值：

值	描述
linear	規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。
ease-in	規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。
ease-out	規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。
ease-in-out	規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值。

那麼觸發過渡（transition）的條件是什麼呢？可以是css觸發：

div:hover
{
    width:300px;
}

也可以使用js來觸發：

document.querySelector("div#id").style.width = "300px";

通過任意可能的方式改變div元素的寬度值即可觸發這種過渡效果。

另外，如果想延緩動畫觸發的時間，可以設定transition-delay的值，單位為秒（s）。

利用指令碼實現一個補間動畫

CSS3的過渡（transition）介面簡單，在做一些簡單的動畫時比較實用。但是在需要一些邏輯控制的場景下，指令碼控制更適合遊戲動畫的邏輯設計。

function easeInCubic(t) {
    return Math.pow(t, 3);
}

var el = document.querySelector(`#easeOutCubic`);
var t = 0;
var step = 0.01;
var startValue = 0;
var endValue = 100;
function easeIn(){
    t += step;
    var blue = startValue + easeInCubic(t) * (endValue - startValue);
    
    el.style.backgroundColor = `rgb(100,100,` + blue + `)`;
    
    requestAnimationFrame(easeIn);
};

easeIn();

過渡函式

上面的程式碼描述了緩入（ease-in）的動畫效果，實際上是利用了Y= X^3（Cubic） 的部分弧線效果，如下圖紅線標註部分。

示例程式碼作用物件為UI元素的背景顏色值（Blue）, 我們可以控制步長step來控制顏色變化的速度。

easeInCubic 通過控制輸入當前（迭代）步長或時間來確定輸出值，如下圖 ：

除了Y = X^ 3這條曲線可以模擬出ease-out的效果，諸如 Y = X ^ k 型別的曲線，如Y = X ^ 4（Quart） ，Y = X ^ 5 （Quint），另外，三角函式和指數函式也可以做到類似的效果。過渡函式詳細的分類

實際上上文提到的CSS3的過渡函式介面cubic-bezier(n,n,n,n) 也是一種過渡函式的表達方式，如下圖，P1，P2是2個控制點，兩個點的座標對應cubic-bezier(n,n,n,n)四個引數：

cubic-bezier(n,n,n,n)只能設定兩個控制點的位置，顯然，它能所表達的過渡動畫種類不如指令碼表達的豐富。

Hilo提供的過渡動畫介面

看完CSS3的過渡（transition）介面和原生指令碼實現，我們再來看看Hilo裡提供的補間動畫介面——Tween （點這裡檢視詳細Api文件）：

ticker.addTick(Hilo.Tween);//需要把Tween加到ticker裡才能使用

var obj = {x:5, y:10, alpha: 0};
Hilo.Tween.to(obj, {
    x:100,
    y:20,
    alpha:0
}, {
    duration:1000,
    delay:500,
    ease:Hilo.Ease.Quad.EaseIn,
    onUpdate: function(ratio,tween){
        console.log(tween.target.x,tween.target.y,tween.target.alpha);
    },
    onComplete:function(){
        console.log("complete");
    }
});

在做過渡動畫時，Hilo需找指定一個補間物件，這個物件可以是Hilo的遊戲物件，如View型別物件。也可以是普通物件，通過修改普通物件的屬性值在onUpdate中間接修改遊戲本體物件，如示例程式碼。

onUpdate會根據ticker的指定的幀率重複執行。在動畫完成後onComplete 會被呼叫。

另外，Hilo的過渡動畫可以進行過渡動畫組合呼叫， 使用link就能將一組過渡動畫關聯起來。

var box1 = boxes[0], box2 = boxes[1];

Tween.to(box1, {y:100}, {
    duration: 1000
}).link(Tween.to(box2, {y:100}, {
    duration: 1000
}));

使用這種關聯，我們可以對多個物件做連續的過渡動畫。Demo1地址，Demo2地址，Demo3地址，效果如下圖所示：

可被補間動畫描述的屬性

開題的兩組慢鏡頭，除了鏡頭後半部分物體發生的形變，前半部分鏡頭都對運動物體的位置做了緩動。除了位置，我們還會經常對哪些屬性做緩動處理呢？

實際上，和尺寸、位置及顏色（color）相關的數值屬性都是可以做緩動的。但是CSS3在做過渡動畫時會有一些屬性限制，而Hilo是可以對所有的屬性做過渡動畫的。

CSS3 可以做過渡效果的屬性：

屬性名稱	型別
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

Reference

• Hilo開源地址（歡迎加入Hilo開發）
• Hilo官方文件
• 緩動函式速查表