This topic created in 3114 days ago, the information mentioned may be changed or developed.
今天接到了这个动效需求（ ps，上图是 app 的一个竞品的效果）
如上图的 M 图形中的效果，根据不同的进度，波浪的高度会一直上升，一直到充满整个 M 字。
找了一些 demo:
目前找到的 demo 都是圆形的，但是这种不规则的形状一时间没想到实现的原理。
不知各位大神有什么好的 idea
 | 1 LemonFlower Oct 16, 2017 via iPhone 当然是 GIF 啦，省钱省时 |
 | 2 aprilandjan Oct 16, 2017 via iPhone 分两个层级，底下是水纹动画的 gif，上面是镂空 M 字的 png 图片，随着进度加载把波纹 gif 往上移动即可。 |
 | 3 des Oct 16, 2017 via Android @aprilandjan 楼主并不是说的这个。 楼主尝试一下 css 的 mask 吧？ |
 | 4 oott123 Oct 16, 2017 via Android 先让设计做个 AE 出来再说 |
 | 5 Pudge1337 Oct 16, 2017 via Android 借楼问下用 ae 做出来了怎么给前端实现。。 |
 | 7 ibegyourpardon Oct 17, 2017 @Pudge1337 也可以导出成序列帧或者导出成 gif。 说起来我大概两个月前有一次在某网站上看到有高人实现了 wave loading，啊不对，不是 wave loading，是水滴滴下来溅起的动画，JS + CSS 搞定，各种贝塞尔曲线高大上，也确实文件体积不大，当时我膜拜的五体投地，但从来没想过要用类似的手段实现。 因为投入产出比太划不来了。 |
| 8 Pudge1337 Oct 17, 2017 via Android @ibegyourpardon @oott123 不是导出成 json 之类的吗，gif,mp4 这些太大了呀 |
 | 9 Exin Oct 17, 2017 via iPhone 试试结合这几个属性 webkit-text-fill-color -webkit-background-clip background-image |
Select Language