小程序加入购物车动画效果及还原动画

1：先贴一下效果图，点击"+"出现垂直向下的效果。

2：首先是页面以及样式部分；

index.wxml：

 <!-- 加入购物车箭头 -->
    <view class='Arrow' animation="{{animation}}" wx:if="{{showAnmimation}}">
        <image src='../../image/imgs/jiantou.png'></image>    
    </view>


index.wxss

        .Arrow{
            background: #BB0227;
            position:fixed;
            bottom: 250rpx;
            left: 48%;
            z-index: 99;
            border-radius: 50%;
            padding: 5rpx;
                }
        .Arrow image{
            width: 35rpx;
            height: 35rpx;
            }

3：home.js 部分，点击事件贴出来，点哪里在哪里调用就行。

1：先是data部分，控制图标的显示隐藏。

        data：{
              showAnmimation:false, //飘入图标
            }

2：初始化动画；

    onReady: function() { 
           //第一个动画，控制图标飘入购物车
        this.animation = wx.createAnimation({
            duration: 400,
            timingFunction: 'linear', 
            transformOrigin: 'left top 0',
            success: function(res) { 
            }
        })
          //第二个动画，飘入购物车后，图标还原到原来的位置
        this.animations = wx.createAnimation({
            duration: 0,
            timingFunction: 'linear', 
            transformOrigin: 'left top 0',
            success: function (res) { 
            }
        })
    },

3：点击事件，控制图标飘入购物车；
    
     middlejia: function(e) { 
         //先还原动画
        this.animations.translateY(0, 20).opacity(1).step(); 
        this.setData({
            animation: this.animations.export(),
            showAnmimation: true, 
        })
        //再执行动画
        this.animation.translateY(80, 20).opacity(0).step(); 
        this.setData({ 
            animation: this.animation.export()
        })

    }