V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
NicholasNC
V2EX  ›  问与答

web 如何模拟波浪 loading 效果

  •  
  •   NicholasNC · 2017-10-16 21:07:42 +08:00 · 2804 次点击
    这是一个创建于 2355 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今天接到了这个动效需求( ps,上图是 app 的一个竞品的效果)

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

    找了一些 demo:

    1. 纯 CSS 实现波浪效果!
    2. waveLoading.js

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

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

    9 条回复    2017-10-17 09:01:04 +08:00
    LemonFlower
        1
    LemonFlower  
       2017-10-16 21:14:05 +08:00 via iPhone
    当然是 GIF 啦,省钱省时
    aprilandjan
        2
    aprilandjan  
       2017-10-16 21:27:07 +08:00 via iPhone
    分两个层级,底下是水纹动画的 gif,上面是镂空 M 字的 png 图片,随着进度加载把波纹 gif 往上移动即可。
    des
        3
    des  
       2017-10-16 21:29:30 +08:00 via Android
    @aprilandjan 楼主并不是说的这个。
    楼主尝试一下 css 的 mask 吧?
    oott123
        4
    oott123  
       2017-10-16 21:52:58 +08:00 via Android
    先让设计做个 AE 出来再说
    Pudge1337
        5
    Pudge1337  
       2017-10-16 23:23:43 +08:00 via Android
    借楼问下用 ae 做出来了怎么给前端实现。。
    oott123
        6
    oott123  
       2017-10-17 00:36:48 +08:00 via Android
    @Pudge1337 播放 MP4
    ibegyourpardon
        7
    ibegyourpardon  
       2017-10-17 00:59:13 +08:00
    @Pudge1337 也可以导出成序列帧或者导出成 gif。

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

    因为投入产出比太划不来了。
    Pudge1337
        8
    Pudge1337  
       2017-10-17 08:13:16 +08:00 via Android
    @ibegyourpardon @oott123 不是导出成 json 之类的吗,gif,mp4 这些太大了呀
    Exin
        9
    Exin  
       2017-10-17 09:01:04 +08:00 via iPhone
    试试结合这几个属性
    webkit-text-fill-color
    -webkit-background-clip
    background-image
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1202 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 23:13 · PVG 07:13 · LAX 16:13 · JFK 19:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.