Views 模組,但是其實還是有跟 Views 無關的東西,大概有動畫特效的都可以算在這裡。只是有部分比較多功能的東西,放在 widgets
裡面去了。
Views 模組
views/*
的模組,與 core/View
核心部分有些許不同,他並不是都會提供 RenderNode
給你使用,我這裡簡易說明一下底下的模組,
views/Deck
提供一個SequentialLayout
並且讓他有開啟以及關閉的動畫效果。views/Flipper
提供一個滑動翻頁的動畫效果views/GridLayout
提供一個 [x, y] 的版面配置views/HeaderFooterLayout
提供一個header
,content
,footer
(由上到下) 的版面配置views/Lightbox
提供一個燈箱的動畫效果views/ScrollContainer
提供一個包含Scrollview
的ContainerSurface
元件views/Scrollview
提供一個捲軸容器views/SequentialLayout
提供一個縱向或是橫向的版面配置元件
動畫或行為類型的擴充模組
views/EdgeSwapper
提供一個RenderController
控制元件處理邊界滑入元件views/RenderController
提供一個RenderNode
的控制器views/Lightbox
提供一個燈箱行為的RenderNode
控制器views/Scroller
提供一個捲軸行為的RenderNode
控制器
這樣的模組在 Famo.us
裡面還蠻常見的,官方也沒告訴你要怎麼用,實際的使用案例裡面也找不到相關的使用方式(大概只能自己從原始碼中猜測...
簡單的說,上述幾個模組,可能是拿來擴充,或是發展成其他的模組而存在的。如果你單純要拿來用,那麼他大概可以這麼去理解他,
- 提供一個
Transitionable
的元件,但是不是實體(也不是 DOM 實例 - 必須要提供一個
RenderNode
元件才能使用 - 本身必須加入一個已存在的實體或元件
- 除了
Scroller
以外,其他皆由show
這個方法來控制
共通特性
擴充模組,除了 ScrollContainer
會提供一個 ContainerSurface
元件外,其他的皆不會真的提供你可使用(顯示)的元件,也就是說,如果你只是 new 上述幾個模組,把它加入 Engine
,那麼你的 DOM 會是空的。
以下稍微說明一下各個模組的簡易使用方式,
Deck
由於 views/Deck
是由 views/SequentialLayout
擴充而來,所以設定方式相同,只是預設值有些許差異。他產出的排列方式也很奇特,各位可以自行實驗,
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var View = require('famous/core/View');
var Deck = require('famous/views/Deck');
var Utility = require('famous/utilities/Utility');
var mainCtx = Engine.createContext();
var myDeck = [];
var deck = new Deck({
direction: Utility.Direction.X
});
deck.sequenceFrom(myDeck);
for( var i = 0; i < 10; i++) {
view = new View();
surf = new Surface({
size: [100, 100],
content: i,
properties: {
backgroundColor: 'rgba(255, 0, 0, 0.7)'
}
});
mod = new Modifier({
origin: [0, 0],
transform: Transform.translate(0, 0, 0)
});
view.add(mod).add(surf);
myDeck.push(view);
}
mainCtx.add(deck);
});
EdgeSwapper
從右邊滑入元件,如果不斷的給他 .show()
並送元件給他,他就會交換(一個淡入,一個淡出
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var View = require('famous/core/View');
var EdgeSwapper = require('famous/views/EdgeSwapper');
var mainCtx = Engine.createContext();
var edgeSwapper = new EdgeSwapper();
var surf1 = new Surface({
size: [100, 100],
content: 'This is a book.',
properties: {
backgroundColor: 'rgba(255, 0, 0, 0.7)'
}
});
var surf2 = new Surface({
size: [100, 100],
content: 'This is a pen.',
properties: {
backgroundColor: 'rgba(0, 255, 0, 0.7)'
}
});
edgeSwapper.show(surf1);
setTimeout(function() {
edgeSwapper.show(surf2);
}, 2000);
mainCtx.add(edgeSwapper);
});
Flipper
顧名思義,就是製作一個可以前後翻頁的元件,預設動畫翻起來頗醜的 Orz
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var View = require('famous/core/View');
var Flipper = require('famous/views/Flipper');
var Utility = require('famous/utilities/Utility');
var mainCtx = Engine.createContext();
var flipper = new Flipper();
for( var i = 0; i < 2; i++) {
view = new View();
surf = new Surface({
size: [100, 100],
content: i,
properties: {
backgroundColor: 'rgba(255, 0, 0, 0.7)'
}
});
mod = new Modifier({
origin: [0, 0],
transform: Transform.translate(0, 0, 0)
});
view.add(mod).add(surf);
if (i === 0) {
flipper.setFront(view);
} else {
flipper.setBack(view);
}
}
mainCtx.add(flipper);
});
Lightbox
燈箱控制元件,跟 EdgeSwapper
操作方法一樣,只是他多了 hide()
方法,可以讓你把燈箱藏起來。範例就不贅述了。
RenderController
這一個算是控制所有動作的核心,除了有 hide()
與 show()
之外,另外還有六個控制效果的方法,使用方式跟 Lightbox
, EdgeSwapper
一樣,而六種方法分別是 inTransformFrom
, outTransformFrom
, inOriginFrom
, outOriginFrom
, inOriginFrom
, outOriginFrom
,全部都是必須傳入 Function
或是 Transitionable
來進行操作。
SequentialLayout
提供一個容器,讓你水平或是垂直放入元件,自身不會產生任何的實體 DOM 元素。
GridLayout
同 SequentialLayout
但是是以 [col, row]
的方式切割你的畫面(或是父元件,自身同樣不產生任何實體 DOM 元素。
HeaderFooterLayout
同 GridLayout
但是,只產生 header
, content
, footer
三組容器(由上至下,自身不會產生任何的實體 DOM 元素。這三組的範例待會一併說明。
Scroller
模擬一個捲軸,但是不監聽任何動作,單純將元件依照指定方向排列。使用 positionFrom
方法來控制捲軸的捲動。
Scrollview
同上,但是加入了滑鼠,觸控等動作的監聽,等同於原生捲軸的操作方式。但是,元件並不會產生系統的捲軸控制器。
ScrollContainer
同上,但是分別提供了一組 Scrollview
與 ContainerSurface
給你使用,你不需要額外做任何 pipe
或是 subscribe
的動作,就能產生一組捲軸控制元件,因為有 ContainerSurface
所以他會有一組實體的 DOM 元件。