WAAPI入门

动画在Web应用中不是必须的,但是使用得好能起到锦上添花的作用。早期在Web中看到的动画主要有Flash、Gif图片动画、JavaScript动画、SVG动画、APNG动画和CSS3动画等。特别是随着浏览器对CSS3属性支持力度的提高,使用CSS3制作动画的情景在Web应用中越来越频繁。

虽然实现动画的技术可以有多种不同的实现方式,但每种技术都存在一定的缺点,比如CSS3动画必须通过JavaScript去获取动态改变的值,setInterval的时间往往是不精确的而且还会卡顿,APNG动画体积过大等等。

实现方法多意味着实现方式也不同,其中涉及到的技术点也不同,对于Web开发者而言,都希望制作Web动画都具有一套统一的API规则:

WAAPI入门

值得庆幸的是,W3C提出Web Animation API,它致力于集合CSS3动画的性能,JavaScript的灵活,动画库的丰富等各家所长,将尽可能多的动画控制由原生浏览器实现,并添加许多CSS不具备的变量、控制以及调试选项等。

WAAPI入门

那么从这篇文章开始,我们将会花几节课的时间和大家一起来探讨Web Animation API相关的知识。

CSS3 Animation

W3C提出的Web Animation API常简称为WAAPI。在开始介绍WAAPI之前,咱们先来回忆一下现在制作动画常用的方法CSS3 Animation。为什么要拿CSS3 Animation出来说呢?因为CSS3 Animation的特性和WAAPI中很多特性非常的类似。

CSS3 Animation中动画最关键的是需要先通过@keyframes来声明一个动画,然后通过animation-name来调用@keyframes声明的动画。不然动画声明、调用之后,还需要触发动画。而触发动画方式主要有文档载入、状态伪类、JavaScript事件等方式来触发。

除此之外,CSS3 Animation除了animation-name之外,还提供了其它属性来控制动画,比如:

  • animation-duration动画持续播放时长
  • animation-delay动画延迟播放的时长
  • animation-directoin动画播放方向
  • animation-timing-function动画播放函数功能
  • animation-fill-mode动画停留状态
  • animation-iteration-count动画播放次数
  • animation-play-state动画播放状态

简单来看W3C官网提供的一张有关于CSS3 Animation属性变化的过程示意图:

CSS3 Animation

我们在这里对CSS3 Animation相关的介绍不做过多的阐述,如果您从未接触过有关于CSS3 Animation相关的知识,建议您先看看这篇文章

为了后面更好的介绍WAAPI,咱们先来简单的看一个CSS3 Animation动画效果。

@keyframes anime {
  0% {
    transform: none;
  }

  25% {
    transform: translate(200px, 0);
  }

  50% {
    transform: translate(200px, 200px);
  }

  75% {
    transform: translate(0, 200px);
  }

  100% {
    transform: none;
  }
}

然后在需要有动效的元素上调用声明好的动画:

animation: anime 1000ms cubic-bezier(.6, 0, 1, .6) 500ms 50 normal bot
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/animation/waapi-basic-intro.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部