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

效果图

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

触发条件

<block  wx:if='{{bg_hui_show}}'>
<view class='bg_hui' catchtap='hide_bg_hui'></view>
<image class='animation animationData1' bindtap='to_hed' mode="widthFix" animation="{{animationData1}}" src='/images/to_hea.png'></image>
<image class='animation animationData1' bindtap='to_my' mode="widthFix" animation="{{animationData2}}" src='/images/to_me.png'></image>
</block>

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);
}