Animation


动画小部件

动画小部件提供播放、暂停和反转按钮，以及当前时间和日期，由用于控制动画速度的“穿梭环”包围。

从视频编辑中借用了“穿梭环”的概念，在视频编辑中，通常可以旋转“点动轮”以非常缓慢地移动经过各个动画帧，并且可以扭曲周围的穿梭环以控制快速播放的方向和速度。它通常将时间视为连续的（而不是分解成预先定义的动画帧），因此这个小部件不提供点动控制盘。相反，梭形环能够快速和非常慢的回放。单击并拖动梭形环指针本身（上面以绿色显示），或单击环区域的其余部分，将指针推到该方向的下一个预设速度。

动画小部件还提供一个“实时”按钮（在左上角），使动画时间与最终用户的系统时钟保持同步，通常显示“今天”或“现在”。如果当前时间不在Clock的开始时间和结束时间内，此模式在ClockRange.CLAMPED或ClockRange.LOOP_STOP模式下不可用。
new Animation(container, viewModel)
Parameters:
container ((Element | String)) 将包含该小部件的DOM元素或ID。
viewModel (AnimationViewModel) 此小部件使用的视图模型。
Example
// In HTML head, include a link to Animation.css stylesheet,
// and in the body, include: <div id="animationContainer"></div>

var clock = new bmgl.Clock();
var clockViewModel = new bmgl.ClockViewModel(clock);
var viewModel = new bmgl.AnimationViewModel(clockViewModel);
var widget = new bmgl.Animation('animationContainer', viewModel);

function tick() {
    clock.tick();
    bmgl.requestAnimationFrame(tick);
}
bmgl.requestAnimationFrame(tick);
Throws
See:

Members

(readonly) container : Element

获取父容器。

(readonly) viewModel : AnimationViewModel

获取视图模型。

Methods

applyThemeChanges()
更新小部件以反映主题化的任何修改的CSS规则。
Example
//Switch to the bmgl-lighter theme.
document.body.className = 'bmgl-lighter';
animation.applyThemeChanges();
destroy()
销毁动画小部件。如果从布局中永久删除小部件，则应调用。
isDestroyed() → {Boolean}
resize()
调整小部件的大小以匹配容器大小。只要更改容器大小，就应该调用此函数。