纯CSS实现进度完成动画效果

前言

在日常开发中,我们经常遇见支付完成的情况,会有一个完成的动画。这次我们用css实现一个这样的动画,话不多说,先看效果:

1. 具体实现

1.1 实现思路

主要使用了​​SVG​ ​绘制圆形和打钩图形,通过控制stroke-dasharraystroke-dashoffset实现路径绘制效,用CSS动画的delay属性实现动画序列。

1.2 SVG图形绘制

首先构建SVG基础结构,包含圆形和打钩两个部分:

  1. 创建一个圆 使用<circle> 创建了一个圆环,中心在(200,200),半径190px,圆弧的宽度为20, transform="rotate(-90 200 200)" 将圆环旋转-90度,使动画从顶部开始,stroke-linecap="round" 使线条端点圆润
  2. 创建一个勾 使用<polyline> 创建了一个勾,由三个点连接而成 ,点坐标points="88,214 173,284 304,138",stroke-linejoin="round" 使线条连接处圆滑
xml 复制代码
<svg width="400" height="400">
    <!-- 圆形部分 -->
    <circle fill="none" stroke="#68E534" stroke-width="20" cx="200" cy="200" r="190" 
            class="circle" stroke-linecap="round" transform="rotate(-90 200 200)" />
    
    <!-- 打钩部分 -->
    <polyline fill="none" stroke="#68E534" stroke-width="24" points="88,214 173,284 304,138" 
              stroke-linecap="round" stroke-linejoin="round" class="tick" />
</svg>

具体效果如下:

1.3 添加CSS动画

1.3.1 圆形动画实现

css 复制代码
.svg .circle {
    stroke-dasharray: 1194;  /* 圆周长:2πr = 2×3.14×190 ≈ 1194 */
    stroke-dashoffset: 1194;  /* 初始偏移量等于周长 */
    animation: circle 1s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes circle {
    from {
        stroke-dashoffset: 1194;
    }
    to {
        stroke-dashoffset: 2388;  /* 动画结束时偏移量为2倍周长 */
    }
}

这部分的功能是:

  1. 刚开始圆的半径是190px,周长计算为2πr ≈ 1194px,使用stroke-dasharray: 1194设置了虚线模式,将它们的 stroke-offset 都设置为图案总长度(即刚好藏起整个图形),这样圆一开始是不可见的(完全偏移掉了)。
  2. 设置了stroke-offset 的圆环缺口始于它的三点钟方向,并沿着逆时针方向扩展。我们想要路径动画,从圆环的顶部开始。因此我们需要将圆环逆时针旋转 90°。svg中我们可以用transform-origin来完成,让其起始点在顶部
  3. 再使用动画持续1秒,通过变化stroke-dashoffset的值实现,并且设置animation-fill-modeforwards,动画会停在最后一帧。

此时效果为:

将stroke-offset设置为偏移250效果为:

将stroke-offset设置为偏移1194效果:

将stroke-offset设置为偏移1200效果:

这样就完成了圆的动画。

1.3.2 打钩动画实现

再来实现下打勾的动画效果,同圆类似,当stroke-dashoffset: 350时,勾完全消失,变小时慢慢出现。

css 复制代码
.svg .tick {
    stroke-dasharray: 350;  /* 打钩路径总长度 */
    stroke-dashoffset: 350;  /* 初始偏移量 */
    animation: tick .8s ease-out;
    animation-fill-mode: forwards;
    animation-delay: .95s;  /* 延迟启动 */
}

@keyframes tick {
    from {
        stroke-dashoffset: 350;
    }
    to {
        stroke-dashoffset: 0;  /* 动画结束时完全显示 */
    }
}

1.3.3 文字提示动画

最后再添加个文字动画效果:

css 复制代码
h2 {
    font-size: 36px;
    margin-top: 40px;
    color: #333;
    opacity: 0;
    animation: .6s title ease-in-out;
    animation-delay: 1.2s;  /* 延迟启动 */
    animation-fill-mode: forwards;
}

@keyframes title {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

总结

最后总结一下,使用svg绘制图形,使用CSS的stroke-dasharraystroke-dashoffset结合@keyframes动画,可以实现SVG路径的绘制式进度完成效果。

如有错误,请指正O^O!

相关推荐
Zuckjet_2 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801462 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店3 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown3 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip4 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿5 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.6 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰6 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息6 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
卷Java7 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot