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

转载自http://www.w3cplus.com/css3/web-animations-api-tutorial-part-3-multiple-animations.html

在关于AnimationPlayer和时间轴的讨论之后,我们来看看多动画和多player吧。

给一个元素添加多个动画

在这个示例中,每个矩形被应用了三个动画(其中包括变换、透明度和颜色)。你可以给一个元素多次调用animate(),类似CSS中的多动画。

使用的CSS:

#toAnimate {
  animation: pulse 1s, activate 3000ms, have-fun-with-it 2.5s;
}
@keyframes pulse { /* ... */ }
@keyframes activate { /* ... */ }
@keyframes have-fun-with-it { /* ... */ }

使用Web动画API:

var animated = document.getElementById(‘toAnimate‘);
var pulseKeyframes, //定义关键帧变量
    activateKeyframes,
    haveFunKeyframes;
var pulse = animated.animate(pulseKeyframes, 1000); //第二个参数是持续时间的有效简写
var activate = animated.animate(activateKeyframes, 3000);
var haveFunWithIt = animated.animate(haveFunKeyframes, 2500);

使用Web动画API,它可以创建三个AnimationPlayer,每个都可以暂停、播放、结束、取消,也可以通过时间轴或播放速率来进行控制。

获取AnimationPlayers

所以你已经开始了一个动画并且正在播放,但是当你给元素调用animate()函数的时候,没有获取到AnimationPlayer的引用。这下该怎么办呢?

Web动画API创建默认时间轴,并且将它直接作为文档的属性使用:document.timeline。它目前只在Firefox Nightlypolyfill中可以使用。关于这块有非常多的内容,但是我们现在先看某个具体的方法。

var players = document.timeline.getAnimations();
//返回所有有效动画的数组(不是finished也不是canceled的)

在CodePen示例中,你会看到这些点是以随机的持续时间、延迟和无限长的变换在移动的。“Pause All”的按钮调用了getAnimations()函数,循环访问所有返回的player,然后一个一个将它们暂停。

尝试编辑CodePen,把iterations的值从Infinity修改成1,然后先让动画播放,再按下暂停键。你会发现getAnimations()没有返回player。这是因为所有的动画都已经finished,这个方法只返回running/pause状态的动画。

接下来

在下一篇文章中,我们会看看创建一个WAAPI动画的不同方法(因为不是只有element.animate可以创建动画)。提示:document.timeline会经常露面的。

时间: 2024-11-04 16:27:18

Web动画API教程3:多个动画的相关文章

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教程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()

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前端入门到实战:css动画优雅降级的简单总结

CSS动画优雅降级的简单总结 CSS动画相关属性 transition:兼容性 transform 3D:兼容性 transform 2D:兼容性 animation: 可以看到动画在IE8(这里主要讨论IE)及以下完全不支持,IE9由于只支持transform(非transform3d) 优雅降级 <div class="a"></div> CSS: web前端开发学习Q-q-u-n: ××× ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(

android动画详解三 动画API概述

· 属性动画与view动画的不同之处 view动画系统提供了仅动画View 对象的能力,所以如果你想动画非View 对象,你就要自己实现代码. view动画系统实际上还被强制仅能对 View 的少数属性进行动画,比如缩放和旋转,而不能对背景色进行. view动画的另一个坏处是它仅修改View的绘制位置,而不是View的实际位置.例如,如果你动画一个移动穿越屏幕,button的绘制位置是正确的,但实际你可以点击它的位置却没有变,所以你必须去实现你自己的逻辑来处理它. 使用属性动画系统时,这个限制被

室外设计 3D室外效果图教程 Sketchup园林景观教程 室外漫游动画实例教程 景观设计手绘教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

HTML5重力感应小球冲撞动画实现教程

今天我们来分享一款很酷的HTML5重力感应动画教程,这款动画可以让你甩动页面中的小球,小球的大小都不同,并且鼠标点击空白区域时又可以生成一定数量的小球.当我们甩动小球时,各个小球之间就会发生互相碰撞的效果,并且在运动过程中模拟了重力感应的物理效果.你可以在DEMO演示中来尝试一下. 你也可以在这里查看在线演示 接下来我们来分析一下这款超酷的HTML5重力动画实现的思路及源码,主要由HTML代码和Javascript代码组成. HTML代码: <div id="canvas">