Web动画API教程4:GroupEffects 及 SequenceEffects

转载自http://www.w3cplus.com/css3/web-animations-api-tutorial-part-4-groupEffects-and-sequenceEffects.html

我们来继续我们关于Web动画API中多动画的探讨,讨论一下现在polyfill中提供的分组和序列功能。

KeyframeEffects

KeyframeEffect传入三个参数:要添加动画的元素、关键帧数组、时间函数timing选项。这些参数都是我们之前使用element.animate()时就已经看过的。这个新对象基本上还是为单独动画绘制的蓝图,我们将会在讨论分组和序列的过程中了解。它不用于启动动画,只能定义动画。

var elem = document.getElementById(‘toAnimate‘);
var timings = {
  duration: 1000,
  fill: ‘both‘
}
var keyframes = [
  { opacity: 1 }.
  { opacity: 0 }
];

var effect = new KeyframeEffect(elem, keyframes, timings);

GroupEffects

尽管它目前还没有提供任何原生实现,甚至在规范Level 1中都找不到,但是polyfill提供了一种将动画分组并一起播放的方法。GroupEffect(即将在规范Level 2中面世)可以给一个或多个KeyframeEffect分组并使它们同时播放。

GroupEffect接受一个effects参数,我们可以把包括了多个动画的KeyframeEffect数组传入。定义好之后,就可以在就绪的时候在默认的时间轴上播放一整组动画。

var elem = document.getElementById(‘toAnimate‘);
var elem2 = document.getElementById(‘toAnimate2‘);
var timings = {
  duration: 1000
}
var keyframes = [
  { opacity: 1 }.
  { opacity: 0 }
];

var kEffects = [
  new KeyframeEffect(elem, keyframes, timings),
  new KeyframeEffect(elem2, keyframes, timings)
];
var group = new GroupEffect(kEffects);
document.timeline.play(group);

SequenceEffects

GroupEffect类似,SequenceEffect允许我们将多个动画组合在一起(由KeyframeEffect指定),但是它们不是平行播放的,而是一个接一个。你也可以,polyfill中有定义,将GroupEffectSequenceEffect一起使用(例如拥有多个序列的同一分组)。

序列动画提供了一些和CSS类似的工作方法,或者是我们目前为止看到的统一动画API的内容。我们需要根据前一个动画的持续时间,或者使用finish回调,来维护动画的延迟时间。这些方法很难维护,而且可能并不精确。

使用之前GroupEffect代码段中的变量:

var sequence = new SequenceEffect(kEffects);
document.timeline.play(sequence);

创建动画的另一种方法

前面我们已经看了使用element.animate()创建动画的方法。这是创建动画的一个比较快速的方法,马上创建马上播放,并获取AnimationPlayer对象的引用。我们一开始是比较关心animate()的,因为它得到Chrome的支持已经有一段时间了,还有polyfill。而Firefox则倾向于通过Animation构造的方法,但是目前还不能使用/演示(而且没有polyfill)。但是,我们会在这里简单介绍一下它,因为它向我们展示了另一种使用KeyframeEffect的方法,而且它在规范Level 1中也有,所以我们应该也很快就可以看到关于它的示例了。

First a reminder of how element.animate() works:

首先是element.animate()的工作原理:

var elem = document.getElementById(‘toAnimate‘);
var timings = {
  duration: 1000,
  fill: ‘both‘
}
var keyframes = [
  { opacity: 1 }.
  { opacity: 0 }
];

elem.animate(keyframes, timings);

使用和上面相同的变量,下面是使用Animation构造的等价代码:

var kEffect = new KeyframeEffect(elem, keyframes, timings);
var player = new Animation(kEffect, elem.ownerDocument.timeline);
player.play();

这里的主要区别是,动画不是立即开始播放的,所以要提前创建后边播放的动画。

接下来

因为规范Level 2使得这个方法通过了工作草案,我们应该可以看到这些不同Effects的更多详细定义。本系列教程计划还有两篇文章。下次我们会再次看看,将来还有哪些内容是我们比较期待可以很快看到的。

时间: 2024-10-07 17:19:41

