微信小程序动画：高度渐变，left渐变

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

　　今天在测试微信小程序动画的时候遇到了坑，需求是这样的点击时子元素从外部滑动回来，父元素的高度跟随子元素的高度改变。

　　实现子元素left为0并不复杂，但是改变父元素box的高度的时候却遇到了坑，因为是需要跟随子元素right的高度来改变父元素box的高度的，并且子元素right的高度不确定，我们需要先获取子元素的高度。

　　在改变高度的时候出错了，高度未改变。在测试时发现

    var box = wx.createAnimation(option); // 创建动画
    var obj = wx.createSelectorQuery();
    obj.select('.anr').boundingClientRect(function (rect) {//获取子元素高度
      box.height(rect.height).step();//改变父元素高度
      console.log(1);
    }).exec();
    console.log(2);
    that.setData({
      box: box.export()
    });

　　先打印的竟然是2，原来是一个异步操作，这就可以理解为什么执行无效了。改成这样

    obj.select('.anr').boundingClientRect(function (rect) {//获取子元素高度
      var box = wx.createAnimation(option); // 创建动画
      box.height(rect.height).step();//改变父元素高度
      that.setData({
        box: box.export()
      });
    }).exec();

　　想着应该没问题了，但是遇到了另外一个坑，父元素的高度一下子变成了预设的效果，并没有Animation的渐变效果。本身父元素的高度是由left这个子元素撑起来的，给父元素预设一个高度这个问题就解决了。渐变效果就实现了。

　　源码解析

wxml

<view class="box" animation="{{box}}">
  <view class="anl">left</view>
  <view class="anr" animation="{{anr}}">right</view>
</view>
<button bindtap="add" wx:if="{{down}}">goDown</button>
<button bindtap="goback" wx:else>goBack</button>

wxss

/* pages/userinfo/index.wxss */
.box{
  position: relative;
  height: 200rpx;
  overflow: hidden;
  text-align: center;
  color: white;
  font-size: 120rpx;
}
.anl{
  height: 200rpx;
  background-color: red;
}
.anr{
  background-color: green;
  height: 400rpx;
  width: 100%;
  position: absolute;
  left: 100%;
  top: 0;
}
.add{
  background-color: yellow;
  height: 100rpx;
}

js

// pages/userinfo/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    box: {},
    anr: {},
    down:true
  },
  add: function () {
    this.setData({
      down: false
    });
    var that = this;
    let option = {
      duration: 1000, // 动画执行时间
      timingFunction: 'ease-in' // 动画执行效果
    };
    var anr = wx.createAnimation(option);// 创建动画
    this.anr=anr;
    anr.left(0).step();
    that.setData({
      anr: anr.export()
    });
    var obj = wx.createSelectorQuery();
    obj.select('.anr').boundingClientRect(function (rect) {//获取子元素高度
      var box = wx.createAnimation(option); // 创建动画
      that.box=box;
      box.height(rect.height).step();//改变父元素高度
      that.setData({
        box: box.export()
      });
    }).exec();
  },
  goback:function(){
    this.setData({
      down:true
    });
    this.box.height('200rpx').step();
    this.setData({
      box:this.box.export()
    });
    this.anr.left('750rpx').step();
    this.setData({
      anr:this.anr.export()
    })
  }
})