微信小程序：动画效果

html

<view class='aa'><image animation="{{animationData0}}" class='img0' style='z-index: {{index==0?"2":"1"}};' bindtap='bindtap_img' id='0' src="/images/997.jpg"></image>
<image animation="{{animationData1}}" class='img1' style='z-index: {{index==1?"2":"1"}};' bindtap='bindtap_img' id='1' src="/images/fenxiang.png"></image>
<image animation="{{animationData2}}" class='img2' style='z-index: {{index==2?"2":"1"}};' bindtap='bindtap_img' id='2' src="/images/fenxiang1.png"></image></view>

css

page{
  background: #3B4595
}
.aa{
  position: relative;
  margin-top: 50rpx;
}
.img0{
  border-radius: 5rpx;
  position: absolute;
  left:180rpx;
  width: 375rpx;
  height: 230rpx;
  
}
.img1{
  border-radius: 5rpx;
  position: absolute;
  left: 60rpx;
  width: 240rpx;
  height: 150rpx;
  top: 40rpx;
}
.img2{
  border-radius: 5rpx;
  position: absolute;
  left: 440rpx;
  width: 240rpx;
  height: 150rpx;
  top: 40rpx;
}

js

const app = getApp();
var item = 0;
Page({
  data: {
    animationData0: {},
    animationData1: {},
    animationData2: {},
    index:0,
    item_id:0,
    isimg: [{
      img: '/images/997.jpg',
      id: 1
    }, {
      img: '/images/fenxiang.png',
      id: 2
    }, {
      img: '/images/fenxiang.png',
      id: 3
    }]
  },

  onLoad: function(options) {},
  // bindtap_img: function(e) {
  //   var id = e.target.id;
  //   console.log(e.target.id)

  // },
  onShow: function() {
    var animation1 = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
    })

    this.animation1 = animation1
    this.animation2 = animation1
    this.animation0 = animation1

  },
  bindtap_img: function(e) {
    var that=this;
    // item_id 当前位置的id  
    // index 点击事件的id
    // if (e.target.id ==this.data.item_id){
    //   return
    // }
    if (e.target.id == 0) {
      // item = 0
    } else if (e.target.id == 1) {
      item = 'right'
    } else if (e.target.id == 2) {
      item = 'left'
    }
    if (e.target.id ==1){
      // 先旋转同时放大，然后平移
      this.animation0.scale(0.64, 0.652174).translateX(150).step()
      this.setData({
        animationData0: this.animation0.export(),
      })
      this.animation1.scale(1.5625, 1.533333333).translateX(60).step()
      this.setData({
        animationData1: this.animation1.export(),
      })
      this.animation2.scale(1, 1).translateX(-190).step()
      this.setData({
        animationData2: this.animation2.export(),
      })
    } else if (e.target.id == 2) {
      // 先旋转同时放大，然后平移
      this.animation0.scale(0.64, 0.652174).translateX(-150).step()
      this.setData({
        animationData0: this.animation0.export(),
      })
      this.animation1.scale(1, 1).translateX(190).step()
      this.setData({
        animationData1: this.animation1.export(),
      })
      this.animation2.scale(1.5625, 1.533333333).translateX(-60, 100).step()
      this.setData({
        animationData2: this.animation2.export(),
      })
    } else if (e.target.id == 0 && item == 'right') {
      // 先旋转同时放大，然后平移
      this.animation0.scale(1, 1).translateX(0, -95).step()
      this.setData({
        animationData0: this.animation0.export(),
      })
      this.animation1.scale(1, 1).translateX(0, 0).step()
      this.setData({
        animationData1: this.animation1.export(),
      })
      this.animation2.scale(1, 1).translateX(0, 0).step()
      this.setData({
        animationData2: this.animation2.export(),
      })
    } else if (e.target.id == 0 && item == 'left') {
      // 先旋转同时放大，然后平移
      this.animation0.scale(1, 1).translateX(0, 95).step()
      this.setData({
        animationData0: this.animation0.export(),
      })
      this.animation1.scale(1,1).translateX(0, 0).step()
      this.setData({
        animationData1: this.animation1.export(),
      })
      this.animation2.scale(1,1).translateX(0, 0).step()
      this.setData({
        animationData2: this.animation2.export(),
      })
    }
    this.setData({
      item_id: e.target.id,
      index: e.target.id
    })
    console.log("e.target.id:", e.target.id,  "item:", item)
  }
})