SVG动画应用-酷炫的图片展现效果

偶然在svgTrick上看到了一个效果，模仿了一下。做者原先也是受到dribble上的一个动效启发，这个效果与svg简直是天做之合。

最后模拟的效果以下，gif有点卡顿，戳戳这里查看网页效果。

作一个酷炫的svg总体效果

咱们先看着动效分析一下，主要能够将动画分红五部分。

• 中心圆从圆心开始消失
• 多个环状进度动画
• 环状总体的旋转动画
• 白色描边动画
• 其余文案动画

一个个对照来看：

中心圆从圆心开始消失

这个效果的完成很简单。只须要在画面正中间画一个svg，svg上是一个顶着边的圆，由于svg的描边是由中间向两侧描边的，控制描边的宽度从填满到0就能够实现咱们想要的效果啦。

这里咱们画的是一个半径为100的圆，也就是用描边彻底填满的宽度须要200。注意控制border-radius和overflow，使超出区域不可见。

<svg class="svg-center" viewBox="0 0 200 200">
    <path class="path-circle" d="M 0 100 A 50 50 1 0 1 200 100 A 50 50 1 0 1 0 100" stroke="#1e1e1e" fill="none" />
</svg>
复制代码

.svg-center{
  border-radius: 50%;
  overflow: hidden;
  stroke-width: 200;
}
@keyframes svgCenter{
    0%{
        stroke-width: 200;
    }
    100%{
        stroke-width: 0;
    }
}
复制代码

多个环状进度动画

这其实就是咱们常见的进度条动画，虽然这个环看起来很粗，不像一条边，可是实际上这也是一个经典的描边动画。

<svg class="svg" viewBox="0 0 1000 1000">
    <g class="wrap-path" fill="none" stroke="#1e1e1e" stroke-width="60">
      <path class="path-1" d="M 420 500 A 50 50 1 0 1 580 500 A 50 50 1 0 1 420 500"/>
    </g>
  </svg>
复制代码

.path-1{
    stroke-dasharray: (80 * 3.15 * 2)  (80 * 3.15 * 2);
    animation: path1 1s both;
}
@keyfraes path1{
    0%{
        stroke-dashoffset: 0;
    }
    100%{
        stroke-dashoffset: (80 * 3.15 * 2);
    }
}
复制代码

由于这里的svg的viewBox一开始定义的是1000*1000,最后咱们会把它同比例放大两倍处理，因此在原画布中，中间须要镂空出50半径的圆形区域，另外仍是根据描边是像两侧描边的设定，因此实际上咱们画的是一个半径为80的圆，描边宽度为60。

多个圆的状况下由于须要获得dasharray等值，一个个计算比较麻烦，能够用scss函数进行编译。对于scss函数编译不熟悉的，推荐使用sassmeister这款在线编译工具，能够实时看到编译结果。

$pathNums: 7 !default; 
$time: 1s !default;
$$cubic-bezier: cubic-bezier(0.77, 0, 0.175, 1);

@for $i from 1 through $pathNums {
    .path-#{$i} {
        stroke-dasharray: ((60 * $i + 20)  * 3.15 * 2)  ((60 * $i + 20)  * 3.15 * 2);
    }
    @if $i%2 == 0{
        $offsetType: 1;
    }@else {
        $offsetType: -1;
    }
    <!-- 动画 -->
    @keyframes path#{$i}{
        0%{
            stroke-dashoffset: 0;
        }
        100%{
            stroke-dashoffset: ((60 * $i + 20)  * 3.15 * 2) * $offsetType;
        }
    }
}
.wrap-container.animation{
    @for $i from 1 through $pathNums {
        .path-#{$i} {
        animation: path#{$i} $time $cubic-bezier both;
    }
  }
}
复制代码

原本打算把path路径也经过函数的方式直接循环定义，可是由于scss编译会自动在冒号后加空格，致使d:path()识别错误，因此这里仍是直接在html中定义path。遇到复杂的路径一样可使用scss函数在线编译，再复制到html中，减小人工计算的量和错误率。

环状总体的旋转动画

这个利用css的transform:rotate()便可完成，咱们将多个环编组，从0旋转90°便可。

<svg class="svg" viewBox="0 0 1000 1000">
    <g class="wrap-path" fill="none" stroke="#1e1e1e" stroke-width="60">
    </g>
</svg>
复制代码

.wrap-path{
    animation: pathRotate 1s both;
}
@keyframes pathRotate {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(90deg);
    }
}
复制代码

白色描边动画

白色描边动画除了在原先的环状动画+总体的旋转以外，咱们能看到它基于总体还有本身的一个旋转，加上便可，显得白色描边速度比总体快，丰富了动画的层次感。这样总体的动画效果就呈现出来啦。

其余文案动画

这里暂时只加了一个背景中间文案的缩放动画，形成一种视差错觉。

菠萝小结

1. 注意描边的特色是从中间向两侧扩展；
2. 环形进度条动画也是描边动画；
3. 同时运用多种效果/方向/速度，能够丰富动画的层次感。