CSS 动画与 Web 动画 API

简介: JavaScript 中有一个用于动画的原生 API,称为 Web Animations API

JavaScript 中有一个用于动画的原生 API,称为 Web Animations API。在这篇文章中,我们将其称为 WAAPI。

在本文中,我们将比较 WAAPI 和用 CSS 完成的动画。

关于浏览器支持的说明

当代浏览器的支持是有限的,WAAPI 有一个全面和强大的 polyfill 工具,使得它可以在生产环境下使用。polyfill 是 Web 动画 API 的 JavaScript 实现,它在本机不支持它的浏览器中提供 Web 动画功能。当一个可用时,polyfill 回退到本机实现。

WAAPI基础

如果您曾经使用过 jQuery 的 .animate(),那么 WAAPI 的基本语法应该看起来很熟悉。

var element = document.querySelector('.animate-me');
element.animate(keyframes, 1000);

该 animate 方法接受两个参数:关键帧和持续时间。与 jQuery 相比,它不仅具有内置于浏览器的优点,而且性能更高。

第一个参数,关键帧,应该是一个对象数组。每个对象都是我们动画中的关键帧。这是一个简单的例子:

var keyframes = [
  { opacity: 0 },
  { opacity: 1 }
];

第二个参数,持续时间,是我们希望动画持续多长时间。在上面的例子中,它是 1000 毫秒。让我们看一个更令人兴奋的例子。

使用 WAAPI 重新创建 animista CSS 动画
在这里插入图片描述

这是 CSS 中的关键帧:

0% {
  transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
  transform-origin: 50% 0;
  filter: blur(40px);
  opacity: 0;
}
100% {
  transform: translateY(0) scaleY(1) scaleX(1);
  transform-origin: 50% 50%;
  filter: blur(0);
  opacity: 1;
}

这是 WAAPI 中的相同代码:

var keyframes = [
  { 
    transform: 'translateY(-1000px) scaleY(2.5) scaleX(.2)', 
    transformOrigin: '50% 0', filter: 'blur(40px)', opacity: 0 
  },
  { 
    transform: 'translateY(0) scaleY(1) scaleX(1)',
    transformOrigin: '50% 50%',
    filter: 'blur(0)',
    opacity: 1 
  }
];

我们已经看到将关键帧应用于我们想要动画的任何元素是多么容易:

element.animate(keyframes, 700);

为了使示例简单,我只指定了持续时间。但是,我们可以使用第二个参数传递更多选项。至少,我们还应该指定一个缓动。以下是包含一些示例值的可用选项的完整列表:

var options = {
  iterations: Infinity,
  iterationStart: 0,
  delay: 0,
  endDelay: 0,
  direction: 'alternate',
  duration: 700,
  fill: 'forwards',
  easing: 'ease-out',
}
element.animate(keyframes, options);

缓动

缓动是任何动画中最重要的元素之一。WAAPI 为我们提供了两种不同的方式来设置缓动——在我们的关键帧数组中或在我们的选项对象中。

在 CSS 中,如果您应用了,animation-timing-function: ease-in-out 缓入缓出动画。事实上,缓动应用于关键帧之间,而不是整个动画。这可以对动画的感觉进行细粒度的控制。WAAPI 也提供了这种能力。

var keyframes = [
  { opacity: 0, easing: 'ease-in' }, 
  { opacity: 0.5, easing: 'ease-out' }, 
  { opacity: 1 }
]

值得注意的是,在 CSS 和 WAAPI 中,您不应该为最后一帧传递缓动值,因为这将不起作用。这是很多人都会犯的错误。

有时在整个动画上添加缓动更直观。这在 CSS 中是不可能的,但现在可以通过 WAAPI 来实现。

var options = {
  duration: 1000,
  easing: 'ease-in-out',
}

值得注意的是 CSS 动画和 WAAPI 之间的另一个区别:CSS 的默认值是 ease,而 WAAPI 的默认值是 linear。

WAAPI 提供了与 CSS 动画相同的性能改进,可以实现流畅的动画,意味着我们 will-change 可以避免使用。

动画对象

.animate() 方法不仅为我们的元素设置动画,它还返回一些东西。

var myAnimation = element.animate(keyframes, options);

在这里插入图片描述

如果我们查看控制台中的返回值,我们会看到它是一个动画对象。这为我们提供了各种功能,其中一些功能一目了然,例如 myAnimation.pause(). 我们也可以通过更改 animation-play-state 属性来使用 CSS 动画实现类似的效果 element.style.animationPlayState = "paused". 我们还可以轻松地反转我们的动画 myAnimation.reverse()

