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