Chrome 39 中的网络动画播放控件

山姆·索罗古德
Sam Thorogood

今年早些时候,Chrome 36 推出了 element.animate 方法,这是更广泛的网页动画规范的一部分。这样,就可以实现以命令方式编写的高效原生动画,让开发者能够选择使用最适合自己的方法构建动画和过渡效果。

为快速复习,下面展示了如何在屏幕上为云朵的移动添加动画效果,并在完成后使用回调:

var player = cloud.animate([
    {transform: 'translateX(' + start + 'px)'},
    {transform: 'translateX(' + end + 'px)'}
], 5000);
player.onfinish = function() {
    console.info('Cloud moved across the screen!');
    startRaining(cloud);
};

这本身就极其容易,在以命令方式构建动画或转场时,这非常值得考虑,将其作为工具箱的一部分。不过,在 Chrome 39 中,播放控件功能已添加到 element.animate 返回的 AnimationPlayer 对象中。以前,创建动画后,您只能调用 cancel() 或监听完成事件。

这些播放添加让 Web Animations 成为了可能实现的事情:将动画变为通用工具,而不是对过渡进行规范性定义,即“固定”或预定义动画。

暂停、快退或更改播放速度

首先更新上面的示例,以便在点击云时暂停动画:

cloud.addEventListener('mousedown', function() {
    player.pause();
});

您还可以修改 playbackRate 属性:

function changeWindSpeed() {
    player.playbackRate *= (Math.random() * 2.0);
}

您还可以调用 reverse() 方法,这通常等同于反转当前的 playbackRate(乘以 -1)。不过,也有一些特殊情况:

  • 如果 reverse() 方法导致的更改会导致正在运行的动画有效结束,则 currentTime 也会反转,例如,如果全新的动画反转,整个动画将向后播放

  • 如果播放器已暂停,动画会开始播放。

拖拽播放器

现在,AnimationPlayer 允许在动画运行期间修改其 currentTime。通常,此值会随着时间的推移而增大(如果 playbackRate 为负数,则此值会减小)。这可能会使动画的位置由外部控制(可能是通过用户互动控制)。这通常称为“擦除”。

例如,如果您的 HTML 页面表示天空,而您希望通过拖动手势更改当前正在播放的云的位置,那么您可以向文档中添加一些处理程序:

var startEvent, startEventTime;
document.addEventListener('touchstart', function(event) {
    startEvent = event;
    startEventTime = players.currentTime;
    player.pause();
});
document.addEventListener('touchmove', function(event) {
    if (!startEvent) return;
    var delta = startEvent.touches[0].screenX -
        event.changedTouches[0].screenX;
    player.currentTime = startEventTime + delta;
});

当您在文档上拖动时,currentTime 会发生变化,以反映您与原始事件的距离。您可能还希望在手势结束时继续播放动画:

document.addEventListener('touchend', function(event) {
    startEvent = null;
    player.play();
});

根据用户从网页中抬起鼠标的位置,此功能甚至可以与反向操作结合(组合演示)。

currentTime 也可用于显示进度或状态,例如显示下载的状态,而不是为了响应用户互动而调试 AnimationPlayer

此处的效用是,AnimationPlayer 允许设置值,并让底层原生实现处理其进度可视化。在下载的情况下,可将动画的时长设置为总下载大小,将 currentTime 设置为当前下载的大小(演示)。

界面转换和手势

长期以来,移动平台一直是常见手势领域:拖动、滑动、快速滑动等。这些手势往往有共同的主题:可拖动的界面组件,例如列表视图的“下拉刷新”或从屏幕左侧滑出的边栏。

借助 Web Animations,你可以轻松地在网页上或移动设备上实现类似的效果。例如,当控制 currentTime 的手势完成时:

var steps = [ /* animation steps */ ];
var duration = 1000;
var player = target.animate(steps, duration);
player.pause();
configureStartMoveListeners(player);

var setpoints = [0, 500, 1000];
document.addEventListener('touchend', function(event) {
    var srcTime = player.currentTime;
    var dstTime = findNearest(setpoints, srcTime);
    var driftDuration = dstTime - srcTime;

    if (!driftDuration) {
    runCallback(dstTime);
    return;
    }

    var driftPlayer = target.animate(steps, {
    duration: duration,
    iterationStart: Math.min(srcTime, dstTime) / duration,
    iterations: Math.abs(driftDuration) / duration,
    playbackRate: Math.sign(driftDuration)
    });
    driftPlayer.onfinish = function() { runCallback(dstTime); };
    player.currentTime = dstTime;
});

这会创建一个执行“偏移”的额外动画。这会在手势完成位置之间播放,一直播放到已知的良好目标。

这样做是可行的,因为动画优先级取决于动画的创建顺序:在本例中,driftPlayer 的优先级高于播放器。driftPlayer 完成后,它及其影响就会消失。不过,其最终时间将与底层播放器的 currentTime 一致,因此您的界面将保持一致。

最后,如果您喜欢小猫,可用演示 Web 应用展示这些手势。它适合移动设备,并且使用 polyfill 来实现向后兼容,因此请尝试在移动设备上加载它!

继续了解 element.animate

目前element.animate 方法简直太不可思议了 - 无论您是将其用于简单的动画,还是以其他方式利用其返回的 AnimationPlayer

在其他现代浏览器中,通过轻量级 polyfill 也完全支持这两项功能。此 polyfill 还可执行功能检测,因此当浏览器供应商实施该规范后,这项功能只会越来越快、更好。

网页动画规范也将不断完善。如果您有意试用即将推出的功能,它们现在还会在更详细的 polyfill:web-animations-next 中提供。