使用 Famo.us 创建高性能移动 UI（4）动画的过渡和补间

look_w

动画的过渡和补间在 UI 创建方面，通常要使用一定时间的动画。一个例子是在到达滚动列表的末尾时，用户可以观察到的 “反弹” 效果。另一个例子是将牌从背面翻到正面。
Famo.us 通过 Transitionable 类支持过渡效果，这个类代表了可逐步进行过渡的属性。下面的示例显示了如何使用两个补间过渡。

运行该应用程序时，在页面中间的 Famo.us 滚动视图内会显示一个 developerWorks 文章列表。该列表在前 10 秒以恒定的速度绕 y 轴旋转。然后在下个 10 秒钟突然加速并剧烈运动。虽然这个时间有限的动画已经就位，但是您仍可滚动列表（如果使用桌面浏览器，可使用鼠标的滚轮）。图 7 显示了该应用程序的执行效果。
图 7. 通过补间过渡动画，正在滚动的文章列表绕 y 轴旋转像正在滚动文章列表这样的视图是预制的高级 Famo.us 组件（此处是 ScrollContainer)，通过组合这些组件可更轻松地创建 UI。下个示例详细展示了 Famo.us 视图和 widget。对于现在，理解滚动列表是有一组有序的 Famo.us                Surface 组成的就足够了。清单 3 显示了列表创建代码。
清单 3. 创建一个文章滚动列表

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

function createArticlesList() {         artListSVC = new ScrollContainer({             scrollview: {direction: Utility.Direction.Y}         });         var lines = [];         artListSVC.sequenceFrom(lines);         for (var i in articles)  {             var surf = new Surface({                 content: '<div class"a-title">' + articles.title + '</div>',                 size: [undefined, 50],                 properties: {                     textAlign: 'left',                     color: 'black'                 }             });             surf.addClass('article-cell');             surf.addClass('backfaceVisibility');             surf.artIdx = i;             surf.pipe(eh);             lines.push(surf);         }         artListSVC.container.addClass('backfaceVisibility');         artListSVC.container.addClass('borderbox');     }

在   中创建了一个 Famo.us Surface 数组，名为 lines。创建的每个 Surface 都显示一个 developerWorks 文章的名称。还创建了名为 artListSVC 的 Famo.us ScrollContainer，并且使用其 sequenceFrom() 方法和 lines 数组来配置滚动列表。
编程实现补间过渡像 artListSVC 这样的视图也是一个可呈现对象（将可呈现对象作为叶对象来管理其自己的内部场景图）。可通过一个或多个 modifier 来转换视图，并将其添加到 context 的场景图中，如前面的示例所示。将 artListSVC 添加到 context 的代码是：

1 2 3

var sm = new StateModifier({align:[0.5, 0.5],          origin: [0.5, 0.5]}); mainContext.add(sm).add(artListSVC);

StateModifier 是一个 modifier，用于维护状态（在内部是通过 Transitionable 完成的）。使用补间过渡来制作动画时，您只需指定开始和结束状态（也称为关键帧）。补间过渡利用插值方法加入中间状态值并在每个运作 (tick) 将其提供给呈现引擎。您无需在自己的代码中计算或维护这些中间状态。
清单 4 显示了进行补间过渡的编程代码。
清单 4. 使用补间过渡制作动画

1 2 3 4 5 6 7 8

Transitionable.registerMethod('tween', TweenTransition); sm.setTransform(Transform.rotateY(Math.PI), {method: 'tween',         curve:'linear', duration:10000},         function() {               sm.setTransform(Transform.rotateY(2 * Math.PI),                {method: 'tween', duration: 10000,                 curve: 'spring'});            });

缓动进行补间期间，在您指定的补间 固定点之间通过插值方法添加属性值。默认情况下此插值是线性的，但补间引擎通常也支持缓动 特性，您可在插值期间指定一个速率更改控制曲线（例如提高四次插值或减小四次插值）。Famo.us 通过famous.transitions.Easing 提供十多个缓动曲线，您可在补间时使用这些特性。

  中的代码首先将 TweenTransition 作为 tween 方法向 Transitionable 注册。然后使用 StateModifier 的 setTransform() 方法添加补间后的 rotateY 转换。setTransform() 方法将一个转换作为首个参数，Transitionable 作为第二个参数，一个完成的回调函数作为第三个参数。
在   中，首个有动画的过渡持续 10 秒钟，滚动列表以线性速度绕 y 轴旋转。首个补间完成后，激发回调函数，然后第二个补间使用 spring 曲线，在接下来的 10 秒钟内实现快速的激烈运动。
并非必须显式地注册 TweenTransition，因为如果没有为 Transitionable 制定 method 属性，则 Famo.us 默认使用 TweenTransition。但是，  展示了如何注册另一个过渡方法 — 如通过 Famo.us 物理引擎实现过渡。（Famo.us 物理引擎超出了本文的介绍范围。）
呈现透视图呈现透视图（由您指定，单位为像素）将查看者的 “照相机” 与要呈现的场景之间的距离关联起来。使用 Context.setPerspective() 设置该值。较小的值可让查看者距离要呈现的对象更近一些，同时保持具有相同的视野，有点类似于照相机上的广角镜头。通过变化透视图，您可改进很多动画的观感。在这个例子中，将透视图设为 500 可实现更为生动的效果。