#17-不用套件让网站Logo动起来～(SVG SMIL)

要让SVG 动起来，可以使用SMIL：SVG的原生动画规范，
虽然前几年Chrome放话不再支援，但这几年好像暂缓了。

当然不用SMIL就可以用最近超常看到的GSAP套件。
GSAP在网路上的宣传真的是不得了，只要看到SVG动画相关的都是GSAP的教学。
虽然大部分使用都是免费，但只要网站有付费相关的服务/产品，就需要购买他们的授权。
GSAP那个可以自动沿着路径画图功能＆改变SVG图案的morphs真是不得了...

总之今天不偷懒，用原生的SMIL来让Logo SVG小小地动起来吧！

老样子先看成果：

为什麽要用SMIL?

1.有些SVG的路径，譬如说 data (d="" attribute) 是无法被CSS操作的。
2.而有时候当SVG被拿来用作CSS的图片或是背景图，JS没办法操作细节。
这时候SMIL就派上用场。

用法就是在<svg>标签里面加上<animate>
1.选择要动的对象 xlink:href="#group"
2. 要动的属性attributeName
3.属性开始的数值from
4.属性结束的数值to
5.动画持续时间dur
6.动画结束的状态fill，通常都是freeze，表示冻结在最後一格
7.可帮这个动画上id，就可以让其他动画在begin的地方使用
8.啥时开始的begin，不填就是网页load之後，填2s就是load 2s後，或是选择在某个动画结束之後如id.end

上部分code!研究太久了，之後回头再来把注解补好补满！！

（命名也是丑不拉机......）

<svg>
		<!-- ...省略，中间就是那一堆图型啦！-->
		<!-- SVG标签里面的 Animation     -->
		<!-- 1. 最後面那个圆圈圈     -->
    <animate 
    id="1"
    xlink:href="#Ellipse_13"
    attributeName="fill" values="#FF8DD7;#94EFF5;#FEDEB5;#D4F3D9;#FFD0CB"
    dur="1s"
    fill="freeze"
    begin="click" />
    
		<!-- 2. 中间一堆字的群组     -->
    <animate 
    xlink:href="#group"
    attributeName="opacity"
    from="0"
    to="1" 
    dur="0.8s"
    fill="freeze"
    begin="1.end"
    id="2"
    />
    
		<!-- 3. 各种形状的图案：依序是S的图->R的图->两个N的图->A的图->D的图     -->
    <animate 
    xlink:href="#s"
    attributeName="width"
    from="0"
    to="66" 
    dur="0.5s"
    fill="freeze"
    begin="2.end"
    />
    
    <animate 
    xlink:href="#RIN_"
    attributeName="cx"
    from="-14"
    to="14.15" 
    dur="0.5s"
    fill="freeze"
    begin="2.end" />
    
    <animate
    xlink:href="#n_up"
    attributeName="height"      
    from="0"
    to="64" 
    dur="0.5s"
    fill="freeze"
    begin="2.end" />
    
    <animate
    xlink:href="#n_down"
    attributeName="height"      
    from="0"
    to="64" 
    dur="0.5s"
    fill="freeze"
    begin="2.end" />
    
    <animate
    xlink:href="#a_middle"
    attributeName="height"
    from="0" 
    to="77"
    dur="0.5s"
    fill="freeze"
    begin="2.end" />
    
    <animate
    xlink:href="#d_left"
    attributeName="width"
    from="4" 
    to="46"
    dur="0.5s"
    fill="freeze"
    begin="2.end" />
</svg>

</div>

以上！

今天的code: 在这里

点击就可以看到动画喔！

话说这个Logo是我朋友的手工制品牌，有很多日式发带、帽子...
虽然主打婴幼儿产品，但大人的也有客制产品唷！
顺便帮打个广告哈哈 ٩(^ᴗ^)۶ 传送门
台中的朋友也可以到市集逛逛～～

有任何问题或是错误都欢迎批评指教！！

参考文章：

让SVG 自己动起来！SMIL animation动画详解
A Guide to SVG Animations (SMIL)