雪碧图动画实例 - 教程

小白终成大白

工作笔记

---

文章目录

• 小白终成大白
• 前言
• 直接上代码
• **最终效果
• • • • 感谢您的阅读 !

---

前言

之前没有用过雪碧图
今天刚好有机会 需要做一个小图标动态的
ui给了一些图

一开始的想法是写一个容器然后用animation去变化他的背景图

<view class="light"></view>

.light {
position: absolute;
left: 0;
top: 0;
width: 448rpx;
height: 58rpx;
animation: lightnim 2s infinite forwards;
}

@keyframes lightnim {
0%{
background: url("https://suzaku-test.oss-cn-hangzhou.aliyuncs.com/assets/img/linlilight1.png") no-repeat;
background-size: 100% 100%;
}
17%{
background: url("https://suzaku-test.oss-cn-hangzhou.aliyuncs.com/assets/img/linlilight2.png") no-repeat;
background-size: 100% 100%;
}
34%{
background: url("https://suzaku-test.oss-cn-hangzhou.aliyuncs.com/assets/img/linlilight3.png") no-repeat;
background-size: 100% 100%;
}
51%{
background: url("https://suzaku-test.oss-cn-hangzhou.aliyuncs.com/assets/img/linlilight4.png") no-repeat;
background-size: 100% 100%;
}
68%{
background: url("https://suzaku-test.oss-cn-hangzhou.aliyuncs.com/assets/img/linlilight5.png") no-repeat;
background-size: 100% 100%;
}
85%{
background: url("https://suzaku-test.oss-cn-hangzhou.aliyuncs.com/assets/img/linlilight6.png") no-repeat;
background-size: 100% 100%;
}
100%{
background: url("https://suzaku-test.oss-cn-hangzhou.aliyuncs.com/assets/img/linlilight7.png") no-repeat;
background-size: 100% 100%;
}
}

然后发现ui还给了这样的序列图，刚好没有做过雪碧图 今天试验一下

直接上代码

代码如下（示例）：

<view class="joystick-animation":style="{ 'background-image': 'url(' + bgJoystick + ')' }">
</view>

const bgJoystick = ref(utils.$url.static('/assets/img/joystick-list.png'));

.joystick-animation {
width: 60rpx;//实际要展示在界面的大小，不管你原图多长多宽
height: 60rpx;
background-repeat: no-repeat;
background-size: auto 100%;
position: absolute;
bottom: 14rpx;
left: -12rpx;
animation: playJoystick 1.5s steps(8) infinite;//8是帧数 我这里只有8帧
}
@keyframes playJoystick {
from {
background-position: 0 0;
}
to {
background-position: -438rpx 0;//这个是60*8算出来的 但是的我试了480 图是错的 这帧没显示完全又漏出了下一帧的一半，我调试了一下 最终定了-438 可能因为我是rpx px也许是可以直接乘的
}
}

**最终效果

感谢您的阅读 !