在小程序中用一张 PNG 实现两个动效

需求：在小程序中展示一个常规动效，点击后执行一个按压动效，执行完成恢复常规动效。

可选方案：

1. 使用 gif 图

无法控制 gif 图的执行过程，需要通过切换图片源来实现两个动效的切换。

图片放在代码包中：动效的 gif 图尺寸一般比较大，放在代码包中会超出代码包 2M 大小的限制。

使用网络图片：切换的时候需要加载图片，会出现动效不连贯的问题

缓存在本地：使用 wx.downloadFile 缓存在本地，但本地缓存有 10M 的限制，一不小心也会超哦～

2. 使用 APNG

问题同 gif，兼容性也有一定的问题。

3. 使用 PNG 序列（雪碧图）

单个动效的实现方案可以参考 张鑫旭大佬的文章：小tips: CSS或JS实现gif动态图片的停止与播放。

为了避免切换动效时出现短暂的空白的状态，可使用 PNG 序列的方式实现：将两个动效的序列图连接在一起。

那用一张 PNG 来做两个动效怎么实现呢？以一张 80 帧的 PNG 序列为例，前 40 帧为第一个动效，后 40 帧为第二个动效。执行时间均为2s。

@keyframes animate-default {
  0% {
    background-position: 0;
  }

  100% {
    background-position: 50%;
  }
}

.animate-default {
    animation: animate-default steps(39) 2s infinite forwards;
}

@keyframes animate-click {
  0% {
    background-position: 50%;
  }

  100% {
    background-position: 100%;
  }
}

.animate-click {
    animation: animate-click steps(39) 2s 1 forwards;
}
复制代码

but，现实总是很残酷，并不是我们想要的效果。

那问题出在哪里呢？

单帧图片的宽度为 384px，图片执行到第 40 张的时候其实位置为 384 * 39 = 14976，我们将 animate-default 动效的 100% 位置改为 -14976px，同理将 animate-click 动效的 0% 位置改为 384 * 40 即 -15360px 即可。

但为了更好的适配不同的设备，我们选用了 rpx 为单位，虽然在 750 设备上动画正常，但切换设备，动画又坏掉了...摩擦，摩擦，在光滑的地板上...

请忽略后面的背景～

对此微信给出的解释是：

不能用 px 为单位，不能用 rpx 为单位，那以百分比的形式设置 background-position，我们该如何实现呢？

敲黑板，重点来了！！

敲黑板，重点来了！！

敲黑板，重点来了！！

background-position 的计算公式（from《CSS 世界》）是：

percentX = positionX /（容器宽度 - 图片宽度）;

percentY = positionY /（容器宽度 - 图片宽度）;

所以本例中，

-14976 / （384 - 384 * 80 ），约 0.49367089；

-15360 / （384 - 384 * 80），约 0.50632911。

@keyframes animate-default {
  0% {
    background-position: 0;
  }

  100% {
    background-position: 49.367%;
  }
}

.animate-default {
    animation: animate-default steps(39) 2s infinite forwards;
}

@keyframes animate-click {
  0% {
    background-position: 50.633%;
  }

  100% {
    background-position: 100%;
  }
}

.animate-click {
    animation: animate-click steps(39) 2s infinite forwards;
}
复制代码

在点击后切换 class，再切换回来～OK啦，完美！

转载于:https://juejin.im/post/5cdcccc8518825693f1ebe81