一行代码复刻微信红包打开效果，近乎100%还原

又熟悉我的兄弟们知道，我最近一直在做 vx-sim 微信对话模拟器的小项目，有兴趣的兄弟可以移步 gitee.com/maple2133/v... 地址。

如果能够帮忙点个Star⭐那真是万分感谢。

这个小项目说起来技术上不难，主要的难点在复刻微信的各种效果。

今天复刻的是微信红包的打开效果，可以简单观察一下。

实现效果

在点击红包信息以后，页面弹出红包弹窗。

点击红包弹窗中间的 "開 " 字，"開 " 会变成 "泉币" 有一个不断旋转的动画。

然后红包领取完成页面会逐渐显示出来。

这里重点复刻的是 "泉币" 这个不断旋转的动画。

实现方案

一般来说这种简易的动画有两种实现方案，一种是通过连续的几张图片进行快速的切换，达到动画效果。

另一种是直接做个3D的，让其旋转。（留个坑，有时间实现）

因为这种简易效果做3D属实有点儿"用牛刀"，所以我猜微信官方也是用的图片切换的方案。

这里考虑到多张图片的切换对于静态资源的加载和管理并不友好，所以采用精灵图的方案实现。

重点是采用 animation 动画播放 steps 跳帧方案。

实现代码

html 复制代码

<!-- 開 -->
<div class="red-packet-open" v-if="isOpen" @click="isOpen=true"></div>
<!-- 泉币 -->
<div class="red-packet-animation" v-else></div>

<script>
const isOpen = ref(false)
</script>

<style>
    .red-packet-open {
        width: 260px;
        height: 260px;
        background: url('@/assets/images/红包开.png') no-repeat center center;
        background-size: 100% 100%;
        cursor: pointer;
    }

    .red-packet-animation {
        width: 260px;
        height: 260px;
        background: url('@/assets/images/红包动画.png');
        background-size: 100%;
        transition: 0.6s;
        animation: coinSpin 0.6s steps(7) infinite;
        transform-style: preserve-3d;
    }

    @keyframes coinSpin {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: 0 -1820px;
        }
    }
</style>

实际上实现原理非常简单，就是一张连续帧的静态图片，通过动画切换 background-position 确定图片的展示位置。

然后通过 animation 的 steps 进行跳帧。

当前代码中是 0.6s 内将这个动画播放 7帧，正好对应精灵图中的连续帧图片。

总结

这个效果还原度上来说还是比较好的，这种连续帧动画的方案在很多网站上也有应用。

最大的优点就是在加载静态资源的时候，速度确实是能够提升不少，这也是精灵图唯一的优势了。

但是我后来分析，微信官方用的应该不是这个方案，这个方案有个比较大的缺点是图片的大小无法自适应。

一行代码复刻微信红包打开效果，近乎100%还原 | 附源码

实现效果

实现方案

实现代码

总结