摘要：與關(guān)鍵幀動(dòng)作這是動(dòng)作系統(tǒng)的核心。而關(guān)鍵幀動(dòng)作又包含理更加基本的元素關(guān)鍵幀關(guān)鍵幀包含的屬性與屬性是同名的且與所有視圖的屬性都是對(duì)應(yīng)關(guān)鍵。為動(dòng)作執(zhí)行到達(dá)關(guān)鍵幀時(shí)觸發(fā)。

這是一個(gè)GUI的排版顯示引擎和跨平臺(tái)的GUI應(yīng)用程序開(kāi)發(fā)框架，基于NodeJS/OpenGL，這也是第一個(gè)在移動(dòng)端Android/iOS融合NodeJS的前端GUI項(xiàng)目，至此JavaScript成為了真正意義上前后端通吃的語(yǔ)言。

Ngui的目標(biāo)：在此基礎(chǔ)上開(kāi)發(fā)GUI應(yīng)用程序可擁有開(kāi)發(fā)WEB應(yīng)用般簡(jiǎn)單與速度同時(shí)兼顧Native應(yīng)用程序的性能與體驗(yàn)。

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【簡(jiǎn)介】

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【入門(mén)】

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【視圖與布局系統(tǒng)】

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【Action動(dòng)作系統(tǒng)】

開(kāi)源跨平臺(tái)移動(dòng)項(xiàng)目Ngui【CSS樣式表規(guī)則及用法】

Ngui API 文檔

什么是動(dòng)作呢？顧名思義它是管理運(yùn)行環(huán)境中所有動(dòng)作的中樞，通俗點(diǎn)講就是動(dòng)畫(huà)。它也是總個(gè)框架核心組件之一，它提供動(dòng)作的創(chuàng)建、刪除、插入，以及提供對(duì)關(guān)鍵幀與過(guò)渡的諸多操作。關(guān)鍵幀的過(guò)渡可以使用三次貝塞爾曲線(xiàn)，或內(nèi)置的曲線(xiàn) linear/ease/ease_in/ease_out/ease_in_out，這也和大多數(shù)主流框架以及游戲引擎類(lèi)似。

動(dòng)作怎么驅(qū)動(dòng)視圖進(jìn)行流暢運(yùn)動(dòng)的呢？其實(shí)原理很簡(jiǎn)單，我們可以把動(dòng)作系統(tǒng)看做一個(gè)獨(dú)立的系統(tǒng)與視圖或渲染完全不相關(guān)。它們之間的關(guān)系是動(dòng)作自身的變化最終會(huì)映射調(diào)視圖，這個(gè)過(guò)程是通過(guò)調(diào)用視圖暴露的公有方法或?qū)傩詠?lái)完成的。這個(gè)過(guò)程完全是單向的，且視圖不會(huì)向動(dòng)作發(fā)出任何指令。
比如說(shuō)現(xiàn)在創(chuàng)建了一個(gè)新的關(guān)鍵幀動(dòng)作，給它設(shè)置兩個(gè)關(guān)鍵幀，且x的值經(jīng)過(guò)1秒鐘從0變化到100。這個(gè)過(guò)程是動(dòng)作自身發(fā)生的變化并且?guī)?dòng)與之相關(guān)的視圖一同發(fā)生改變，請(qǐng)記住這個(gè)過(guò)程視圖是被動(dòng)的，而動(dòng)作才是主動(dòng)的發(fā)生改變。

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();

以下是框架提供的幾個(gè)類(lèi)型與繼承聯(lián)系

注：帶*號(hào)的為抽象類(lèi)型或協(xié)議沒(méi)有構(gòu)造函數(shù)

[Action]*

[GroupAction]*

[SpawnAction]

[SequenceAction]

[KeyframeAction]

這是所有動(dòng)作的基礎(chǔ)類(lèi)型，也是抽象類(lèi)型不可以直接被實(shí)例。
提供了一些基本的api操作，播放，停止，跳轉(zhuǎn) 等，具體可查看API手冊(cè)。

這是個(gè)集合的動(dòng)作類(lèi)型，提供子動(dòng)作的添加刪除插入。有了子動(dòng)作就可以幫你實(shí)現(xiàn)更加復(fù)雜的動(dòng)畫(huà)場(chǎng)景。
它也有兩個(gè)具體的子類(lèi)型 [SpawnAction] 、[SequenceAction]。

