评论

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

2020-04-03
11969浏览
12评论

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

使用场景：

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


实现核心：

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


动画效果：


组件代码：

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


温馨提示：

不定期更新文章，有需要请关注哈！

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

12 个评论

  • 你看这个L好帅
    你看这个L好帅
    2021-02-04

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

    2021-02-04
    赞同 2
    回复
  • 小蜗
    小蜗
    2020-04-03

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

    2020-04-03
    赞同 1
    回复 1
    • 李伟豪
      李伟豪
      2020-04-03
      有帮助就好哈。
      2020-04-03
      赞 1
      回复
  • 逍遥至尊&寶
    逍遥至尊&寶
    2021-10-28

    效果很棒，感谢楼主，辛苦辛苦

    2021-10-28
    赞同
    回复
  • 大狗
    大狗
    2021-04-26

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

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

    舒服了，真好用！

    2021-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
      赞
      回复
    • 大狗
      大狗
      2021-04-26
      就是说动画其实是反向模仿的
      2021-04-26
      赞
      回复

正在加载...

请 登录 后发表内容
作者介绍

文章标签
帧动画gifsteps动画css3