使用 WAAPI,我们可以简单地使用 myAnimation.play() 从头开始播放动画,如果它之前已经完成,或者如果我们暂停它,则从中间迭代播放它。

我们甚至可以完全轻松地更改动画的速度。

myAnimation.playbackRate = 2; // speed it up
myAnimation.playbackRate = .4; // use a number less than one to slow it down

获取动画

此方法将为我们返回 WAAPI 定义的任何动画以及任何 CSS transitions 或者 animations 动画。

element.getAnimations() // returns any animations or transitions applied to our element using CSS or WAAPI

如果您觉得使用 CSS 来定义和应用动画很舒服并且满意,则 getAnimations() 允许您将 API 与@keyframes 结合使用。

即使一个 DOM 元素只应用了一个动画,getAnimations() 也将始终返回一个数组。让我们获取要使用的单个动画对象。

var h2 = document.querySelector("h2");
var myCSSAnimation = h2.getAnimations()[0];

现在我们可以在我们的 CSS 动画上使用 web 动画 API 了 :)

myCSSAnimation.playbackRate = 4;
myCSSAnimation.reverse();

事件 promise

我们已经有各种各样的 CSS,我们可以在我们的 JavaScript 代码利用触发事件:   animationstart,animationend,animationiteration 和 transitionend。我经常需要监听动画或过渡的结束,然后从 DOM 中删除它应用到的元素。

在 WAAPI 中使用 onfinish,与 animationend 或 transitionend 相同:

myAnimation.onfinish = function() {
  element.remove();
}

WAAPI 为我们提供了使用事件和 promise 两种选择。 finished 我们的动画对象的属性将返回一个在动画结束时解析的 promise。以下是使用 promise 的上述示例:

myAnimation.finished.then(() =>
  element.remove())

在这个例子中,只有在页面上的所有动画都完成后,我们的函数才会运行。

Promise.all(document.getAnimations().map(animation => 
  animation.finished)).then(function() {           
    // do something cool 
  })
相关文章
|
7月前
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
260 73
|
5月前
|
人工智能 搜索推荐 IDE
突破网页数据集获取难题:Web Unlocker API 助力 AI 训练与微调数据集全方位解决方案
本文介绍了Web Unlocker API、Web-Scraper和SERP API三大工具,助力解决AI训练与微调数据集获取难题。Web Unlocker API通过智能代理和CAPTCHA绕过技术,高效解锁高防护网站数据;Web-Scraper支持动态内容加载,精准抓取复杂网页信息;SERP API专注搜索引擎结果页数据抓取,适用于SEO分析与市场研究。这些工具大幅降低数据获取成本,提供合规保障,特别适合中小企业使用。粉丝专属体验入口提供2刀额度,助您轻松上手!
289 2
|
5月前
|
人工智能 运维 安全
网络安全公司推荐:F5荣膺IDC全球Web应用与API防护领导者
网络安全公司推荐:F5荣膺IDC全球Web应用与API防护领导者
124 4
|
6月前
|
API UED 开发者
HarmonyOS:动画 motionPath 、 animateToImmediately API自学指南
在鸿蒙应用开发中,动画是提升用户体验的关键。本文针对初学者面对众多动画API时的困惑,重点解析两个实用API:`motionPath`和`animateToImmediately`。前者通过精细控制组件运动路径(如SVG字符串定义轨迹),实现灵动位移动画;后者从API Version 12起支持显式动画立即下发,结合状态变化打造流畅动画序列。文中提供详细参数说明与示例代码,帮助开发者快速掌握技巧,让应用更生动。
164 8
|
8月前
|
人工智能 前端开发 API
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具,支持通过文本描述快速生成代码,并提供实时代码编辑和预览功能,简化开发流程。
452 38
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
|
6月前
|
XML JSON API
Understanding RESTful API and Web Services: Key Differences and Use Cases
在现代软件开发中,RESTful API和Web服务均用于实现系统间通信,但各有特点。RESTful API遵循REST原则,主要使用HTTP/HTTPS协议,数据格式多为JSON或XML,适用于无状态通信;而Web服务包括SOAP和REST,常用于基于网络的API,采用标准化方法如WSDL或OpenAPI。理解两者区别有助于选择适合应用需求的解决方案,构建高效、可扩展的应用程序。
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
192 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
8月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
143 34
|
6月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。
|
8月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
118 22