前两步是定义一个动画并设置都要干什么，然后把这个设置好的“规则”扔给界面上的某个元素，让它按照这个规则执行。
当然如果有多个元素的animation="{{ani}}"，也都会执行这个动画规则。

制作一个动画点击把向下的箭头变为向上的箭头

点击前

点击后

代码如下：
index.wxml

<view  bindtap='selectToggle'>
  <view >商品</view>
    <image src='../img/index_next.png'  animation="{{animationData}}"></image>
  </view>
</view>

image.png

相关参数及方法

简单介绍一下例子中的几个参数和方法（其他的详见官方文档）
duration: 动画持续多少毫秒
timingFunction: “运动”的方式，例子中的 'ease'代表动画以低速开始，然后加快，在结束前变慢
delay: 多久后动画开始运行
step():一组动画完成，比如想让HelloWorld向右上方移动并变透明后，再次向左移动50可以先写animation.opacity(0.2).translate(100, -100).step()在继续写 animation.translateX( -50).step(), 作用就是向右上方移动和变透明是同时进行， 这两种变化完成之后才会进行向左运行的一步。

index.js

    var nowShow = this.data.selectShow; //获取当前箭头向上还是向下
    var animation = wx.createAnimation({
      timingFunction: "ease"  //动画效果
    })
    this.animation = animation;
    if (nowShow) { //为true箭头是向下，旋转到0度
      animation.rotate(0).step();
      this.setData({
        //导出动画队列。export 方法每次调用后会清掉之前的动画操作。
        animationData: animation.export() 
      })
    } else {
      animation.rotate(180).step(); //为false箭头向上，旋转180度
      this.setData({
        animationData: animation.export()
      })
    }
    this.setData({
      selectShow: !nowShow //每次点击切换箭头是向上还是向下
    })