前言

今天UI给了张雪碧图让我自己写个动画效果。以前有类似的需求，都是直接给我切张gif，贴上去就完事了。这让我很不解.....

先搞清楚UI的意图

经过我的一番追问，我了解了UI的意图，还顺便简单了解到了几种图片格式的优缺点。关于常用的图片格式JPG/JPEG、PNG、GIF、APNG、webP......这上面有很多学问，本人只是从UI那里简单了解到gif图的一些缺陷：
①因为只支持256色索引颜色，所以只能通过抖动等方式模拟丰富颜色
②只能是完全透明或者完全不透明
③产生了严重的“毛边”现象
④用户无法直接与动画本身做交互，不是指点击，而是开始、暂停、加速等交互。

时间充足，那就玩玩新花样吧

ZH-01@3x.f544ae7e.png

业务需求是利用上面这张雪碧图实现一个箭头从左往右滑动的效果，提示用户向左滑动查看更多内容。

最终实现的效果如下图右下角：

先说下整体思路，就是把雪碧图当背景图渲染在一个容器上，然后通过定义动画来改变雪碧图的background-position来实现效果。

首先给div加上背景图，写好样式后显示的是第一张小图。

<div class="tips"></div>

 .tips {
    position: fixed;
    width: 157px;
    height: 32px;
    bottom: 13px;
    right: 14px;
    z-index: 30;
    background-image: url("../../../assets/images/h5/yearBill2022/ZH-01@3x.png");
    background-repeat: no-repeat;
    background-size: 300% 100%;
  }

接下来定义动画moveTips，测量好每个小图的background-position。

  @keyframes moveTips {
    0% {
      background-position: 0 0;
    }
    35% {
      background-position: -157px 0;
    }
    65% {
      background-position: -314px 0;
    }
    100% {
      background-position: 0 0;
    }
  }

给容器加上这个动画，0.8秒内完成，分一步执行，循环播放

 .tips {
    position: fixed;
    width: 157px;
    height: 32px;
    bottom: 13px;
    right: 14px;
    z-index: 30;
    background-image: url("../../../assets/images/h5/yearBill2022/ZH-01@3x.png");
    background-repeat: no-repeat;
    background-size: 300% 100%;
    animation: moveTips 0.8s steps(1) infinite;
  }

完结感想

优点算是提高了用户体验，那缺点就是费时。如果需求比较急或者整个动效比较复杂的时候，前端这边需要花时间去写这个动画，总之算是一种实现动效的思路吧。

利用雪碧图实现动画效果

前言

先搞清楚UI的意图

时间充足，那就玩玩新花样吧

完结感想