小程序动画

小程序动画
点击事件

<!-- 三大特色 -->
      <view>
        <image src="../../../images/RightArrow.png" class="icon_5"></image>
        <view class="spe" bindtap="security">
          <text>已交保证金</text>
          <text>3天无理由退还房</text>
          <text>押金保障</text>
        </view>
      </view>

底部滑块

<!-- 底部滑块 -->
<view class="shadow" wx:if="{{chooseSize||spread}}" bindtap="hideModal">
</view>
<view class="choosen" wx:if="{{chooseSize}}" animation='{{animationData}}'>
  <image src="../../../images/close.png" class="icon_4" bindtap="hideModal"></image>
  <view class="speTitle">
  <view class="iconcircle"></view>
    <!-- <image src="../../../images/bao.png" class="icon_3"></image> -->
    已交保证金</view>
  <view>中介已向平台缴纳保证金,交易纠纷时用于保证用户的权益</view>
  <view class="speTitle">
    <view class="iconcircle"></view>
    <!-- <image src="../../../images/3.png" class="icon_3"></image> -->
    3天无理由退换房</view>
  <view>
    用户签合同后3天内可申请3天无理由退房，3天无理由将不收取违约费，押金全退。租金按入住天数计算＋200元服务费，不满一天计为1天;换房则无费用
  </view>

  <view class="speTitle">
    <view class="iconcircle"></view>
    <!-- <image src="../../../images/ya.png" class="icon_3"></image> -->
    押金保障</view>
  <view>
    在平台直接支付押金,退款时,用户直接在平台申请退押金,(脱离平台支付押金无效,只针对在平台支付押金用户
  </view>

</view>

js逻辑代码

security() {
    // console.log('kkk')
    this.chooseSezi()
  },
  // 动画函数
  chooseSezi: function (e) {
    // 用that取代this，防止不必要的情况发生
    var that = this;
    // 创建一个动画实例
    var animation = wx.createAnimation({
      // 动画持续时间
      duration: 200,
      // 定义动画效果，当前是匀速
      timingFunction: 'linear'
    })
    // 将该变量赋值给当前动画
    that.animation = animation
    // 先在y轴偏移，然后用step()完成一个动画
    animation.translateY(1000).step()
    // 用setData改变当前动画
    that.setData({
      // 通过export()方法导出数据
      animationData: animation.export(),
      // 改变view里面的Wx：if
      chooseSize: true
    })
    // 设置setTimeout来改变y轴偏移量，实现有感觉的滑动 滑动时间
    setTimeout(function () {
      animation.translateY(0).step()
      that.setData({
        animationData: animation.export(),
        clearcart: false
      })
    }, 10)
  },
  // 隐藏
  hideModal: function (e) {
    console.log('隐藏');
    var that = this;
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: 'linear'
    })
    that.animation = animation
    animation.translateY(700).step()
    that.setData({
      animationData: animation.export()
    })
    setTimeout(function () {
      animation.translateY(0).step()
      that.setData({
        animationData: animation.export(),
        chooseSize: false,
        spread:false
      })
    }, 200)
  },