web 如何模拟波浪 loading 效果

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2624 天前的主题，其中的信息可能已经有所发展或是发生改变。

今天接到了这个动效需求（ ps，上图是 app 的一个竞品的效果）

如上图的 M 图形中的效果，根据不同的进度，波浪的高度会一直上升，一直到充满整个 M 字。

找了一些 demo:

目前找到的 demo 都是圆形的，但是这种不规则的形状一时间没想到实现的原理。

不知各位大神有什么好的 idea

波浪

Demo

上图

动效

9 条回复 • 2017-10-17 09:01:04 +08:00

LemonFlower

2017-10-16 21:14:05 +08:00 via iPhone

当然是 GIF 啦，省钱省时

aprilandjan

2017-10-16 21:27:07 +08:00 via iPhone

分两个层级，底下是水纹动画的 gif，上面是镂空 M 字的 png 图片，随着进度加载把波纹 gif 往上移动即可。

des

2017-10-16 21:29:30 +08:00 via Android

@aprilandjan 楼主并不是说的这个。
楼主尝试一下 css 的 mask 吧？

oott123

2017-10-16 21:52:58 +08:00 via Android

先让设计做个 AE 出来再说

Pudge1337

2017-10-16 23:23:43 +08:00 via Android

借楼问下用 ae 做出来了怎么给前端实现。。

oott123

2017-10-17 00:36:48 +08:00 via Android

@Pudge1337 播放 MP4

ibegyourpardon

2017-10-17 00:59:13 +08:00

@Pudge1337 也可以导出成序列帧或者导出成 gif。

说起来我大概两个月前有一次在某网站上看到有高人实现了 wave loading，啊不对，不是 wave loading，是水滴滴下来溅起的动画，JS + CSS 搞定，各种贝塞尔曲线高大上，也确实文件体积不大，当时我膜拜的五体投地，但从来没想过要用类似的手段实现。

因为投入产出比太划不来了。

Pudge1337

2017-10-17 08:13:16 +08:00 via Android

@ibegyourpardon @oott123 不是导出成 json 之类的吗，gif,mp4 这些太大了呀

Exin

2017-10-17 09:01:04 +08:00 via iPhone

试试结合这几个属性
webkit-text-fill-color
-webkit-background-clip
background-image