iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 9
2

之前做的動畫效果很簡單,只有右移跟下移的直線動作。另一個基本的動畫是依照弧線來移動,就試著把它實作出來。

jQuery的動畫效果,預設會有加減速,而在PowerPoint的動畫中也會有,雖然作法其實不一樣,但是先來試試jQuery的實作。

調整過的試做:example004.html

加入弧線移動動畫

在PowerPoint加入弧線移動的動畫時,在移動的資料中會有像這樣的資料:

<p:animMotion path="M 0 0  L 0.067 0.05331  C 0.081 0.06531  0.102 0.07198  0.124 0.07198  C 0.149 0.07198  0.169 0.06531  0.183 0.05331  L 0.25 0  E">
</p:animMotion>

path是定義移動路徑,語法是由字母加上數個數字參數構成。其中:

  1. M:是Move To的簡寫,後面接一組座標
  2. E:是End
  3. L:是Line To的簡寫,後面接一組座標,表示從目前座標畫一條直線到指定的座標
  4. C:是Curve To的簡寫,後面接三組座標,表示二次貝茲曲線的三個座標參數

不過...一開始就做這些有點複雜,而且他給的座標其實沒連續XD,還要自己插進Line To的動作接起來,所以我先簡化成一個C來操作:

<p:animMOtion path="M 0 0  C 0 0 0.125 0.125 0.25 0  E">
</p:animMOtion>

至於要怎麼移動...可以參考維基百科的說明:貝茲曲線

裡面有定義二次貝茲曲線的公式(圖片來自維基百科):

一個簡單的實作就是:

function define_quadratic_bezier(x0, y0, x1, y1, x2, y2) {
    return function (t) {
        if (t < 0 || t > 1) throw "[define_quadratic_bezier] t must between 0 and 1.";
        var px = Math.pow(1-t, 2) * x0 + 2 * t * (1-t) * x1 + Math.pow(t, 2) * x2;
        var py = Math.pow(1-t, 2) * y0 + 2 * t * (1-t) * y1 + Math.pow(t, 2) * y2;
        return [px, py];
    };
}

使用上先呼叫var b = define_quadratic_bezier(...)定義好曲線,然後以t作為參數呼叫b(t),就可以算出在t這個位置的x, y座標。

在繪製動畫時,這個t就是繪製進度,例如進度到百分之四十五時,t就是0.45。

Canvas支援二次及三次貝茲曲線的繪製,不過我們無法傳t給他取得t時的座標...所以這一段只能自己做了。

加入加減速效果

jQuery的動畫,有一個參數叫做easing,可以調整移動的速度。預設的效果是swing,透過它來調整t,就能做出加減速的效果。

這個函數很簡單:

function easing(p) {
    return 0.5 - Math.cos(p * Math.PI) / 2;
}

傳入一個介於0與1之間的參數,會看到越遠離0.5的時候,t的變化會變小,所以套用時,隨著動畫進度,就會有加減速的效果。

初步處理簡報縮放

除了這些部分,也稍微嘗試了一下在頁面載入時,自動根據頁面大小來縮放簡報,這樣簡報呈現時會自動滿版。之前已經處理過簡報大小的座標轉換,所以並不會花太多時間。

另外一個問題是全螢幕支援,就放到後面慢慢做。這次鐵人賽我有看到有人介紹這個:screenfull.js,可以更方便地做全螢幕操作。不過我的需求是在進入全螢幕時觸發事件,然後根據畫面來調整簡報大小,問題是目前瀏覽器對於進入、離開全螢幕事件的支援還很差...所以可能要考慮用古老的setInterval來解決XD

其他問題

其實還有問題需要額外調整,就是動畫的方向,目前只有左到右,上到下的方向會正確跑XD,不過有點懶,之後再調整...


上一篇
08 - 使用node.js取得pptx資訊(1) - 建立檔案關連性列表
下一篇
10 - 開始剖析簡報資料
系列文
30天實作線上簡報播放機制31

1 則留言

1
海綿寶寶
iT邦大神 1 級 ‧ 2016-12-22 19:50:31

加入加減速效果

費大公果然是守信用的人
前面說要加這個效果
就加這個效果
/images/emoticon/emoticon34.gif

我要留言

立即登入留言