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

栏目: 后端 · 前端 · 发布时间: 5年前

内容简介:偶然在svgTrick上看到了一个效果,模仿了一下。作者原先也是收到dribble上的一个动效启发,这个效果与svg简直是天作之合。最后模拟的效果如下,gif有点卡顿,戳戳这里查看网页效果。我们先看着动效分析一下,主要可以将动画分成五部分。

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

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

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

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

做一个酷炫的svg整体效果

我们先看着动效分析一下,主要可以将动画分成五部分。

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

一个个对照来看:

中心圆从圆心开始消失

这个效果的完成很简单。只需要在画面正中间画一个svg,svg上是一个顶着边的圆,因为svg的描边是由中间向两侧描边的,控制描边的宽度从填满到0就可以实现我们想要的效果啦。

这里我们画的是一个半径为100的圆,也就是用描边完全填满的宽度需要200。注意控制 border-radiusoverflow ,使超出区域不可见。

SVG动画应用-酷炫的图片展示效果
<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动画应用-酷炫的图片展示效果

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

<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。

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

多个圆的情况下因为需要得到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中,减少人工计算的量和错误率。

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

环状整体的旋转动画

这个利用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);
    }
}
复制代码

白色描边动画

白色描边动画除了在原先的环状动画+整体的旋转之外,我们能看到它基于整体还有自己的一个旋转,加上即可,显得白色描边速度比整体快,丰富了动画的层次感。这样整体的动画效果就呈现出来啦。

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

以上所述就是小编给大家介绍的《SVG动画应用-酷炫的图片展示效果》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大型网站技术架构演进与性能优化

大型网站技术架构演进与性能优化

许令波 / 电子工业出版社 / 2018-6 / 79

《大型网站技术架构演进与性能优化》从一名亲历者的角度,阐述了一个网站在业务量飞速发展的过程中所遇到的技术转型等各种问题及解决思路。从技术发展上看,网站经历了Web应用系统从分布式、无线多端、中台到国际化的改造;在解决大流量问题的方向上,涉及了从端的优化到管道到服务端甚至到基础环境优化的各个层面。 《大型网站技术架构演进与性能优化》总结的宝贵经验教训可以帮助读者了解当网站遇到类似问题时,应如何......一起来看看 《大型网站技术架构演进与性能优化》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

SHA 加密
SHA 加密

SHA 加密工具