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

前言

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

1. 具体实现

1.1 实现思路

主要使用了SVG绘制圆形和打钩图形，通过控制stroke-dasharray和stroke-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" 使线条连接处圆滑

<svgwidth="400"height="400">
<!-- 圆形部分 -->
<circlefill="none"stroke="#68E534"stroke-width="20"cx="200"cy="200"r="190"
class="circle"stroke-linecap="round"transform="rotate(-90 200 200)" />

<!-- 打钩部分 -->
<polylinefill="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 圆形动画实现

.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-mode为forwards，动画会停在最后一帧。

此时效果为：

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

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

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

这样就完成了圆的动画。

1.3.2 打钩动画实现

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

.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 文字提示动画

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

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-dasharray和stroke-dashoffset结合@keyframes动画，可以实现SVG路径的绘制式进度完成效果。

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

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。