今年早些时候,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 中提供。