前段时间在做项目中遇到一个关于弹窗由小变大的动画，以前做这些动画时就用animate，只需要写个方法，然后把动画名称往里一扔就完事。但在小程序不知道怎么用。去官方文档找了找，看到官方提供一个API wx.createAnimation(OBJECT)试着把官方的demo复制下来在本地看看。在使用过程中总觉得比较别扭，很不顺手，可能是小菜还没找到正确的使用方法。总之就是不习惯。

小程序是支持css3中的animation属性的，因为官方自己也在使用。小菜就用最笨的方法来实现如何在小程序使用animation动画。在jq时代，$('id').addClass('test').removeClass('test');很方便的为某个标签添加类名，在小程序中就不能像jq那样简单完成，但是可以换个思路，在data中定义一个变量，这个变量就是用来存放类名的。然后小程序自动会绑定类名。

好了，不说废话了，看demo和学使用才是王道，其余都是废话。

1.demo截图

2.文件结构

/
|--assets    //静态资源
|    |-- image  //图片资源
|    |-- wxss  
|         |-- animation.wxss  //需要引入动画文件
|         |-- costom.wxss     //自己定义的动画属性
|--pages
|    |-- example   //属性演示
|    |-- index     //animation演示
|
|--utils
|   |-- animation.js  //需要引入js
|--app.js
|--app.json
|--app.wxss
|--LICENSE
|--project.config.json
|--README.md

3.使用

01.在wxml文件中

<view class="animition-warp">
    <view class="{{animatess}}">
        <view class="demo-text">anmition.css</view>
    </view>
</view>
<view style="text-align: center;">
    <view class="anew" catchtap="animate">Animate it</view>
</view>

02.引入animation.wxss

/**引入animation**/
@import "../../assets/wxss/animat.wxss";  
/**引入自定义css类**/
@import "../../assets/wxss/custom.wxss";

.animition-warp{
    padding: 100px 0 0 0;
}
.anew{
    display: inline-block;
    margin: 30px 0;
    padding: 10px 20px;
    color: #fff;
    border: 1px solid #A5DE37;
    border-radius: 100px;
    box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3);
    background-color: #A5DE37;
}
.longtime{
    box-shadow: 0 2px 0 #8bc220, 0 2px 3px rgba(0, 0, 0, 1);
}
.demo-text{
    font-size: 50px;
    text-align: center;
    color: #f35626;
    background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
}
@-webkit-keyframes hue{
    from {
        -webkit-filter: hue-rotate(0deg);
    }
    to {
        -webkit-filter: hue-rotate(-360deg);
    }
}

03.引入animation.js文件

import { loadAnimation } from '../../utils/animation';
const anss = ' animated';
Page({
  data:{
    animatess:''   //变量名随意
  },
  animate:function(){
    let self = this;
    let currss = 'zoomIn' + anss;
    let an = new loadAnimation(self);
    an.add({animatess:currss}).clear({animatess:''});
  }
})

4.注意

这里唯一使用需要注意的地方就是动画执行的次数，如需要执行5次，定义一类名

/**css**/
.animated.cout5 {
    -webkit-animation-iteration-count:5;
    animation-iteration-count: 5;
}

/**js**/
let currss = 'zoomIn cout5' + anss;    
let an = new loadAnimation(self);
an.add({animatess:currss}).clear({animatess:''},5000);

上面有两个注意的地方，添加了count5，在clear中多了5000，意思是过5秒钟清除添加的类。

time = 次数 * 持续时间(默认1秒)

小程序animation

在小程序中使用animation