阅读 399

在小程序中用一张 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啦,完美!

关注下面的标签,发现更多相似文章
评论