小程序开发日记（一）：重力感应控制图片移动效果

    最近小程序的项目好多啊。。遇到了许多坑，许多没做过的需求，特地开了个博客准备有空记录下，当做总结和提高吧。

    现在在做的项目新加了一个首页头图需要重力感应控制图片左右平移的效果，上网找了一些案例，都不尽如人意，于是参照案例自己动手，简单实现了一下这个功能，在此记录。

    1、核心方法：

    ①translate3d()。这里不用translate()的原因是相比之下translate3d()会得到更高的CPU加速支持，响应速度更快性能更加优化。

    ②wx.onAccelerometerChange()。微信小程序加速度计。

    

    2、html:

<image class="index-img" style="-webkit-transition: transform .5s ease-out;-webkit-transform:translate3d({{transformX}}px,0,0)" src="{{indexImg}}"></image>
      <image class="index-icon" src="../../images/test.png"></image>

    其中.5s部分为动作完成时间，越小速度越快，在本程序中测试发现最合适的为0.5，如果0.1会很卡；

    {{transformX}}部分为x轴平移距离，后面的0为y轴平移距离，此程序需求只需要左右平移所以置0；

    3、js:

onShow: function () {
      obj = this;
      var transformX = obj.data.transformX;
      //var transformY = obj.data.transformY;  //Y轴平移
      wx.onAccelerometerChange(function (res) {
        if (res.x > 0) {
          transformX += 2;
        }
        else if (res.x < 0) {
          transformX -= 2;
        }
        // if (res.y > 0) {                     //Y轴平移
        //   transformY -= 20;
        // }
        // else if (res.y < 0) {
        //   transformY += 20;
        // }
        // if (transformY > 40) {
        //   transformY -= 20;
        // }else if (transformY < -40) {
        //   transformY += 20;
        // }
        if (transformX > 12) {            //限定边界
          transformX -= 2;
        }else if (transformX < -12) {
          transformX += 2;
        }
        obj.setData({
          transformX: transformX,
          // transformY:transformY
        })
      })
    },

    具体思想是在每秒5次的加速度计监听中，如果x值和y值大于0，则相应的将transformX和transformY加减固定值，translate3d()方法会在0.5秒内完成本次位移，如果 transformX和 transformY大于或小于某个值（即到达设定的边界），则减去或加上同等的固定值，保持位移距离为0（取巧方法，还是因为试了别的方法很卡。。）。这样就能简单实现我们所需的效果了，如果需要改变边界和移动速度，可以相应修改时间值和每次位移距离。