微信小程序 点击卡片切换 动画效果

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文：

html

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

var is_1_height, is_1_width, is_2_height, is_2_width, is_img0_width, is_img0_height, is_img1_width, is_img1_height;
var item = 0;
var fangxiang;
Page({
  data: {
    index_0: 3,
    clubs: [{ image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532684585498&di=39c818a83b5f9d295a662dc9cb3deb4a&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0117e2571b8b246ac72538120dd8a4.jpg%401280w_1l_2o_100sh.jpg' }, { image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532684585498&di=03509b946c2086ab814276a076ec9069&imgtype=0&src=http%3A%2F%2Fimg07.tooopen.com%2Fimages%2F20170316%2Ftooopen_sy_201956178977.jpg' }, { image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532684585497&di=d3bb16864ad73dfedc225209a218ed74&imgtype=0&src=http%3A%2F%2Fwww.qqma.com%2Fimgpic2%2Fcpimagenew%2F2018%2F4%2F5%2F6e1de60ce43d4bf4b9671d7661024e7a.jpg' }]
  },

  onShow: function () {
    this.animation1 = this.animation2 = this.animation0 = wx.createAnimation({
      duration: 600,
      timingFunction: 'ease',
    })
  },
  bindtap_img: function (e) {
    var that = this;
    switch (item) {
      case 0:
        if (e.target.id == 0) {
          this.setData({
            index_0: 3,
          })
          item = 0;
        } else if (e.target.id == 1) {
          this.setData({
            index_2: 0,
            index_0: 2,
            index_1: 3,
          })
          fangxiang = 'right';
          item = 1;
        } else if (e.target.id == 2) {
          this.setData({
            index_1: 0,
            index_0: 2,
            index_2: 3,
          })
          fangxiang = 'left';
          item = 2
        }
        break;
      case 1:
        if (e.target.id == 0) {
          this.setData({
            index_2: 0,
            index_1: 2,
            index_0: 3,
          })
          item = 0
        } else if (e.target.id == 1) {
          this.setData({
            index_1: 3,
          })
          fangxiang = 'right';
          item = 1
        } else if (e.target.id == 2) {
          this.setData({
            index_0: 0,
            index_1: 2,
            index_2: 3,
          })
          fangxiang = 'left';
          item = 2
        }
        break;
      case 2:
        if (e.target.id == 0) {
          this.setData({
            index_0: 3,
            index_2: 2,
            index_1: 0,
          })
          item = 0
        } else if (e.target.id == 1) {
          this.setData({
            index_0: 0,
            index_2: 2,
            index_1: 3,
          })
          fangxiang = 'right';
          item = 1
        } else if (e.target.id == 2) {
          this.setData({
            index_2: 3,
          })
          fangxiang = 'left';
          item = 2
        }
        break;
      default:
        console.log('11111')
    }
    if (e.target.id == 1) {
      // 先旋转同时放大，然后平移
      this.animation0.scale(is_img1_width / is_img0_width, is_img1_height / is_img0_height).translateX(is_1_width).step()
      this.setData({
        animationData0: this.animation0.export(),
      })
      this.animation1.scale(is_img0_width / is_img1_width, is_img0_height / is_img1_height).translateX(is_1_height).step()
      this.setData({
        animationData1: this.animation1.export(),
      })
      this.animation2.scale(1, 1).translateX(-is_2_height).step()
      this.setData({
        animationData2: this.animation2.export(),
      })
    } else if (e.target.id == 2) {
      // 先旋转同时放大，然后平移
      this.animation0.scale(is_img1_width / is_img0_width, is_img1_height / is_img0_height).translateX(-is_1_width).step()
      this.setData({
        animationData0: this.animation0.export(),
      })
      this.animation1.scale(1, 1).translateX(is_2_height).step()
      this.setData({
        animationData1: this.animation1.export(),
      })
      this.animation2.scale(is_img0_width / is_img1_width, is_img0_height / is_img1_height).translateX(-is_1_height, is_2_width).step()
      this.setData({
        animationData2: this.animation2.export(),
      })
    } else if (e.target.id == 0) {
      // 先旋转同时放大，然后平移
      this.animation0.scale(1, 1).translateX(0).step()
      this.setData({
        animationData0: this.animation0.export(),
      })
      this.animation1.scale(1, 1).translateX(0).step()
      this.setData({
        animationData1: this.animation1.export(),
      })
      this.animation2.scale(1, 1).translateX(0).step()
      this.setData({
        animationData2: this.animation2.export(),
      })
    }
    var clubs = this.data.clubs;
    this.setData({
      index: e.target.id,
      current: clubs[e.target.id]
    })
  },

  onLoad: function (options) {
    wx.createSelectorQuery().select('#is_height_1').boundingClientRect(function (rect) {
      is_1_width = Number(rect.width)
      is_1_height = Number(rect.height)  // 节点的宽度
    }).exec();
    wx.createSelectorQuery().select('#is_height_2').boundingClientRect(function (rect) {
      is_2_width = Number(rect.width)  // 节点的宽度
      is_2_height = Number(rect.height)  // 节点的宽度

    }).exec();
    wx.createSelectorQuery().select('.img0').boundingClientRect(function (rect) {
      is_img0_width = Number(rect.width)  // 节点的宽度
      is_img0_height = Number(rect.height)  // 节点的宽度
      console.log(is_img0_width)
    }).exec();
    wx.createSelectorQuery().select('.img1').boundingClientRect(function (rect) {
      is_img1_width = Number(rect.width)  // 节点的宽度
      is_img1_height = Number(rect.height)  // 节点的宽度
    }).exec();
  },
})