雪碧图动画实例

小白终成大白

工作笔记

---

---

前言

之前没有用过雪碧图
今天刚好有机会 需要做一个小图标动态的
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也许是可以直接乘的}
}

**最终效果

感谢您的阅读 !