用勾选动效点亮电商Banner，转化更直观

用户总以为页面卡住了？一个勾选动画就能解决

电商活动页里，用户点击「立即抢购」后，如果只有一行文字说「操作成功」，很多人会愣住：到底成功了没？要不要再点一次？这种不确定性，就是转化率流失的隐形杀手。这款「Task Done」动效给出的答案很直接——蓝色方框瞬间变成绿色对勾，文字被打上删除线，整个动作一气呵成。用户不需要阅读文字，光看颜色从蓝到绿的变化，就能本能地理解「已完成」。

蓝色到绿色的瞬时切换，勾选线条一笔成型

从预览视频看，这个动画的运动逻辑非常干脆：起始状态是一个蓝色描边的空方框，旁边是黑色「Task」字样。触发后，方框在极短时间内填充成青绿色，同时一条勾选线从左下角向右上角快速画出，文字同步出现删除线。整个动画没有多余的回弹或抖动，属于「单次触发型」而非循环播放。这种直来直去的节奏，特别适合需要明确反馈的交互节点。

三个真实项目的动效选型实验

假如你接到三个brief：SaaS后台需要「任务标记完成」功能，电商H5要做「加入购物车成功」提示，App引导页需要展示「已读状态」。第一个场景适合用这款动画，因为B端用户追求效率，绿色勾选的专业感刚刚好；第二个场景也合适，购物流程中的确定感能降低弃单率；但第三个场景可能不太匹配——引导页通常需要更活泼的插画风格，这款偏工具感的动效会显得严肃。

文件够轻但别用在太小尺寸，循环逻辑要改

坦诚说优缺点：这款Lottie文件作为矢量动画，透明背景和可缩放性是加分项，比GIF轻很多。但要注意两点：第一，勾选线条在极小尺寸（比如16×16）下可能糊成一团，建议最小用到32×32；第二，默认是单次播放，如果你需要循环展示（比如空状态页），要在代码里设置loop=true。另外，青绿色虽然通用，但如果你的品牌主色是红色或橙色，可能需要调整色值以保持一致性。