您可以使用 CSS 或 JavaScript 添加动画效果。您应该使用哪种方式?为什么?
在网页上制作动画主要有两种方法:使用 CSS 和使用 JavaScript。您选择哪种方法实际上取决于项目的其他依赖项,以及您尝试实现的效果类型。
摘要
- 使用 CSS 动画来实现更简单的“一次性”转换,例如切换界面元素状态。
- 当您想实现弹跳、停止、暂停、快退或减速等高级效果时,可以使用 JavaScript 动画。
- 如果您选择使用 JavaScript 添加动画效果,请使用 Web Animations API 或您熟悉的现代框架。
大多数基本动画可以使用 CSS 或 JavaScript 来创建,但所需的工作量和时间有所不同(另请参阅 CSS 对比 JavaScript 的性能)。每种方法都有自己的优缺点,下面列出了一些非常实用的准则:
- 当您的界面元素处于较小的独立状态时,请使用 CSS。CSS 过渡和动画非常适合于从侧面引入导航菜单,或显示提示。您最终可能会使用 JavaScript 来控制状态,但动画本身位于 CSS 中。
- 在需要对动画进行大量控制时,使用 JavaScript。Web Animations API 是基于标准的方法,现可用于大多数现代浏览器。该方法可提供真实对象,非常适合复杂的对象导向型应用。当您需要停止、暂停、减慢或倒放动画时,JavaScript 也很有用。
- 如果要手动编排整个场景,请直接使用
requestAnimationFrame
。这是一种高级 JavaScript 方法,但如果您构建游戏或绘制到 HTML 画布上,该方法会很有用。
或者,如果您已经在使用包含动画功能的 JavaScript 框架,例如通过 jQuery 的 .animate()
方法或 GreenSock 的 TweenMax,那么您可能会发现坚持使用该方法进行动画整体上更方便。
使用 CSS 添加动画效果
使用 CSS 编写动画是让内容在屏幕上移动的最简单方式。此方法称为声明式方法,因为您指定了想要执行的操作。
以下是在 X 轴和 Y 轴上将元素 100px
移动的一些 CSS。为此,我们需要使用设为 500ms
的 CSS 转场效果。添加 move
类后,transform
值会发生变化并且转换开始。
.box {
transform: translate(0, 0);
transition: transform 500ms;
}
.box.move {
transform: translate(100px, 100px);
}
除了过渡的时长之外,还有加/减速选项选项,加/减速选项本质上是动画的感觉。有关加/减速功能的详细信息,请参阅加/减速功能的基础知识指南。
如果您在上面的代码段中创建了单独的 CSS 类来管理动画,那么可以使用 JavaScript 打开和关闭每个动画:
box.classList.add('move');
这样做可以很好地平衡您的应用。您可以专注于使用 JavaScript 管理状态,只需在目标元素上设置适当的类,让浏览器来处理动画。如果您按照这种方法,可以监听元素上的 transitionend
事件,但前提是您可以放弃对旧版 Internet Explorer 的支持;版本 10 是支持这些事件的首个版本。所有其他浏览器都已支持此事件一段时间。
监听转换结束所需的 JavaScript 如下所示:
var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);
function onTransitionEnd() {
// Handle the transition finishing.
}
除了使用 CSS 过渡之外,您还可以使用 CSS 动画,从而更好地控制单个动画关键帧、持续时间和迭代。
例如,您可以采用与过渡相同的方式为方框设置动画效果,但设置动画时无需任何用户互动(例如点击),并且采用无限重复。您还可以同时更改多个属性。
.box {
animation-name: movingBox;
animation-duration: 1300ms;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes movingBox {
0% {
transform: translate(0, 0);
opacity: 0.3;
}
25% {
opacity: 0.9;
}
50% {
transform: translate(100px, 100px);
opacity: 0.2;
}
100% {
transform: translate(30px, 30px);
opacity: 0.8;
}
}
借助 CSS 动画,您可以独立于目标元素来定义动画本身,并使用 animation-name
属性选择所需的动画。
如果您希望 CSS 动画在旧版浏览器上正常运行,则需要添加供应商前缀。许多工具可以帮助您创建所需的 CSS 前缀版本,让您可以在源文件中编写无前缀版本。
使用 JavaScript 和 Web Animations API 添加动画效果
相比之下,使用 JavaScript 创建动画比编写 CSS 转换或动画更复杂,但通常会为开发者提供更多功能。您可以使用 Web Animations API 为特定的 CSS 属性添加动画效果,或构建可组合的效果对象。
JavaScript 动画是命令式的,因为您将动画作为代码的一部分以内嵌方式进行编写。您还可以将它们封装在其他对象中。以下是您需要编写的 JavaScript 代码,以便重新创建之前所述的 CSS 转场:
var target = document.querySelector('.box');
var player = target.animate([
{transform: 'translate(0)'},
{transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
target.style.transform = 'translate(100px, 100px)';
});
默认情况下,Web Animations 仅修改元素的呈现方式。如果您希望对象一直位于它已移动到的位置,则应在动画结束之后,按照我们的示例修改其底层样式。
Web Animations API 是 W3C 中相对较新的标准。大多数现代浏览器都为其提供原生支持。对于不支持的新型浏览器,可使用 polyfill。
使用 JavaScript 动画,您可以在每一步完全控制元素的样式。这意味着您可以根据自己的需要减慢动画、暂停动画、停止动画、倒放动画,以及操控元素。如果您要构建复杂的对象导向型应用,这种方法特别有用,因为您可以正确封装自己的行为。