開源跨平臺移動項目Ngui【Action動做系統】

Ngui簡介

這是一個GUI的排版顯示引擎和跨平臺的GUI應用程序開發框架，基於NodeJS/OpenGL，這也是第一個在移動端Android/iOS融合NodeJS的前端GUI項目，至此JavaScript成爲了真正意義上先後端通吃的語言。

Ngui的目標：在此基礎上開發GUI應用程序可擁有開發WEB應用般簡單與速度同時兼顧Native應用程序的性能與體驗。

• 開源跨平臺移動項目Ngui【簡介】

• 開源跨平臺移動項目Ngui【入門】

• 開源跨平臺移動項目Ngui【視圖與佈局系統】

• 開源跨平臺移動項目Ngui【Action動做系統】

• 開源跨平臺移動項目Ngui【CSS樣式表規則及用法】

• Ngui API 文檔

什麼是Action動做

什麼是動做呢？顧名思義它是管理運行環境中全部動做的中樞，通俗點講就是動畫。它也是總個框架核心組件之一，它提供動做的建立、刪除、插入，以及提供對關鍵幀與過渡的諸多操做。關鍵幀的過渡能夠使用三次貝塞爾曲線，或內置的曲線 linear/ease/ease_in/ease_out/ease_in_out，這也和大多數主流框架以及遊戲引擎相似。

動做是什麼原理

動做怎麼驅動視圖進行流暢運動的呢？其實原理很簡單，咱們能夠把動做系統看作一個獨立的系統與視圖或渲染徹底不相關。它們之間的關係是動做自身的變化最終會映射調視圖，這個過程是經過調用視圖暴露的公有方法或屬性來完成的。這個過程徹底是單向的，且視圖不會向動做發出任何指令。
好比說如今建立了一個新的關鍵幀動做，給它設置兩個關鍵幀，且x的值通過1秒鐘從0變化到100。這個過程是動做自身發生的變化而且帶動與之相關的視圖一同發生改變，請記住這個過程視圖是被動的，而動做纔是主動的發生改變。

import { ngui, Div } from 'ngui';
import KeyframeAction from 'ngui/action';
var div = new Div();
var act = new KeyframeAction();
act.add({ x: 0, time: 0 });
act.add({ x: 100, time: 1e3/*毫秒*/ });
div.width = 50;
div.height = 50;
div.backgroundColor = '#f00';
div.action = act;
div.appendTo(ngui.root);
act.play();

動做類別

如下是框架提供的幾個類型與繼承聯繫

注：帶*號的爲抽象類型或協議沒有構造函數

• Action*
  • GroupAction*
    • SpawnAction
    • SequenceAction
  • KeyframeAction

Action*

這是全部動做的基礎類型，也是抽象類型不能夠直接被實例。
提供了一些基本的api操做，播放，中止，跳轉 等，具體可查看API手冊。

GroupAction*

這是個集合的動做類型，提供子動做的添加刪除插入。有了子動做就能夠幫你實現更加複雜的動畫場景。
它也有兩個具體的子類型 SpawnAction 、SequenceAction。

SpawnAction

並行動做顧名思義即就是它的子動做都是並行運行的。而且以最長子動做的時長作爲自身的時長來執行動做，較短時長的子動做則在結尾等待動做的結束或一個循環的的終止。

SequenceAction

串行動做這個比較好理解，子動做一個接着一個執行，所有執行完成後結束或開始新的循環。

KeyframeAction與Frame

關鍵幀動做這是動做系統的核心。全部動做的實現均在這裏完成它是動做系統基本單元，前面的GroupAction只有包含KeyframeAction類型的動做纔有真正的義意。
而關鍵幀動做又包含理更加基本的元素關鍵幀Frame,關鍵幀包含的屬性與CSS屬性是同名的且與全部視圖的屬性都是對應關鍵。通俗的說好比View上會有x屬性而Frame上也會有x屬性，若是關鍵幀上有視圖上並不存在的屬性，那麼這個屬性對視圖是無效的。好比View上就不存在width屬性那麼這個屬性的改變不會影響到View,但若是綁定的視圖是Div那麼width的改變必定會影響到它，這與CSS樣式表相似。

看下面的例子:

// 這是有效的動做
var act1 = new KeyframeAction();
var div = new Div();
div.backgroundColor = '#f00';
act1.add({ width: 10, height: 10 });
act1.add({ width: 100, height: 100, time: 1e3 });
div.action = act1;
act1.paly();
// 這是無效的
var act2 = new KeyframeAction();
var view = new View();
act2.add({ width: 10, height: 10 });
act2.add({ width: 100, height: 100, time: 1e3 });
view.action = act2;
act2.paly();

View.action屬性

View.action作爲View的一個屬性可接收多種類型的參數，以前給你們展現的例子中建立動做是很繁瑣的，但active提供多種類型的參數類型的支持，包括json數據與Action對像實例自己。前面的例子中已介紹過Action方式，下面着重說json數據方法。你們也可研讀ngui.js與action.js中的源代碼，其它View.action屬性只是作簡單的調用轉發，功能的實現實際上是在action.js文件中的create()方法裏實現的。

看例子:

// 這是建立KeyframeAction
var div = new Div();
div.action = {
    keyframe: [
        { x: 0 },
        { x: 100, time: 500 },
        { x: 0, time: 1000 },
    ],
    loop: -1,
};
var div2 = new Div();
div.action = [
    { x: 0 },
    { x: 100, time: 500 },
];

// 這是建立SequenceAction
var div3 = new Div();
div3.action = {
    seq: [
        [ // 這是個子KeyframeAction
            { x: 0 },
            { x: 100, time: 1e3 },
        ],
        { // 這是個子SpawnAction
            spawn: [
                [ // 這是個子KeyframeAction
                    { y : 100 }, { y: 200, time: 2e3 }
                ],
                [ // 這是個子KeyframeAction
                    { width : 200 }, { width: 100, time: 1e3 }
                ],
            ] 
        }
    ],
};

// 這是建立SpawnAction
var div4 = new Div();
div4.action = {
    spawn: [ // 這裏只包含一個子KeyframeAction
        {x: 0}, {x: 200, time: 2e3} 
    ]
};

你們能夠看到上面的例子中有4種典型的建立方法。主要看你給的json數據是否存在這三個屬性seq、spawn、keyframe，對應SpawnAction、SequenceAction、KeyframeAction，外加一個json數據類型檢查，數據類型爲數組就建立KeyframeAction。而且這能夠嵌套使用。

View.transition()方法

這是一個簡單建立簡單過渡動畫的方法，實現原型爲action.js的transition()方法，與View.action同樣View.transition()只作簡單的轉發。

典型應用：

view.transition({
    time: 1000,
    y: 100, 
    x: 100,
})

具體可查閱手冊。

View.onActionKeyframe與View.onActionLoop

這兩個事件是由動做產生併發送的。

• View.onActionKeyframe爲動做執行到達關鍵幀時觸發。由於畫面渲染是固定的幀率，觸發老是發生在幀的渲染時，因此可能會與理想中的時間值有所偏差提早或延後，這個延時值會保存在事件數據的delay上。提早爲負數，延時爲正數。

• View.onActionLoop動做循環開始時觸發，第一次執行動做並不會觸發。一樣它也會有延時，也一樣記錄在delay。