评论

使用小程序css3实现帧动画组件

使用css3帧动画替代gif动图,提升加载速度、减少内存。

使用场景:

UI和产品经常需要在小程序使用动画功能,有些动画又很复杂,如果直接使用gif会因为图片太大导致小程序加载慢,并占用太多内存。


实现核心:

css3动画animation的steps功能、css变量的应用。


动画效果:


组件代码:

https://developers.weixin.qq.com/s/4x3Z9mmY77kl


温馨提示:

不定期更新文章,有需要请关注哈!

最后一次编辑于  2020-09-14  
点赞 9
收藏
评论

11 个评论

  • 小蜗
    小蜗
    2020-04-03

    看着效果不错啊 楼主辛苦了

    2020-04-03
    赞同 1
    回复 1
    • 李伟豪
      李伟豪
      2020-04-03
      有帮助就好哈。
      2020-04-03
      1
      回复
  • 🐶温柔的曹璇璇
    🐶温柔的曹璇璇
    04-26

    其实这段代码的动画是反向播放的

    04-26
    赞同
    回复
  • L
    L
    02-04

    你好 如果是9*9的序列图 该怎么处理难

    02-04
    赞同
    回复
  • 后来居上
    后来居上
    01-22

    舒服了,真好用!

    01-22
    赞同
    回复
  • aLIEz
    aLIEz
    2020-12-11

    大佬请教一下,动画如何多机型适配呀,我做的translate 位移,换个机型效果就不对了



    2020-12-11
    赞同
    回复
  • Smileヾ淡忘
    Smileヾ淡忘
    2020-10-21

    大佬请教一下, 我想在父组件调用它的时候播放一次, 而不是一加载就播放 有办法吗?

    2020-10-21
    赞同
    回复
  • 王曙
    王曙
    2020-09-13

    想要设置播放一次 停留在最后一帧 但是 animation-fill-mode 这个属性好像 失效了,怎么设置都是停留在第一帧

    2020-09-13
    赞同
    回复 1
    • 李伟豪
      李伟豪
      2020-09-14
      animation-fill-mode没生效是steps影响的,暂时还没解决,你有空可以先研究一下。
      2020-09-14
      回复
  • 上炁
    上炁
    2020-09-09

    楼主你好,demo测试了一下,替换了精灵图,发现ios端会闪屏

    修改了一下count 少一个就正常滚动效果,刚刚好就会复现上面的问题

    安卓正常,ios 测试机是iphone SE 2代

    https://developers.weixin.qq.com/s/eEz4iemM7mkD


    2020-09-09
    赞同
    回复 3
  • 樱蝴蝶
    樱蝴蝶
    2020-06-17

    感谢感谢 很好用,不过如果要保证顺序是从第一张到最后的话那么应该让from和to的x需要换一下,应该没理解错吧

    2020-06-17
    赞同
    回复 2
    • 李伟豪
      李伟豪
      2020-09-14
      抱歉,没看懂
      2020-09-14
      回复
    • 🐶温柔的曹璇璇
      🐶温柔的曹璇璇
      04-26
      就是说动画其实是反向模仿的
      04-26
      回复
  • 谋谋谋
    谋谋谋
    2020-06-12

    大佬请教一下 执行一次的时候如何监听动画结束 可有方法

    2020-06-12
    赞同
    回复 2
    • 李伟豪
      李伟豪
      2020-09-14
      新增播放次数的设置,以及播放结束的回调
      2020-09-14
      回复
    • 谋谋谋
      谋谋谋
      2020-09-14回复李伟豪
      好的  多谢
      2020-09-14
      回复

正在加载...

登录 后发表内容