不炫技，SVG+CSS3 旋转动画属性就能实现的梦幻效果

CSS3的动画相关的基础的属性基本都涉猎过了，我的认为，其中最复杂的是d:path()路径变形动画，超过3D，而位移、轨迹、旋转、缩放、斜切什么的，相对简单一些，但做为非动画设计师而言，灵活的掌握这些基本的动画加以无穷无尽的变换，就已经能作出不少华丽丽的效果了，这篇呢，源于作一个练习时，AI的连续旋转复制功能，试着作了几个动效，简单、省时、高效，最主要的是用到CSS3的transform:rotate()旋转属性，辅以位移和缩放。

1.最基本的旋转动画

下面这张效果图，粗通AI的设计师小伙伴们必定都不会陌生，在AI里面就是ctrl+D连续复制的体力活。

若是把连续旋转复制转成CSS3语言，也是极简单的。来分析一下上面的图形，我作的时候每次旋转的角度为10度，就意味着有36朵花瓣，那对应SVG里应该有36个路径 <path>，若是是AI直接导出的SVG看一下代码，也是密密麻麻的罗列，由于都是相同的形状，天然有简单的方法来实现，只需定义一个被重复使用的图形，有两种方法 <defs>元素和 <symbol>元素来定义， <use>元素来引用，那由于 <symbol>元素使用范围更宽泛一些，因此咱们须要的工做就简化成，在AI里作一片花瓣的基础图形，而后导出路径后，定义以下

<symbol id="single">
 <path d=""/> <!--此处为AI导出的单片花瓣的路径-->
 </symbol>
复制代码

先来第二片花瓣（也就是第一个旋转的花瓣），CSS部分定义以下：

@keyframes leaf1{
0%{transform:rotate(0deg); transform-origin:400px 300px}
100%{transform:rotate(10deg); transform-origin:400px 300px}
}
#petal1{animation:leaf1 ease 0.1s both;}
复制代码

DOM部分，只须要用<use>元素引用定义好的花瓣而且赋给它旋转的动效就能够了。

好了，剩下的仍是体力活，须要把<use>元素部分复制34次，而后CSS动画部分复制34次，固然了，动画那里，须要递增一下时间和旋转角度，好比接下来那片花瓣<use id="leaf2" xlink:href="#single"/>对应以下动画属性：

@keyframes leaf2{
 0%{transform:rotate(0deg); transform-origin:400px 300px}
 100%{transform:rotate(20deg); transform-origin:400px 300px} /*角度增长10度*/
 }
 #leaf2{animation:leaf2 ease 0.2s both;} /*动画时间增长0.2s*/
复制代码

因此在作动效时发现，不会js绝对是短板，尤为在这种批量的活中，原本就是repeat的工做，用SCSS的话，$deg: $deg + (360deg / 36)和animation: leaf#{$i} 0.2s ease both来代替那一堆罗里吧嗦的动画定义是否是很爽，哎，不说了，不过，这个动效确实瓣瓣有些多，下面咱们会简化，另外，相信我，已经试过了，别手抽的话，大概10分钟也就搞完了。如今，若是不出意外，已经能获得下面这朵绽开的花了

彷佛还不错，但仍有须要优化的地方，首先，花瓣是带透明度的，一开始未旋转时重复在相同区域，层层叠加致使透明度下降，看上去不像是旋转复制的效果，而是把一大把重叠的花瓣依次展开的效果（脑补一下赌神中一封扑克“唰”的展开的场景），若是仔细看看咱们的实现过程，就是如此，那这里想要达到每一瓣都是从上一瓣的位置复制出去，怎么办，改呗。这里实现的思路也是有多种，我是用改透明度的方法。放上前三片旋转花瓣的CSS3定义和上面的对比一下（不是要罗代码，只是太少看不出规律）：

@keyframes leaf1{
 0%{opacity:0; transform:rotate(0deg); transform-origin:400px 300px} /*增长初始透明度的定义0，即初始不可见*/
 100%{transform:rotate(10deg); transform-origin:400px 300px}
 }
 #leaf1{animation:leaf1 ease 0.1s both ; }

 @keyframes leaf2{
 0%{opacity:0; transform:rotate(10deg); transform-origin:400px 300px} /*增长初始位置定义，即上一朵花瓣的位置*/
 100%{transform:rotate(20deg); transform-origin:400px 300px} 
 }
 #leaf2{animation:leaf2 ease 0.1s both 0.1s; } /*动画时间统一为0.1s并增长动画延迟时间的设置0.1s*/

