Web动画API教程:创建基本动画

来源:转载

这是介绍 浏览器中web动画API的系列教程 的第一篇。如果你有什么问题/想法,或者发现我理解错了规范的内容,或是希望我在接下来的文章中对某部分内容进行探讨的话,请在Twitter给我留言吧~ @dancwilson

我们已经初步了解了统一web动画API的内容,但是我们还没有真正去对规范的细节进行探讨,所以现在开始吧。

WAAPI为你提供了比你用于CSS动画更多的控件,但是在了解它们之前,我们先打一下基础:如何使用这个API创建一个基本的动画?

创建一个关键帧动画

如果你对CSS Transition和animation熟悉的话,下面的代码看起来应该不陌生。

var player = document.getElementById('toAnimate').animate([ { transform: 'scale(1)', opacity: 1, offset: 0 }, { transform: 'scale(.5)', opacity: .5, offset: .3 }, { transform: 'scale(.667)', opacity: .667, offset: .7875 }, { transform: 'scale(.6)', opacity: .6, offset: 1 } ], { duration: 700, //milliseconds easing: 'ease-in-out', //'linear', a bezier curve, etc. delay: 10, //milliseconds iterations: Infinity, //or a number direction: 'alternate', //'normal', 'reverse', etc. fill: 'forwards' //'backwards', 'both', 'none', 'auto' });

为了便于比较,这里再创建一个等效的CSS关键帧动画

@keyframes emphasis { 0% { transform: scale(1); opacity: 1; } 39% { transform: scale(.5); opacity: .5; } 78.75% { transform: scale(.667); opacity: .667; } 100% { transform: scale(.6); opacity: .6; }}#toAnimate { animation: emphasis 700ms ease-in-out 10ms infinite alternate forwards;}

我们把这段代码分解,然后一块一块进行讲解。

var player = document.getElementById('toAnimate').animate()

动画 animate() 会返回一个 AnimationPlayer ,帮助我们接下来做一些有趣的事情,所以你可能会希望创建一个变量来获取 AnimationPlayer 的引用。我们先找到我们想要添加动画的元素(这里我们直接用了 document.getElementById ),并调用 animate 函数。这个函数是规范中新增加的内容,所以你需要在使用前查看它的支持/是否存在,或者引入 polyfill 。

animate 函数传入两个参数,一个是 KeyframeEffects 数组,一个是 AnimationEffectTimingProperties 选项。基本上第一个参数会映射到你放到CSS @keyframes 中的内容,第二个参数是你将在你的CSS规则中使用 animation-* 属性(或 animation 简写,像我前面用的那样)指定的内容。这里有个关键的好处是我们可以使用变量或重用先前定义的 KeyframeEffects ,而用CSS的话我们就会被限制只能使用我们先前定义的值。

var player = document.getElementById('toAnimate').animate([ { transform: 'scale(1)', opacity: 1 }, { transform: 'scale(.5)', opacity: .5 }, { transform: 'scale(.667)', opacity: .667 }, { transform: 'scale(.6)', opacity: .6 } ]);

对于每一个 KeyframeEffect ,我们把CSS中的百分比偏移量 offset 变成值为 0 到 1 的小数。它是可选的,如果你没有指定任何值,它们就会平均分布(所以如果你有三个,第一个的偏移量为 0 ,第二个的偏移量为 .5 ,第三个则为 1 )。你还可以指定一个 easing 属性,这和CSS中的 animation-timing-function 一样。 KeyframeEffect 中的其它属性也都是可以添加动画的属性。每个属性的值都应该和你在JavaScript中使用 element.style 指定的相匹配,即 opacity 的值应该是一个数字,而 transform 应该是字符串。

var player = document.getElementById('toAnimate').animate([], {duration: 700, //millisecondseasing: 'ease-in-out', //'linear', a bezier curve, etc.delay: 10, //millisecondsiterations: Infinity, //or a numberdirection: 'alternate', //'normal', 'reverse', etc.fill: 'forwards' //'backwards', 'both', 'none', 'auto' });

timing 属性映射到CSS动画属性,尽管有时有不同的名字。早期的代码示例我们只讨论主要的选项。

下面是一个使用polyfill的示例(但是如果你是在最新的Chrome中查看,它应该是使用原生浏览器实现)。第一列的灰色方块是用的WAAPI,第二列红色方块使用的是CSS关键帧。

下一节

现在我们知道了如何根据我们已知的CSS来制作同等效果的动画,我们接下来看看 animate 函数返回的 AnimationPlayer 对象。这才是它真正的提升了功能特性的地方。

本文根据 @Dancwilson 的《 Web Animations API Tutorial Part 1: Creating a Basic Animation 》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处: http://danielcwilson.com/blog/2015/07/animations-part-1/ 。

彦子

在校学生,本科计算机专业。逗比一枚,热爱前端热爱生活,喜欢CSS喜欢JavaScript喜欢SVG,爱玩PS玩AI玩啊逗比的软件。努力向上,厚积薄发。


分享给朋友:
您可能感兴趣的文章:
随机阅读: