SMIL简介1、SVG语言简介2、SVG SMIL动画详解2.1、SVG SMIL动画元素介绍2.1.1、set元素2.1.2、animate元素2.1.3、animateColor元素2.1.4、animateTransform元素2.1.5、animateMotion元素2.1.6、自由组合2.2、SVG SMIL动画属性详解2.2.1、attributeName2.2.2、attributeType2.2.3、from、to、by和values2.2.4、begin和end2.2.5、dur2.2.6、calcMode、keyTimes和keySplines2.2.7、repeatCount和repeatDur2.2.8、fill2.2.9、accumulate和additive2.2.10、restart2.2.11、min和max2.2.12、动画的暂停与播放SMIL是Synchronized Multimedia Integration Language同步多媒体集成语言的首字母缩写属于XML的一种。换言之这种语言也是使用一堆尖括号括起来的XML元素标签来实现效果的。下面是一段内容示意从事Web开发的前端人员对SMIL通常比较陌生因为他们平时都是和XHTML打交道应用SMIL的场景不多。比如前些年移动、联通等运营商经常发送的彩信[也就是MMSMultimedia Messaging Service多媒体消息服务​]使用的就是SMIL可以包含视频、音频和图片等不少多媒体技术人员戏称MMS为“迷你SMIL”(Mini-Me SMIL)。在其他领域SMIL的作用和MMS的类似包括时间定义、布局、动画、视觉渐变和多媒体嵌入并且SMIL可以和其他XML相结合迸发出更加强大的生命力。例如VoiceXML与SMIL相结合可以在语音浏览器中提供对几个预先提供的页面或幻灯片的顺序阅读将SMIL与MusicXML相结合可用于创建无限可重组的音乐表序列将SMILVoiceXML或SMILMusicXML与RSS或Atom相结合可用于创建具有嵌入式超链接的音频伪播客将SMILSVG与VoiceXML和/或MusicXML相结合可用于创建具有嵌入超链接的自动音频矢量图形动画。其中与Web密切相关的就是SMILSVG与动画相结合而诞生的SVG SMIL animation这是SMIL开发组和SVG开发组合作开发的规范它可以让我们不依赖任何JavaScript代码就能实现炫酷的交互动画效果很多微信公众号中炫酷的交互阅读体验就是使用SVG SMIL animation实现的。在详细介绍SVG SMIL动画之前先要简单介绍一下SVG语言。1、SVG语言简介svg元素仅仅是SVG语言中一个元素而已SVG语言共有60多个元素。其中所涉及的知识简单的非常简单但是深奥的也确实深奥比如SVG中的滤镜元素以fe开头的约30个元素就需要对图形表现有深刻的理解才能掌握没有多年持续不断的积累断然是无法消化的。这些内容并非本书重点且我也有意向单独出一本介绍SVG的书籍因此对于SVG这里仅简单介绍一下。SVG是Scalable Vector Graphics可缩放矢量图形的首字母缩写也是XML的一种规范出来得很早比CSS还要早。但是直到IE 9浏览器才开始正式支持它所以在早些年的Web开发中SVG并不受待见后来随着Web技术的发展以及旧浏览器的淘汰SVG成为Web开发中极为重要的一门语言。例如目前基本上所有Web网站的小图标方案都是采用SVG实现的并有诸多与之配套的工具。另外SVG还在动效表现和特效实现上大放异彩前者需要配合JavaScript和CSS实现后者使用SVG滤镜。在过去SVG的图形效果只能通过HTML属性实现例如实现一个有边框的圆形效果上面的代码表示在一个300像素宽、150像素高的SVG画布中绘制一个圆形圆心坐标为(100, 50)半径为40像素边框为黑色边框宽度为2像素填充色为红色。效果如图所示。现在Web愈发开放上图中的图形效果可以直接使用CSS进行设置例如因此对于常规的SVG图形效果你就当作普通的HTML学习即可没有什么难度。对SVG就介绍这么多接下来我们好好介绍SVG SMIL动画。SVG SMIL动画可以实现以下这些效果动画元素的数值属性(X, Y, …)。动画属性变换平移或旋转​。动画颜色属性。沿着运动路径运动。支持点击交互动画。虽说目前的Web技术可以实现上述所有效果但是这些效果要么需要借助CSS代码要么需要借助JavaScript代码而SVG SMIL动画不需要借助任何CSS和JavaScript代码只需要在页面添加几个animate元素即可。例如有下面这段SVG代码其中使用了animateTransform元素该元素是专门用来实现SVG SMIL动画的。这里可以实现一个不断旋转的“马”字效果动画分解示意效果如图所示。可以通过在浏览器中输入https://www.htmlapi.cn/assets/horse.svg访问来体验其效果。正因为SVG SMIL动画是纯HTML语言的所以它才能在诸如微信公众号这样的编辑器中使用而不会担忧引发安全问题如果编辑器保留CSS和JavaScript势必会影响公众号页面的交互与渲染​。2、SVG SMIL动画详解2.1、SVG SMIL动画元素介绍SVG SMIL动画的元素其实只有5个分别如下setanimateanimateColoranimateTransformanimateMotion它们可以分别实现不同类型的动画。2.1.1、set元素set的意思是设置此元素没有动画效果。大家可能会有疑问它没有动画效果怎么会是SVG SMIL动画五大元素成员之一呢set元素虽然不能触发连续的动画但是其还是可以实现基本的延迟功能的即它可以在特定时间之后修改某个属性值。例如有如下所示的代码此时​“马”这个文字图形会在3秒之后从横坐标160的位置移动到60的位置。可以通过在浏览器中输入https://www.htmlapi.cn/assets/horse-set.svg访问来体验其效果。这里出现的attributeName、attributeType等属性后面会统一讲解。2.1.2、animate元素它是基础动画元素实现单属性的动画过渡效果。例如下面这段代码可以实现一个不断水平移动的“马”的动画效果。可以通过在浏览器中输入https://www.htmlapi.cn/assets/horse-animate.svg访问来体验其效果。2.1.3、animateColor元素一看就知道它是实现颜色动画的。不过animate元素同样可以实现颜色动画因此此属性已经被废弃。2.1.4、animateTransform元素此元素就是最开始案例中使用的元素。一看就知道它是用来实现transform变换动画效果的。知识是一脉相承的这里的transform变换与CSS的transform变换是一个原理。例如要实现一个尺寸不断放大的“马”图形效果可以这样设置可以通过在浏览器中输入https://www.htmlapi.cn/assets/horse-scale.svg访问来体验其效果。这里的type属性值可以是scale、rotate、translate、skewX、skewY分别表示缩放、旋转、平移、X轴倾斜、Y轴倾斜。2.1.5、animateMotion元素animateMotion元素可以让SVG图形沿着任意的路径运动例如下面这个案例其中path元素用于描述运动的路径和最终的动画效果见下图无关。截图是静态的无法展现动画的精髓推荐通过在浏览器中输入https://www.htmlapi.cn/assets/horse-motion.svg访问来体验其效果。不过上面的效果有一个问题那就是这个“马”行走的姿势有点假明明“路”是崎岖的但马儿的运动方向一直都是水平的并不符合物理学规律。别担心我们可以略做处理让“马”的表现更真实通过设置rotate“auto”可以让物体按照路径的切线方向运动自然表现就更加真实了如图所示。推荐通过在浏览器中输入https://www.htmlapi.cn/assets/horse-motion-rotate.svg访问来体验其效果。不过有时候SVG中的图形可能是圆形、方形这样有规律的图形是使用circle元素和rect元素渲染的而animateMotion元素的运动路径只能使用path属性此时就需要转换也就是将任意的SVG图形元素转换为用path属性表示这并不难大家可以访问此项目以了解相关的实现https://gitee.com/zhangxinxu/svg-to-path。2.1.6、自由组合实际的动画效果不可能总是通过一个属性修改的。比如位置和透明度同时变化时怎么办呢简单直接组合就可以了如以下代码其实现的是马儿入山影无踪的意境效果连续截图见下图。可以通过在浏览器中输入https://www.htmlapi.cn/assets/horse-combine.svg访问来体验其效果。至此体验SVG SMIL动画效果的旅程就结束了。如果你单纯想感受一下、开阔一下眼界那么以上内容就足够了如果你打算深入学习SVG SMIL动画那么下面的属性详解则不容错过。2.2、SVG SMIL动画属性详解SVG SMIL动画的属性很多不过理解成本都不高。2.2.1、attributeNameattributeName属性表示要变化的元素属性名称可以是元素直接暴露的属性。例如对于本文反复出现的「马」对应的text元素上的xy或者font-size。CSS属性。例如透明度opacity属性。2.2.2、attributeTypeattributeType属性支持CSS、XML、auto三个固定的值作用是表明attributeName属性值的列表。其中x、y、transform属于XMLopacity属于CSSauto为默认值是自动判别实际上是先作为CSS类别处理如果发现不认识则直接按XML类别处理的意思。因此如果你不确信某个属性是XML类别还是CSS类别我的建议是不设置attributeType属性值直接让浏览器自己去判断几乎无差错。不知大家有没有和我一样的疑问​“既然浏览器可以自己判断属性类别那么这个属性还有什么意义吗​”我猜测针对某些属性XML能起作用CSS也能起作用例如font-size此时就需要明确一下归属。2.2.3、from、to、by和values上面4个属性属于同一个家族是最具哲理的一个家族。它们解决的是非常有哲理的问题你从哪里来要到哪里去……fromvalue动画的起始值。tovalue指定动画的结束值。byvalue动画的相对变化值。valueslist用分号分隔的一个或多个值可以看成动画的多个关键值点。from、to、by和values属性虽然属于同一个家族但是它们之间还是有制约关系的有以下一些规则如果动画的起始值与元素的默认值是一样的则from属性可以省略。不考虑values属性to和by两个属性至少需要有一个出现否则没有动画效果。to表示绝对值by表示相对值。以位移为例如果from值为100to值为160则表示移动到160这个位置但是如果by值为160则表示移动到100160260这个位置。如果to属性和by属性同时出现则by属性无效只识别to属性。如果to、by、values 3个属性都没被设置则自然没有动画效果。如果任意包括from属性一个属性的值不合法则从规范上说是没有动画效果的。但是据我测试在FireFox浏览器下确实如此但是在Chrome浏览器下特意做了容错处理。例如针对本来是数值的属性写了一个诸如a这个不合法的值其会被当作0来处理动画效果依然存在。values属性可以是一个值或多个值。根据我在Chrome浏览器下的测试它是一个值的时候是没有动画效果的它是多个值时有动画效果。当values值被设置并能识别时from、to、by的值都会被忽略。那么values属性是干什么的呢别看名字挺大众的其还是有些“功力”的。我们实现动画不可能就是单纯地设置为从a位置到b位置有时候需要去c位置过渡一下。此时实际上有三个动画关键点而from、to、by属性只能驾驭两个这就到了values属性大显身手的时候了例如下面这个聪明的马儿来回跑的效果就是通过values属性设置三个动画关键点实现的可以通过在浏览器中输入https://www.htmlapi.cn/assets/horse-values.svg访问来体验其效果。2.2.4、begin和endbegin属性指动画开始的时间看上去很简单实际上并没有看上去的那么简单上面出现的beigin3s只是最简单、最基本的表示。begin属性的定义是分号分隔的一组值单值只是其中的情况之一。例如beigin3s6s表示的是3s后动画走一下6s时动画再走一下如果之前动画没走完则会立即停止从头开始​。所以当一次动画时间为3s即dur“3s”同时没有设置repeatCount属性时我们可以看到动画似乎连续执行了2次。既然这里提到了时间就顺势简单讲一下SVG animation中的时间表示也适用于dur属性和end属性​。常见的单位有h、“min”、“s”、“ms”。时间值支持的格式和规则相当复杂不过我们只需要了解一下最常见的基本使用方法就足够了。上面的单位含义都是英文单位的缩写。例如h表示小时(hour)。时间值支持小数写法因此90s也可以用1.5min表示。时间值还支持hhmmss这种写法因此90s也可以用0130表示。还有一点十进制的小数值是秒的浮点定义就是说如果begin1.5没有单位这里的小数点表示秒也就是1.5s的意思。所以上面多次出现的beigin3s也可以简写为beigin“3”。我测试了一下FireFox和Chrome浏览器对其都是支持的。begin的值除普通value外还有下面这些类别的valueoffset-valueoffset-value表示偏移值数值前面有或-偏移计算是相对于begin值而来的。syncbase-valuesyncbase-value基于同步确定的值语法为[元素的id].begin/end/-时间值。就是说借用其他元素的begin值再进行加减可以准确实现两个独立元素的动画级联效果。看完下面的例子你一定会豁然开朗对上面的offset-value也会有一定的认知。代码如下于是就实现了一个马儿折线跑的效果先横向移动再无缝纵向移动大家可以通过在浏览器中输入https://www.htmlapi.cn/assets/horse-animate-x-y.svg访问来体验其效果。可以看到后面attributeName为y的元素的begin值是x.end。x.end中的x就是上面animate元素的id值而end是动画元素都有的一个属性表示动画结束的时间。因此beginx.end的意思就是当id值为x的元素动画结束的时候执行动画类似于PowerPoint动画的“上一个动画之后”的选项。当然我们还可以增加一些偏移值例如begin“x.end-1s”就表示id值为x的元素动画结束前一秒开始纵向移动。event-valueevent-value表示与事件相关联的值类似于PowerPoint动画的“点击执行该动画”​。语法是[元素的id].[事件类型]/-时间值。举个例子假设有下面这段SVG代码则会看到图所示的渲染效果此时点击图中黑色的圆马儿就会自己跑起来可以通过在浏览器中输入https://www.htmlapi.cn/assets/horse-click-run.svg访问来体验其效果。代码的关键点就是begin“circle.click”。其中circle为circle元素黑色圆的id值click表示点击事件。如果你想实现点击圆2秒钟后马儿开始跑很简单加上偏移时间就可以了—begin“circle.click2s”。需要注意的是这类与事件关联的SVG需要内联在页面中否则无论是click还是其他值都不会有效果。repeat-valuerepeat-value指重复多少次之后做什么语法为[元素的id].repeat整数/-时间值。举个例子实现马儿水平运动2次之后斜向运动的效果SVG代码如下可以通过在浏览器中输入https://www.htmlapi.cn/assets/horse-repeat-value.svg访问来体验其效果。其中beginx.repeat(2)指的是id值为x的元素的动画重复2次后执行。accessKey-valueaccessKey-value用于定义快捷键即按下某个键动画开始语法为accessKey“character”​。character表示快捷键所在的字符。举个例子按下s键动画开始。SVG代码如下理论上按下键盘上的字母“s”​动画就会执行。但是据我测试在Chrome浏览器版本120下是没有效果的Firefox浏览器很早之前的版本有效果但是现在也没效果了原因不详。大家若有兴趣可以通过在浏览器中输入https://www.htmlapi.cn/assets/horse-accesskey-value.svg访问来看看自己当前的浏览器在按下“s”键后是否有动画出现。wallclock-sync-valuewallclock-sync-value指真实世界的时钟时间定义。时间语法基于在ISO8601中定义的语法如1997-07-16T192030.450100这个不太符合国内人的书写习惯。indefinite“indefinite”就是指字符串值表示“无限等待”​。据说需要beginElement()方法触发或者指向该动画元素的超链接SVG中的a元素才可以。下面的代码是beginElement()方法触发的例子此时点击“马”字图形​“马”就会运动起来。不过我还是推荐使用超链接来触发点击运动因为无须任何JavaScript代码参与案例代码如下此时就会看到下图所示的渲染效果。随后点击红色的文字“点击我”​就可以看到下面的“马”运动起来了。可以通过在浏览器中输入https://www.htmlapi.cn/assets/horse-begin-link.svg访问来体验其效果。最后附上规范上出现的一段文字If no begin is specified,the default value is “0”-theanimation begins when the document begins.If thereis any error in the argument value syntax for begin,thedefault value for begin will be used.它的意思是没有begin属性值或者begin属性解析异常都当作0处理。目前讲述的都是begin属性至于end属性由于其与begin属性除名字和字面含义不一样外其值的种类与表意都是一样的这里就不重复讲述了。2.2.5、durdur属性比begin属性简单它的值只有后面两种常规时间值和indefinite。常规时间值就是3s之类的正常值“indefinite指无限等 待。试想一下动画时间无限实际上就是动画不执行的意思。因此将dur属性值设置为indefinite”与没有设置dur属性或dur属性解析异常的效果是一样的。2.2.6、calcMode、keyTimes和keySplinescalcMode、keyTimes和keySplines 3个属性用来控制动画是匀速的还是先快后慢的抑或是先慢后快的。calcModecalcMode属性支持4个值discrete、linear、paced和spline中文意思分别是离散、线性、踏步、样条。discrete表示从from值直接跳到to值。linear表示除animateMotion元素以外的元素的calcMode默认值。动画从头到尾的速率都是一致的。paced表示通过插值让动画的变化步调平稳均匀。仅支持线性数值区域内的值这样点之间“距离”的概念如position、width、height等才能被计算。如果paced被指定任何keyTimes值或keySplines值都会无效。spline表示插值定义贝塞尔曲线。具体的曲线控制点是被定义在keyTimes属性中的而每个时间间隔控制点是由keySplines属性定义的。keyTimeslistkeyTimes表示关键时间点list表示分号分隔一组值。这里有一些约定的规则首先keyTimes值的数目要和values一致如果是from/to/by动画keyTimes必须有两个值。其次对于linear和spline动画第一个数字是0最后一个是1。最后每个连续的时间值必须比它前面的值大或者两者相等。在paced模式下keyTimes会被忽略如果keyTimes被定义错误和dur属性值为indefinite它也会被忽略。keySplineslistkeySplines表示的是与keyTimes相关联的一组贝塞尔控制点默认为0 0 1 1​。每个控制点都使用4个浮点值表示x1 y1 x2 y2一些常见的keySplines属性值和对应的运动函数曲线见图示意图取自W3C官方文档​。另外只有在spline模式下keySplines属性才有用也是以分号分隔的值的范围为01总是比keyTimes少一个值。如果keySplines值不合法或个数不对则没有动画效果。专业的术语容易让人“云里雾里”​有必要通过案例进一步加以说明如下是4个SVG的代码只展示重要部分其效果大家可以通过在浏览器中输入https://www.htmlapi.cn/13/1-1.html访问来体验。进入页面可以看到4匹马你追我赶的精彩画面其中某一时间的截图画面如图所示。不妨以最后一个SVG为例加以说明最终的动画效果是由values、keyTimes和keySplines三个属性相互配合完成的。values属性确定动画的关键位置keyTimes属性确定到这个关键点需要的时间keySplines属性确定的是每个时间点段之间的贝塞尔曲线也就是具体的缓动表现。这和CSS中的transition动画颇为相似不过也有区别如果将SVG中的动画属性换算成CSS transition动画的属性那么对应的values值只有两个keyTimes只能是0和1贝塞尔曲线只有一个曲线函数要么是ease、linear等关键字要么就是cubic-bezier()函数。而SVG SMIL动画可以指定任意多个动画的起止过程和每个区段的运动细节由此可见SVG SMIL动画比CSS动画强一些。2.2.7、repeatCount和repeatDurrepeatCount表示动画执行次数可以是合法数值或者indefinite无限等待​。repeatDur定义重复动画的总时间可以是普通时间值或者indefinite无限等待​。上述动画只执行3个完整动画和一个1/3个动画因为repeat总时间只有10s。2.2.8、fillfill表示动画间隙的填充方式支持的值有freeze和remove。其中remove是默认值表示动画结束直接回到开始的地方。freeze表示动画结束后像是被冻住了元素保持动画结束之后的状态。2.2.9、accumulate和additiveaccumulate是累积的意思支持的值有none和sum默认值是none。如果accumulate的值是sum则表示将动画结束时的位置作为下次动画的起始位置。additive用于控制动画是否附加支持的值有replace和sum默认值是replace。如果additive的值是sum则表示动画的基础知识会附加到其他低优先级的动画上。举两个例子例子1这里轮到第二个动画的时候路径是从第一个动画路径结束的地方开始的于是三个动画完美无缝地连接起来了。例子2这里有两个类型不同的变换动画一个是scale放大另一个是rotate旋转。通常来说由于它们共用同一个attributeName因此效果是互相覆盖的不过由于这个例子设置的是additive“sum”也就是动画效果是累加的而不是替换的于是就可以实现一边旋转一边放大的效果。大家可以通过在浏览器中输入https://www.htmlapi.cn/assets/horse-animate-sum.svg访问来体验其效果。2.2.10、restartrestart属性诞生的背景如下很多动画的触发与事件相关例如点击某个圆马儿就跑。而且似乎每点一次马儿就跑一下。现在存在这种情况希望马儿只跑一次之后再点击就没有反应。这种需求的出现迫使restart属性出现了。它支持的值有always、whenNotActive、never。always是默认值表示总是也就是点一次圆马儿跑一下。whenNotActive表示动画正在进行的时候是不能重启动画的。never表示动画是一波流。这些属性值都很好理解就不举例了。2.2.11、min和maxmin属性和max属性表示动画执行的最短时间和最长时间支持的值为时间值和media媒介元素有效​max属性还支持indefinite.2.2.12、动画的暂停与播放SVG SMIL动画均是可以随时暂停与播放的假设变量svg表示的就是当前svgDOM元素则SVG SMIL动画的暂停和重启动都可以使用下面的语法来实现例如下面这个SVG示例点击就会暂停再点击就会重新运动。大家可以通过在浏览器中输入https://www.htmlapi.cn/assets/horse-play-pause.svg访问来体验其效果。