认识这个动画
绿色圆形背景中央一枚白色对勾，随后层层圆环向外扩散，像石子投入水面泛起的涟漪。这款「Done ticks」动效用最简洁的视觉语言传达「已完成」「成功」的信号，节奏轻快却不急躁，循环流畅而不拖沓。对于电商Banner来说，这种克制又有记忆点的反馈动画，能在用户下单或领取优惠券的瞬间给予明确的正向回应，既不会喧宾夺主干扰主视觉，又能让用户感受到操作的确定性。
集成成本评估
作为Lottie JSON格式的矢量动画，这款动效文件体积通常在20-50KB之间，对首屏加载几乎无压力。Web端接入只需引入lottie-web库，几行代码即可渲染；React和Vue生态也有成熟的封装组件。移动端方面，iOS的Lottie-iOS和Android的Lottie-Android都已非常成熟，基本不需要额外依赖。整体来说，集成成本较低，前端开发半天内即可完成接入和调试。
与同类动效的差异
同样是成功提示类动效，市面上常见的要么是对勾简单出现，要么伴随缩放弹跳。这款动画的独特之处在于「扩散圆环」这一视觉元素——它不是单纯的装饰，而是强化了「确认送达」的仪式感。相比那些花哨的粒子爆炸或复杂形变，这种克制的涟漪扩散更适合需要专业感的电商场景。绿色主色调天然传递积极信号，白色对勾清晰易读，整体风格在「友好」和「专业」之间找到了平衡点。
排版风险预判
在极小尺寸下（比如40×40以下），扩散圆环的细节可能难以辨认，建议最小使用尺寸保持在60×60以上。深色背景上，绿色圆圈可能需要调整色值以保证对比度，或准备白色描边版本。循环播放时，如果动画时长设置过短（低于800ms），扩散效果会显得仓促；过长（超过2秒）则可能让用户失去耐心。作为Banner元素，建议循环次数控制在1-3次，或者设置播放完成后停留在最后一帧，避免无休止的扩散干扰用户阅读其他信息。
设计师使用清单
适合项目：电商下单成功页、优惠券领取反馈、表单提交完成提示、会员升级确认、活动报名成功。不适合：需要严肃氛围的后台系统、追求极致极简的B端产品、空间极其有限的移动端底部栏。搭配建议：与文案提示配合使用，比如「下单成功」「领取成功」等文字同时出现；背景色建议与绿色圈形成柔和对比，避免高饱和撞色。一个小技巧：在After Effects中调整扩散圆环的透明度曲线，让外层圆环逐渐淡化，可以营造更自然的衰减效果。