微信小程序动画:高度渐变,left渐变

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

微信小程序动画:高度渐变,left渐变

 

  实现子元素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()
    });

  微信小程序动画:高度渐变,left渐变

  先打印的竟然是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()
    })
  }
})

  

微信小程序动画:高度渐变,left渐变

上一篇:一个微信号同时支持多个环境网页授权


下一篇:借鉴微信小程序表单校验wxValidate的源码里边的正则