并行動(dòng)作顧名思義即就是它的子動(dòng)作都是并行運(yùn)行的。并且以最長(zhǎng)子動(dòng)作的時(shí)長(zhǎng)做為自身的時(shí)長(zhǎng)來(lái)執(zhí)行動(dòng)作，較短時(shí)長(zhǎng)的子動(dòng)作則在結(jié)尾等待動(dòng)作的結(jié)束或一個(gè)循環(huán)的的終止。

串行動(dòng)作這個(gè)比較好理解，子動(dòng)作一個(gè)接著一個(gè)執(zhí)行，全部執(zhí)行完成后結(jié)束或開(kāi)始新的循環(huán)。

關(guān)鍵幀動(dòng)作這是動(dòng)作系統(tǒng)的核心。所有動(dòng)作的實(shí)現(xiàn)均在這里完成它是動(dòng)作系統(tǒng)基本單元，前面的[GroupAction]只有包含[KeyframeAction]類(lèi)型的動(dòng)作才有真正的義意。
而關(guān)鍵幀動(dòng)作又包含理更加基本的元素關(guān)鍵幀[Frame],關(guān)鍵幀包含的屬性與CSS屬性是同名的且與所有視圖的屬性都是對(duì)應(yīng)關(guān)鍵。通俗的說(shuō)比如[View]上會(huì)有x屬性而[Frame]上也會(huì)有x屬性，如果關(guān)鍵幀上有視圖上并不存在的屬性，那么這個(gè)屬性對(duì)視圖是無(wú)效的。比如[View]上就不存在width屬性那么這個(gè)屬性的改變不會(huì)影響到[View],但如果綁定的視圖是[Div]那么width的改變一定會(huì)影響到它，這與CSS樣式表類(lèi)似。

看下面的例子:

// 這是有效的動(dòng)作
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();
// 這是無(wú)效的
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]的一個(gè)屬性可接收多種類(lèi)型的參數(shù)，之前給大家展示的例子中創(chuàng)建動(dòng)作是很繁瑣的，但active提供多種類(lèi)型的參數(shù)類(lèi)型的支持，包括json數(shù)據(jù)與Action對(duì)像實(shí)例本身。前面的例子中已介紹過(guò)Action方式，下面著重說(shuō)json數(shù)據(jù)方法。大家也可研讀ngui.js與action.js中的源代碼，其它[View.action]屬性只是做簡(jiǎn)單的調(diào)用轉(zhuǎn)發(fā)，功能的實(shí)現(xiàn)其實(shí)是在action.js文件中的create()方法里實(shí)現(xiàn)的。

看例子:

// 這是創(chuàng)建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 },
];

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

// 這是創(chuàng)建SpawnAction
var div4 = new Div();
div4.action = {
    spawn: [ // 這里只包含一個(gè)子KeyframeAction
        {x: 0}, {x: 200, time: 2e3} 
    ]
};

大家可以看到上面的例子中有4種典型的創(chuàng)建方法。主要看你給的json數(shù)據(jù)是否存在這三個(gè)屬性seq、spawn、keyframe，對(duì)應(yīng)[SpawnAction]、[SequenceAction]、[KeyframeAction]，外加一個(gè)json數(shù)據(jù)類(lèi)型檢查，數(shù)據(jù)類(lèi)型為數(shù)組就創(chuàng)建[KeyframeAction]。并且這可以嵌套使用。

這是一個(gè)簡(jiǎn)單創(chuàng)建簡(jiǎn)單過(guò)渡動(dòng)畫(huà)的方法，實(shí)現(xiàn)原型為action.js的transition()方法，與[View.action]一樣[View.transition()]只做簡(jiǎn)單的轉(zhuǎn)發(fā)。

典型應(yīng)用：

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

具體可查閱手冊(cè)。

這兩個(gè)事件是由動(dòng)作產(chǎn)生并發(fā)送的。

View.onActionKeyframe為動(dòng)作執(zhí)行到達(dá)關(guān)鍵幀時(shí)觸發(fā)。因?yàn)楫?huà)面渲染是固定的幀率，觸發(fā)總是發(fā)生在幀的渲染時(shí)，所以可能會(huì)與理想中的時(shí)間值有所誤差提前或延后，這個(gè)延時(shí)值會(huì)保存在事件數(shù)據(jù)的delay上。提前為負(fù)數(shù)，延時(shí)為正數(shù)。

View.onActionLoop動(dòng)作循環(huán)開(kāi)始時(shí)觸發(fā)，第一次執(zhí)行動(dòng)作并不會(huì)觸發(fā)。同樣它也會(huì)有延時(shí)，也同樣記錄在delay。