begin ,为动画开始时间,可以理解为延迟时间。0s表示立即开始动画。也可以是分号分隔的一组值,例如beigin="3s;5s",表示的是3s之后动画开始,6s时候动画再重新开始(如果之前动画没走完,会立即停止从头开始)。
dur ,为动画时间,dur越小,动画越快。
values ,表示attributeName指定属性的值变化,可以是一个值,也可以是用分号分隔的多个值,这里的"1;0;1"表示“不透明->透明->不透明”,即闪烁效果。
repeatCount ,表示动画重复次数,indefinite=无数次
<g> 标签很简单,就是把包起来的元素打成组合,这样animate就只针对 <g> 内的元素执行动画了。
效果如下:
4.4 从SVG提取爆竹代码打开AI生成的SVG文件,只取爆竹的矢量路径代码:
4.5 加入爆竹
加入爆竹代码,使用 进行包裹,然后通过调节 的translate调节位置。
<svg version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"> <g> 文字代码(略) </g> + <g> + <path d="M37.1,124.13v3.45a20.83,20.83,0,0,1-3.36,12.28,21.27,21.27,0,0,0-3.54,11.86,3.45,3.45,0,0,0,3.45,3.45h0a3.45,3.45,0,0,0,3.45-3.45h0c0-3.88,1.1-5.78,2.62-8.41A27.61,27.61,0,0,0,44,127.58v-3.45H37.1Z" transform="translate(-16.4 0)" fill="#c83741" /> + <path d="M50.9,124.13v72.42A3.45,3.45,0,0,0,54.34,200h0a3.45,3.45,0,0,0,3.45-3.45h0V124.13H50.9Z" transform="translate(-16.4 0)" fill="#963737" /> + <path d="M26.76,37.91v86.22a3.45,3.45,0,0,0,3.45,3.45H57.8a3.45,3.45,0,0,0,3.45-3.45V37.91Z" transform="translate(-16.4 0)" fill="#ff4b4b" /> + <path d="M26.76,37.91H61.24V51.71H26.76Z" transform="translate(-16.4 0)" fill="#c83741" /> + <path d="M17.08,36.27A365.1,365.1,0,0,0,40.89,1.75a3.64,3.64,0,0,1,6.23,0,365,365,0,0,0,23.8,34.51,3.14,3.14,0,0,1-2.46,5.09H19.55A3.14,3.14,0,0,1,17.08,36.27Z" transform="translate(-16.4 0)" fill="#ff4b4b" /> + <path d="M61.24,58.6,26.76,68.95V55.15L61.24,44.81Zm0,27.59L26.76,96.54V82.74L61.24,72.4Zm0,27.59L26.76,124.13V110.33L61.24,100Z" transform="translate(-16.4 0)" fill="#ffcf65" /> + <path d="M61.24,51.7v-6.9l-23,6.9Z" transform="translate(-16.4 0)" fill="#ffb450" /> + </g> </svg>
4.6 制作愿望牌SVG
通过AI制作愿望牌SVG,记得通过Command+Shift+O,把文字转化为矢量。然后按照3.3章节导出SVG。
4.7 加入愿望牌
愿望牌是在爆竹升天后显示的,实际上是盖在了爆竹前面,爆竹并没有消失。所以愿望牌的代码应该写在爆竹代码的后面。从SVG提取愿望牌代码参照4.4章节,并调节位置,加入后的代码如下:
<svg version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"> <g> 文字代码(略) </g> <g> 爆竹矢量代码(略) </g> + <g> + 愿望牌矢量代码(略) + </g> </svg>
效果如下,愿望牌完全挡住了爆竹:
4.8 设置愿望牌初始属性
由于愿望牌初始状态未不可见,所以将opacity设为0。
<svg version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"> <g> 文字代码(略) </g> <g> 爆竹矢量代码(略) </g> M <g> 愿望牌矢量代码(略) </g> </svg>
5 SVG点击交互
5.1 爆竹升天
我们要实现的是通过“一次点击”,爆竹上天,然后愿望牌出现。爆竹和愿望牌要打成组。
接下来,使用 实现click触发动画。
<svg version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"> <g> 文字代码(略) </g> + <g> + <animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="never"></animateTransform> <g> 爆竹矢量代码(略) </g> <g> 愿望牌矢量代码(略) </g> + </g> </svg>
关键属性讲解:
type , attributeName="transform"的值,可以是 translate、scale、rotate、skewX、skewY。
fill ,动画间隙的填充方式。支持参数有:freeze、remove。remove是默认值,表示动画结束直接回到开始的地方。freeze表示动画维持结束后的状态。