小程序wepy踩坑之旅（四）----- 简单的动画

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29329037/article/details/80523370

大家可以先看下官网小程序apianimation:https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html，看完之后推荐看一下http://www.jb51.net/article/102263.htm讲animation的文章，上面写的很详细

源码如下：（直接复制到一个wepy文件中就可以使用了）

<template>
  <view class="shop-cart">
    <button class="show-btn" @tap="show">展示</button>
    <view class="demo" animation="{{animationData}}">
      <button class="btn" @tap="hide">X</button>
    </view>
  </view>
</template>

<script>
import wepy from 'wepy'

export default class ShopCart extends wepy.page {
  config = {
    navigationBarTitleText: '购物车'
  };
  components = {
  };

  mixins = [];

  data = {
    animationData: {}
  }

  computed = {}

  methods = {
    show () {
      this.animation.height('200rpx').step()
      this.setData({
        animationData: this.animation.export()
      })
    },
    hide() {
      this.animation.height(0).step()
      this.setData({
        animationData: this.animation.export()
      })
    }
  }

  events = {}
  onLoad() {
    let animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
    this.animation = animation

  }
}
</script>
<style lang="less">
  .demo {
    width: 100%;
    height: 0rpx;
    background: pink;
    position: absolute;
    bottom: 0;
    .btn { width: 30rpx;
      height: 30rpx;
      color: #000;
      font-size: 10rpx;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
</style>