Web动画API教程4:GroupEffects 及 SequenceEffects的相关文章

Web动画API教程2:AnimationPlayer和Timeline

本文转载: Web动画API教程2:AnimationPlayer和Timeline

Web动画API教程: 总结

转载自http://www.w3cplus.com/css3/web-animations-api-tutorial-animations-conclusion.html 我们前面已经讲解了很多内容,而且希望能够解决Web动画API到底是什么的问题.在总结这个系列时,我们将回顾一下我们已经讨论的内容,然后再看一下有哪些内容还没有实现的. 为什么这么费心API呢? 在第一篇的导论中就已经讨论了API是如何应运而生,为了将CSS.JS.SVG创建动画的方法糅合到一起,提取它们的优点,提供一种统一的方

Web动画API教程3:多个动画

转载自http://www.w3cplus.com/css3/web-animations-api-tutorial-part-3-multiple-animations.html 在关于AnimationPlayer和时间轴的讨论之后,我们来看看多动画和多player吧. 给一个元素添加多个动画 在这个示例中,每个矩形被应用了三个动画(其中包括变换.透明度和颜色).你可以给一个元素多次调用animate(),类似CSS中的多动画. 使用的CSS: #toAnimate { animation:

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

转载自http://www.w3cplus.com/css3/web-animations-api-tutorial-part-1-creating-a-basic-animation.html 我们已经初步了解了统一web动画API的内容,但是我们还没有真正去对规范的细节进行探讨,所以现在开始吧. WAAPI为你提供了比你用于CSS动画更多的控件,但是在了解它们之前,我们先打一下基础:如何使用这个API创建一个基本的动画? 创建一个关键帧动画 如果你对CSS Transition和animat

Web动画API教程5:可爱的运动路径(Motion Path)

转载自http://www.w3cplus.com/css3/web-animations-api-tutorial-part-5-the-loveable-motion-path.html 终于.沿路径的动画,不再是SVG的专利! Motion Path:规范的当前方向 随着API规范已经制定好并且通过,运动路径motion path也先后出现了不同的形式.单方向最初看起来可能是Effect的形式(如上一篇中讨论的GroupEffect),但随后Motion Path作为一个CSS模块慢慢的一

Web动画:学习使用API

转载自http://www.w3cplus.com/animation/web-animations-learning-to-love-the-api.html 如果你使用过SVG,你应该知道可以使用SMIL给SVG添加动画.CSS Transitions和keyframes动画都可以操作CSS属性来添加动画.requestAnimationFrame() 使得浏览器可以在下一帧执行之前,请求一个动作. 但是每一中动画技术都不是完美的,各自有各自的问题. 现代浏览器正在逐步淘汰SMIL.Chro

【ASP.NET Web API教程】6.1 媒体格式化器

http://www.cnblogs.com/r01cn/archive/2013/05/17/3083400.html 6.1 Media Formatters6.1 媒体格式化器 本文引自:http://www.asp.net/web-api/overview/formats-and-model-binding/media-formatters By Mike Wasson|March 8, 2012作者:Mike Wasson|日期:2012-3-8 This tutorial shows

Yii2框架RESTful API教程(二) - 格式化响应,授权认证和速率限制

之前写过一篇Yii2框架RESTful API教程(一) - 快速入门,今天接着来探究一下Yii2 RESTful的格式化响应,授权认证和速率限制三个部分 一.目录结构 先列出需要改动的文件.目录如下: web ├─ common │ └─ models │ └ User.php └─ frontend ├─ config │ └ main.php └─ controllers └ BookController.php 二.格式化响应 Yii2 RESTful支持JSON和XML格式,如果想指定

Yii2框架RESTful API教程(一) - 快速入门

前不久做一个项目,是用Yii2框架写一套RESTful风格的API,就去查了下<Yii 2.0 权威指南 >,发现上面写得比较简略.所以就在这里写一篇教程贴,希望帮助刚接触Yii2框架RESTful的小伙伴快速入门. 一.目录结构 实现一个简单地RESTful API只需用到三个文件.目录如下: frontend ├─ config │ └ main.php ├─ controllers │ └ BookController.php └─ models └ Book.php 二.配置URL规则