Famo.us

[Famous] New Engine 介紹

Famous 更新之後,完全是一種爹不親娘不認的狀態!除了整個 Github 的專案直接捨棄之外,結構上也完全重新來過一次。看著我之前大費周章寫在 Github issue 上面的那些文章,不免有些難過(淚 這一切都是幻覺,嚇不倒我的! 開發環境 全新的結構跟之前落差太大,所以只好重新介紹一遍。這次 Famous 在開發工具上,直接做了一個 CLI 工具,讓你可以直接使用命令列,來建立你的 Famous 專案。 詳情請見:http://famous.org/get-started.

Famo.us

[Famo.us] inputs 模組 Part 2

[UPDATE] Famo.us 官方已捨棄此模組,詳情請看官方 Github 接續著講滑鼠、觸控等其他的模組。 MouseSync 顧名思義,就是跟滑鼠控制相關的同步事件模組,預設值有以下項目, MouseSync.DEFAULT_OPTIONS = { direction: undefined, // 方向 rails: false, // 指定單一方向移動 scale: 1, // 滑鼠軌跡放大倍率 propogate: true // 在文件中加入 mouseleave 事件監聽 }; 常數 這兩個常數是給 direction 所使用的,

Famo.us

[Famo.us] inputs 模組 Part 1

[UPDATE] Famo.us 官方已捨棄此模組,詳情請看官方 Github 在 Famo.us 當中,提供了不少關於輸入(input)的模組,主要是用於接收使用者的操作輸入,諸如滑鼠、捲軸、觸控等等。 輸入控制 常見的輸入控制,除了滑鼠與觸控外,捲軸與手勢動作也包含在這些模組當中,主要有下列輸入模組可以使用, 非輸入模組 Accumulator 累加器,他提供一組累加功能,單純的使用 setter/getter 來加入或是取得你所累加的數字(或是數字陣列 TouchTracker 追蹤觸控輸入,

Famo.us

[Famo.us] SlideShow 模組開發

[UPDATE] Famo.us 官方已捨棄此模組,所以本範例只能在舊有的 Famo.us 上面運行,詳情請看官方 Github 身為農夫,種點菜也是很合理的。 Slideshow 概念是這樣,我們利用左右兩邊的頁面來置換中間的頁面,所以只需要兩段 Transform 來做這個動作。這個東西其實用 Famo.us 幾個模組就能兜出來,只是為了方便起見,所以才把它打包成模組方便使用。 Famo.us 模組 由於 Famo.us 是使用 AMD 的方式來載入外部組件,

Famo.us

[Famo.us] Event 核心與模組介紹

[UPDATE] Famo.us 官方已捨棄此模組,詳情請看官方 Github EventHandler, EventEmitter 這兩項核心很常出現在其他的模組當中,主要是負責事件控制、監聽與觸發,但是他跟 DOM 就沒有關係,單純的是綁在模組或是元件上面。 EventEmitter 核心 是 EventHandler 核心所依賴的核心(沒有之一,用於將事件往下擴散(或是將其子元件事件綁定在自己身上。 方法 emit(type, event) 觸發一個事件 type,並將該方法傳送到底下所屬的所有子處理程序 on(type, handler)

Famo.us

[Famo.us] RenderNode 核心說明

[UPDATE] Famo.us 官方已捨棄此模組,詳情請看官方 Github RenderNode 算是整個 Famo.us 對於元件樹狀結構的核心,他專門用來處理你的元件,在樹狀結構中應該要怎麼長是靠他來處理。 RenderNode 核心 這個核心很特殊,你應該也幾乎沒有機會能直接使用他。他的初始化必須要是一個可渲染(renderable)的元件,而這個元件經過初始化後,自身就會轉換成 RenderNode 物件,來提供給 Famo.us 的引擎去做渲染動作。 什麼叫做可渲染元件?官方定義的有, core/Group core/

Famo.us

[Famo.us] Scene 核心說明

[UPDATE] Famo.us 官方已捨棄此模組,詳情請看官方 Github 這個核心模組是用於提供一個已經定義好的結構化場景,定義什麼呢? Scene 核心 說穿了,他等同於一組 Modifier 物件,定義了以下這些事情, translate rotate rotateX rotateY rotateZ rotateAxis scale skew 以上必須要是 Transform 模組的相對應物件。 matrix3d 以上必須要是一個 Function 用以返回 matrix3d 的數組(陣列數組

Famo.us

[Famo.us] ViewSequence 核心說明

標題與內容不符(不解釋 ViewSequence 核心 他是用來儲存一個序列化資料的模組,所以雖然字面上是 ViewSequence,但是骨子裡跟 View 沒有關係。 初始化方法 這個模組初始化可以傳入這幾個數值(使用 Object 的方式傳入, array 傳入一個陣列,這個陣列用來儲存你的物件。 index 定義第一個元素,這個模組用這個元素來當作第一個被 render 的物件 loop 當巡迴過整個陣列之後,決定是否要返回第一個(或最後一個)元素 firstNode 第一個元素 lastNode 最後一個元素 這個模組建立後,

Famo.us

[Famo.us] Views 模組說明

Views 模組,但是其實還是有跟 Views 無關的東西,大概有動畫特效的都可以算在這裡。只是有部分比較多功能的東西,放在 widgets 裡面去了。 Views 模組 views/* 的模組,與 core/View 核心部分有些許不同,他並不是都會提供 RenderNode 給你使用,我這裡簡易說明一下底下的模組, views/Deck 提供一個 SequentialLayout 並且讓他有開啟以及關閉的動畫效果。 views/Flipper 提供一個滑動翻頁的動畫效果 views/GridLayout 提供一個

Famo.us

[Famo.us] View 核心說明

[UPDATE] Famo.us 官方已捨棄此模組,詳情請看官方 Github 見山不是山,大概就是在說這個 View 模組。 View 核心 核心模組 core/View 是用於提供一個或是多個 RenderNode 的容器給框架引擎使用,它本身在輸出的時候並不會產生 DOM 實例,所以你在畫面上其實是看不到 View 這個模組的。 先解釋一下 RenderNode 這個東西, 整個框架系統中,只要是產出與畫面有關的模組,都算是一種 RenderNode 核心 core/

Famo.us

[Famo.us] 安裝與 Surface, Modifier 基本操作

[UPDATE] Famo.us 官方已捨棄此模組,詳情請看官方 Github Famo.us 原始碼可以在官方的 github 下載 如果你已經可以進入 Famo.us University,那這裡或許可以跳過。 基本使用 Famo.us 是基於 AMD 的架構來撰寫,且搭配使用 require.js,所以稍微了解一下這兩個東西會比較容易上手。 安裝 你可以從官方的 github 把專案抓下來直接使用,也可以用 nodeJS 來安裝,

Famo.us

[Famo.us] 新一代 HTML5 Web Application JavaScript Framework

其實開始研究已經好一陣子了,只是想說 Blog 好久沒有文章,所以拿來灌水一下,免得乾旱過頭。我剛開始寫的時候,很多人都在問,到底 Famo.us 是什麼東西? 其實我本來也不理解,直到我聽到有人跟我說 Z>B... Famo.us 這個 JavaScript Framework 是早在 2012 年發表展示的一個專案,一開始的 hello world 應用程式,可以看看這個影片, 這個影片當初造成轟動,但是等到 Famo.