echart 折线从左到右动画效果_前端复杂带交互动画的lottie-web方案实现

引言

在lottie出现之前，前端对动画往往是通过css自己手写。随着动画效果的日益复杂，一些动画效果存在兼容问题不说，有些也是复杂到难以实现，前端er要花很长时间在动效的coding上。

lottie-web的出现，解放了前端在动效上的生产力。然而，因为对lottie-web来说，动画的icon、字体、内容、效果、位置等关键信息都是存在于该lottie的json文件之中的。所以在采用lottie的方案中，很多是动效本身并不带有交互性质的，或者说是内容不变的。但对于动效本身存在交互、动效上的文字内容需要随着状态而变化的动画来说，json文件层级较深，操作更改json内容是不太方便的。

那有什么办法能实现可带交互的动画lottie呢？下面将对做本次活动遇到的动画场景及具体的动画方案进行详细介绍。

一、活动介绍

本次活动【翻牌领现金】属于考拉海购用户增长的业务之一。通过支付宝提现50元和150元的现金刺激，促使用户裂变活动，达到拉新的目的。

该活动为了增加用户的参与感和游戏感，对动效、交互的要求都比较高。对前端来说，纯css难以实现这种炫酷的动效，因此考虑采用lottie方案，下面会对该方案进行具体介绍。首先给出该活动的主要截图。