/ Famo.us

[Famo.us] Views 模組說明

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 提供一個包含 ScrollviewContainerSurface 元件
  • 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);
});

燈箱控制元件,跟 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

同上,但是分別提供了一組 ScrollviewContainerSurface 給你使用,你不需要額外做任何 pipe 或是 subscribe 的動作,就能產生一組捲軸控制元件,因為有 ContainerSurface 所以他會有一組實體的 DOM 元件。