小程序 简单的由远及近 开门效果

html：

<view class="container">
  <view class="door" animation="{{animationData}}">
    <view class="left" animation="{{ani_left}}"></view>
    <view class="right" animation="{{ani_right}}"></view>
  </view>
</view>

js：

const app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    animationData: {},
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  ani() {
    let animation = wx.createAnimation({
      duration: 3000,
      timingFunction: 'ease',
      delay: 0,
    })
    animation.translateY(200).scale(4, 4).step() // 下移200，放大4倍
    this.setData({
      animationData: animation.export()
    })
    // setTimeout(() => {
    //   animation.translate3d(20, 20, 20).step()
    //   this.setData({
    //     animationData: animation.export()
    //   })
    // }, 1000)
  },
  ani_left() {
    let animation = wx.createAnimation({
      transformOrigin: '0% 0% 0',
      duration: 3000,
      timingFunction: 'ease',
      delay: 0,
    })
    animation.backgroundColor('yellow').step()
    animation.rotateY(-110).step({ // 门的旋转角度
      duration: 3000
    })
    this.setData({
      ani_left: animation.export()
    })
  },
  ani_right() {
    let animation = wx.createAnimation({
      transformOrigin: '100% 50% 0',
      duration: 3000,
      timingFunction: 'ease',
      delay: 0,
    })
    animation.backgroundColor('blue').step()
    animation.rotateY(110).step({ // 门的旋转角度
      duration: 3000
    })
    this.setData({
      ani_right: animation.export()
    })
  },
  onLoad() {
    let that = this
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
    setTimeout(() => {
      that.ani()
      that.ani_left()
      that.ani_right()
    }, 100)
  },
  getUserInfo(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

css：

.door {
  width: 100rpx;
  height: 120rpx;
  position: absolute;
  top: 0;
  background: skyblue;
  /* border: 1px solid skyblue; */
  display: flex;
  flex-direction: row;
  perspective: 1000rpx;
}

.door .left {
  width: 50rpx;
  height: 120rpx;
  /* background: yellow; */
  transform-origin:left center;
}

.door .right {
  width: 50rpx;
  height: 120rpx;
  /* background: blue; */
  transform-origin:right center;
}

需要在旋转的父元素上面增加perspective: 1000rpx;这个属性，具体值自己微调