一、业务背景

在做微信小程序的项目时，有一个需求是当用户左右旋转手机屏幕时，页面上特定的元素要随着用户的旋转动作左右移动。当将手机屏幕向左旋转时，人物向左移动；手机屏幕向右旋转时，人物向右移动。

二、用到的微信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 元素移动的效果更流畅一些。

后来我想了下，好像 transform 结合 animation 一起使用，也可以达到这个效果。

微信小程序实现手机屏幕左右旋转，页面元素左右移动，小程序加速计相关推荐

笔记本触摸板失灵修复小技巧_手机屏幕突然失灵怎么办？这几个维修小技巧，一定要知道！...
昨天跟死党斗表情包,斗得起劲呢,结果突然屏幕按不动了,看着对面表情包迭出,差点把他憋坏了,那简直不要太捉急!这不,立马联系了换屏哥来给他上门修手机去了,下面小编奉上实用技巧带你脱困! 1.硬件损伤手 ...
判断手机屏幕是否旋转
// 判断屏幕是否旋转 function orientationChange() { switch(window.orientation) { case 0: //竖屏 break; ...
解决微信小程序右滑会返回登陆页面和首页右上角小房子图标也会返回登陆页面的问题
1.首页本来是由登陆页面直接wx.navigaTo跳转过去的 2.后来发现右滑会直接返回上一页(即登录页),所以不行 3.改为wx.reLaunch,右滑会直接退出小程序,可以了,但是左上角会出现一个 ...
笔记本怎样运行android程序,PC手机二合一在笔记本上如何运行安卓程序
由于系统逻辑的不同,作为当前人类社会中最重要的战略性物资,手机和笔记本电脑并没有实现互通有无,而厂商们为了展现自家生态的独特优势,一直都在极力去思考如何打通PC系统和手机系统的壁垒,比如去年我们一直都 ...
微信小程序测量手机屏幕大小
首先获取适配器信息,用getSystemInfoSync() 然后.windowHeight 获取高度 ,.windowWindth 获取宽度. var sysInfo = wx.getSystem ...
小程序设置手机屏幕常亮失效？
小程序有API可以实现屏幕常亮 wx.setKeepScreenOn(Object object) 设置是否保持常亮状态.仅在当前小程序生效,离开小程序后设置失效. 但是有时候会发现常亮失效了可能的 ...
iphone应用程序中禁止屏幕自动旋转自定义屏幕旋转
在summary中的 supported devices orientation中设置所支持的屏幕旋转方式在实际RUN时并不会应用所选项目,正确的禁止屏幕旋转方向以及自定义屏幕旋转方式要在viewco ...
jsp页面适应手机屏幕_HTML5之页面缩放 viewport
一.前言前短时间突然遇到一个需求,发现之前一直忽略的点. 二.故事背景事情是这样的:是一个公共资源的项目.详情页的内容全部是由后端接口返回,带style样式的标签内容(即富文本),大多表格之类的. ...
python单机小游戏大全手机版宫殿_用Python实现童年小游戏俄罗斯方块！别说还挺好玩！...
存储图书的相关信息,包括书名,作者,类型,数量.主码是name和author. 2.2 borrow表借书单,存储借书人ID,书名,作者,借书时间.主码是name和author. 2.3 user表 ...

微信小程序实现手机屏幕左右旋转，页面元素左右移动，小程序加速计