小程序进阶-底部弹框动画效果

• 需求：点击按钮，信息展示或者信息输入。如何在当前页面弹出新的面板？

  （1）方式一：直接弹出一个面板。
  （2）方式二：添加动画效果，从界面的一侧如底部弹出。
  

• 如何实现

  （1）弹出内容面板样式：如何显示与关闭，有两种方式wx:if和hidden
  （2）遮罩层，区分弹出内容与原有内容：z-index控制遮罩层、弹出层和原来信息层。
  （3）动画特效，例如底部弹出：
  

  

• 动画特效原理

  本质上是动态修改transform属性值达到动态效果。
  底部平移采用translateY，即transform:translate(百分比);
  

• 举个例子
  index.wxml

  <!-- hidden属性控制是否显示-->
  <view class="modals" hidden="{{hideModal}}">
  	<!-- 遮罩层-->
      <view class="modals-cancel" bindtap="hideModal"></view>
      <view class="bottom-dialog-body bottom-pos" animation="{{animationData}}"></view>
  </view>
  <button bindtap="showModal">点开</button>
  

  index.wxss

  /*基层，top,left,right,bottom为0表示填充整个页面*/
  .modals{
  	position:fixed;
  	z-index: 999;
  	top:0; 
  	left: 0; 
  	right:0; 
  	bottom: 0;
  }
  /*遮罩层，层级高于modals层*/
  .modals-cancel{
  	position:absolute;
  	z-index:1000;
  	top:0;
  	left: 0;
  	right:0;
  	bottom: 0;
  	background-color: rgba(0,0,0,.5);
  }
  /*弹出层，层级高于遮罩层*/
  .bottom-dialog-body{
  	position:absolute;
  	z-index:10001;
  	bottom:0;
  	left:0;
  	right:0;
  	padding:30rpx;
  	height:300rpx;
  	background-color: #fff;
  }
  /*弹出层动画前初始位置,Transform属性应用于元素的2D或3D转换。
  这个属性允许你将元素旋转，缩放，移动，倾斜等。translateY(100%)即基于当前位置向下平移100%元素高度*/
  .bottom-pos{
  	-webkit-transform:translateY(100%);
  	transform:translateY(100%);
  }
  

  index.js

  Page({
      data:{
        hideModal:true, 
        animationData:{},
      },
  
    	//显示遮罩层，并从底部逐渐弹出内容，即
      showModal: function () {
      var that=this;
      that.setData({
        hideModal:false
      })
      //创建一个动画实例 animation
      var animation = wx.createAnimation({
        duration: 600,//动画的持续时间 默认400ms
        timingFunction: 'ease',//动画的效果 默认值是linear
      })
      this.animation = animation 
      setTimeout(function(){
        that.fadeIn();//调用显示动画
      },200)   
    },
  
    // 隐藏遮罩层
    hideModal: function () {
      var that=this; 
      var animation = wx.createAnimation({
        duration: 800,//动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快
        timingFunction: 'ease',//动画的效果 默认值是linear
      })
      this.animation = animation
      that.fadeDown();//调用隐藏动画   
      setTimeout(function(){
        that.setData({
          hideModal:true
        })      
      },720)//先执行下滑动画，再隐藏模块
      
    },
  
    //向上平移动画
    fadeIn:function(){
    	//translateY对 Y 轴平移,step()表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。
      this.animation.translateY(0).step()
      this.setData({
        //动画实例的export方法导出动画数据传递给组件的animation属性
        animationData: this.animation.export()
      })    
    },
    //向上平移动画
    fadeDown:function(){
      this.animation.translateY(300).step()
      this.setData({
        //导出动画队列。export 方法每次调用后会清掉之前的动画操作。
        animationData: this.animation.export(),  
      })
    }, 
  })
  

备注：

• css的animation属性
  
  

4. 演示
   
   

参考：https://www.jianshu.com/p/cea2d4dc24d1