@keyframes leaf3{
0%{opacity:0; transform:rotate(20deg); transform-origin:400px 300px}
100%{transform:rotate(30deg); transform-origin:400px 300px}
}
#leaf3{animation:leaf3 ease 0.1s both 0.2s;} /*动画延迟时间0.2s，依次类推*/
复制代码

在进行一番纯体力运动后，完成了以下优化后的效果：

好了，以此为基础，来试试其余效果。（为了好作，我把花瓣数量减半了）。好比换换旋转原点transform-origin的值，改一下颜色，就获得了下面这种：

上面效果都是单色的，没有体现设计师小伙伴们那卓越的配色效果对不对？虐心的改造来了，好比每朵花瓣单独定义颜色（对我这种毫无审美的假设计师而言只能用系统的色板取色），再随随便便换换基础图形（即 <symbol>定义的图形），就获得了下面这种蝴蝶展翅：

好啦，剩下的本身玩吧，各类形状，走起，总之，你在AI里面能实现的此类效果均可以经过这种动画方式来实现。

2.叠加缩放动画

嫌弃单纯的旋转复制的效果太单调？没有关系，咱们来一个个叠加其余动画属性，先叠加个简单的，缩放动画。这个也是在AI中经常使用的功能之一，缩放和旋转操做后，反复的ctrl+D来复制操做。看下下面这张图，解析一下

不过是最里面的圆角矩形先等比例放大后旋转一个固定角度，后面的依次重复这种变换， 缩放+旋转→复制，那咱们来转成CSS3属性。 基于上面的基础，首先把 <symbol>定义的基础图形改一下，旋转的那里不用管，如今要增长一个缩放的属性 scale()设置。好比在这个例子里，我缩放是按1.2倍来进行的，以第一个进行变化的图形为例，CSS属性定义以下：

@keyframes leaf1{
0%{opacity:0; transform:rotate(0deg); transform-origin:400px 300px}
100%{transform:rotate(30deg) scale(1.2); transform-origin:400px 300px} /*增长缩放的比例设置*/
}
复制代码

这里比旋转变形略复杂的在于比例的计算，不像角度那样能够30度60度90度……直接叠加，缩放比例则是1.二、1.2*12.、1.2*1.2*12……须要稍微计算一下。这样咱们就获得了下面这个旋转叠加缩放的复制动效：

一样，改改形状和变形的原点，能够很轻松的作出下面这种

这里除了填充颜色不一样，还稍微改了一下，用了CSS3的混合模式，增长了一个属性值mix-blend-mode:lighten，也就是咱们PS或者AI混合模式中的变亮。 transform:scale()属性与旋转不一样，是支持两个值的，好比写成这种transform:scale(1,1.3)就意味着宽度不变，高度放大1.3倍，我改了一个三角形的看一下效果。

只是简单的示例，效果不是很好，有创意的设计师能够自行发挥，知道能够分开定义就能够啦。

3.叠加位移动画

有了上面关于叠加缩放动画的尝试，叠加位移动画就简单多了。看一下下面这种动效效果，这是一个很讨巧的动画。

之因此说它讨巧，是由于仔细分析动效，全部花瓣的位移都是一致的，也就是说我把位移属性设置到了全部花瓣元素的组合 <g>元素上。这样的话，我赋给组合一个位移属性设置 transform:translateX(50px) translateY(50px)，就能够实现这种效果了。关于旋转原点的定义，由于每一个花瓣都是在一个动态位移的过程当中，因此我把旋转原点定义为 transform-origin:30% 30%，让每一个花瓣都以本身的固定的一个点为基准。

关于渐变色的配色，这里有个小技巧能够参考一下。

咱们经常使用的色值，除了RGB和十六进制表示方法，还有一个hsl（色相、饱和度、明度）表示方法。如上图所示，最深色和最浅色的hsl值获取到以后，剩下的颜色能够手动去写。

在考虑用什么来展示这种旋转复制的位移动画时，忽然想到了一个高逼格的图形，鹦鹉螺的黄金螺旋！来看下下面这张图。

被复用的是一个1/4扇形，旋转角度为-90度（90度为顺时针旋转），放大的比例有规律可寻，即斐波那契数列。位移值最简单的计算方法是和上一个相比较，好比图形7和图形6相比，垂直方向没有位移，水平方向正向位移为图形5的宽（高）度。 **由于这里transform设置了scale、rotate、translate三种属性，在书写顺序的时候，必定要把rotate放到scale**的后面，防止由于旋转致使坐标系变化，位移值很差推算。

这样，咱们就获得了一个完美黄金螺旋动效。这里我惟一不能理解的是若是不是填充而是描边属性，描边值会等比例放大。

对于此类旋转复制动画，最重要的是<symbol>元素定义重复使用的图形，而后<use>元素去引用。重复几回就引用几回。