WAAPI

作者 johansen 日期 2017-06-23
技术小记
WAAPI

上篇博客提到了WAAPI(Web Animation API)。今天我们就来说一下关于WAAPI相关的概念。WAAPI提出主要将动画的控制交由原生的浏览器去实现。并添加了许多css不具备的变量，控制与调试选项。

我们先上一张图关于CSS3动画相关的。因为从waapi中会找到很多关于css3动画相关的新特性的影子。
动画

WAAPI入门

在CSS3动画和过渡特性还没出来之前，在网站页面中实现一些简单的动效，大家用得比较多的应该是jQuery的的.animate()或者JavaScript的的中setTimeout和setInterval来实现一些动效。WAAPI其实类似JQ的.animate()一样的一个API:

element.animate(effect,option)
其中element是指需要有动作的元素，比如上例中的.anime元素，effect是一个KeyframeEffects数组，对应的也就CSS3动画中的@keyframs anime，另外options是一个AnimationEffectTimingProperties参数，对应的是animation-*属性。
来一个栗子：

1
<div class="js-anim"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var eleanim = document.querySelector('.js-anim'),
    animKeyFrames = [],
    animOption = {};
animKeyFrames=[
    { offset: 0, transform: 'none' },
    { offset: 0.25, transform: 'translate(200px, 0)' }, 
    { offset: 0.5, transform: 'translate(200px, 200px)' }, 
    { offset: 0.75, transform: 'translate(0, 200px)' }, 
    { offset: 1, transform: 'none' }
    ];
animOption = {
    delay: 500, 
    endDelay: 0,
    fill: 'both',
    iterationStart: 0,
    iterations: 50,
    duration: 1000,
    direction: 'normal',
    easing: 'cubic-bezier(.6, 0, 1, .6)'
};
eleanim.animate(animKeyFrames,animOption);

由上面的代码可以看出，关键帧由offset ,以及css相关属性构成。而动画表现形式相关定义在animOption中。
以上写法还有一种方式,由于浏览器支持不多，需要引入插件进行兼容<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.1/web-animations-next.min.js"></script>：

1
2
3
var effect = new KeyframeEffect(eleAnime, animeKeyframes, animeOptions);
var animation = new Animation(effect, eleAnime.ownerDocument.timeline);
animation.play();

关于WAAPI具体就是这些内容，还需实践噻。周六愉快了，最近读书少了，感觉反应都差了，看着大家都挤时间干事，大BOSS每天3个小时的阅读。我惭愧啊。周末还是轻松点，这周约会都没有，还是拉几个基友打球去了。

FEATURED TAGS
技术小记