要用css animation-function的steps实现一个类似小人跑动的逐帧显示的动画，但是应用到小程序上，出现了每次移动距离偏大的问题，即不能移动到下一张图的准确的位置，有偏差，下一张图的中心不在图片显示区域的中心，越到后面越偏。后来我用同一张图片复制多次的一张雪碧图去实现，按道理讲应当静止不动，但实际上就是每次都往下移动了多一点点，所以越往后越明显。
用一张图来说明
.loading { width: 143rpx; height: 128rpx; background-image: url(xxx.png); background-size: cover; animation: ani 7s steps(7, end) infinite both;}@keyframes ni { from { background-position: 0 0; } to { /*128*7=896*/ background-position: 0 -896rpx; }} |
别用rpx，用px试试
确实是换算算错的问题，要另外动态计算真正的rpx，最后决定直接用px了，谢谢解答！