一、业务背景
在做微信小程序的项目时，有一个需求是当用户左右旋转手机屏幕时，页面上特定的元素要随着用户的旋转动作左右移动。当将手机屏幕向左旋转时，人物向左移动；手机屏幕向右旋转时，人物向右移动。
二、用到的微信API
这里主用到了微信小程序的加速计：
- 开始监听加速度数据，wx.startAccelerometer(Object object)
- 监听加速度数据事件，wx.onAccelerometerChange(function callback)
官方文档链接：https://developers.weixin.qq.com/miniprogram/dev/api/device/accelerometer/wx.startAccelerometer.html
先来写个demo，看下 wx.onAccelerometerChange() 回调函数里参数的打印：
wx.startAccelerometer({
interval: 'normal',
success: () => {
wx.onAccelerometerChange((res) => {
console.log('res :>> ', res);
})
}
})
这个API效果在微信开发者工具里模拟不了，只能在手机上看。微信开发者工具点击预览，在手机的控制台上我们可以看到，将手机屏幕向左旋转至垂直于水平面，打印出来的 x 值无限接近于 -1。将手机屏幕向右旋转至垂直于水平面，打印出来的 x 值无限接近于 1。
有了这个API的帮助，我们就可以愉快地开始写效果了。
三、效果实现
思路：如果元素向左向右最大移动的距离是20，而且既然我能拿到手机旋转的 res.x 值，那么当手机旋转的时候，将元素向左或向右移动 res.x *20 距离，不就可以了。
既然是移动，首先想到的就是用 transform 来实现这个效果，在手机上预览时，发现人物在移动的过程中会一卡一卡的，不是很流畅，就像下面这样。
思考了好久后，想到既然是要做动画效果，那么能想到的有以下三种方式：
- animation
- transition
- requestAnimationFrame
transform 不行，那就换 transition。两种实现方式在下面也都写出来了。
3.1 transform
当手机屏幕旋转时，设置元素的 transform:translateX(res.x*20)
页面结构代码：
<view class="wrap">
<image src="/assets/bg.png" />
<image src="/assets/img.png" style="transform:translateX({{left}}%);" />
</view>
css 代码：
.wrap {
width: 100%;
height: 422rpx;
position: relative;
}
image {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
js 代码：
Page({
data: {
left: ""
},
onShow() {
wx.startAccelerometer({
interval: 'normal',
success: () => {
wx.onAccelerometerChange((res) => {
this.setData({
left: res.x*20
})
})
}
}),
onHide: function () {
// 停止监听加速计数据
wx.offAccelerometerChange()
wx.stopAccelerometer()
}
})
3.2 transition
用 transition 来实现位移的效果，当手机屏幕旋转时，改变元素的 left 值，还可以指定转速曲线和时间。具体的效果大家可以试一下。
css 和 js 代码同上，只需要将上面的 html 改成下面这样，就可以实现完美的移动了。
<view class="wrap">
<image src="/assets/bg.png" />
<image src="/assets/img.png" style="left:{{left}}%;transition:left .3s;" />
</view>
在同一情况下旋转手机屏幕，两种实现方式的效果对比，可以看出使用 transition 元素移动的效果更流畅一些。
文章来源：https://www.toymoban.com/news/detail-485152.html
后来我想了下， 好像 transform 结合 animation 一起使用，也可以达到这个效果。文章来源地址https://www.toymoban.com/news/detail-485152.html
到了这里，关于微信小程序实现手机屏幕左右旋转，页面元素左右移动，小程序加速计的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
