微信小程序 动画单位px转rpx

微信小程序动画像素单位px转rpx

rpx单位，它能够自适应不同设备，使开发者设计的样式在不同的设备呈现出相同的效果。但是px就不能自适应，那么它在遇到不同的设备时会呈现出不同的效果，非常影响UI设计。

而微信小程序API里的动画使用px做单位的，这时就需要用到px到rpx的转换。

最近看网上有许多回答，发现是不全面的。

查阅资料发现网上大多数是这样回答的

var rpx = 600;
var systemInfo = wx.getSystemInfoSync();
var px = rpx / 750 * systemInfo.windowWidth;
animation.translateY(-px).step()
this.setData({
  animationData: animation.export()
})

第一行代码含义：你希望动画移动的像素是多少rpx，自己设置600rpx。
第二行代码含义：获取设备的信息。
第三行代码含义：根据设备的信息来把600rpx转换为px。
第四行代码含义：设置动画从下平移到上，并把px传入进去。

这样就可以把600rpx间接传到动画中了，那么这就完成了rpx和px的转换。

到此不要以为就结束了，细心的同学会发现问题。

var px = rpx / 750 * systemInfo.windowWidth;

这一行代码有问题，它获取的是设备的宽度，是根据宽度来转换的。这就会产生一定的错误。

当你的动画在X轴移动时，用设备的宽度来转换。

var px = rpx / 750 * systemInfo.windowWidth;

当你的动画在Y轴移动时，用设备的高度来转换。

var px = rpx / 750 * systemInfo.windowHeight;

这样才是正确的转换。

那么在设置动画的时候，有的API需要两个参数，即X轴参数和Y轴参数。

这时你就要灵活一点，把X轴的参数用宽度来转换，Y轴的参数用高度来转换。然后把两个转换结果传入即可。

不要死学代码，要学会推理代码的底层逻辑，并灵活利用这个逻辑。

不然以后效果出现偏差，想发现错在哪就难上加难了。