小程序弹窗并移动放大图片的动画效果

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

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

效果图

触发条件

JS触发

  click: function (e) {
  
    this.setData({
      bg_hui_show:true,
      btnImg2: "/images/letter_write_over.png",
      btncolor2: "color:#d69c56"
    });
    animation1.translateY(-160).translateX(-186).scale(7).step({
      duration: 500
    })
    animation2.translateY(-160).translateX(-40).scale(7).step({
      duration: 500
    })
    that.setData({
      animationData1: animation1.export(),
      animationData2: animation2.export()
    })
  },
  hide_bg_hui: function () {
    this.setData({
      ["animationData1.actions[0].animates"]:[],
      ["animationData2.actions[0].animates"]:[],
      bg_hui_show: false,
    });
  },

样式

.animation{
  z-index: 999;
  width: 20rpx;
  position: absolute;
  bottom: 10%;
  right: 20%;
}
.bg_hui{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
}