微信小程序 点击使得image出现 并有动画 但实现之后位置有偏移
发布于 5 年前 作者 wei82 927 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)
  • 预期表现
  • 复现路径
  • 提供一个最简复现 Demo

/* js部分 */

showKnock:function(e){

console.log(e)

//锤子出现

var that=this;

//锤子动画执行

var animation2=wx.createAnimation({

duration:100,

timingFunction:“ease”,

delay:0,

transformOrigin: ‘right bottom 0’

})

animation2.rotate(-45).step();

that.setData({

flags:true,

left: e.detail.x,

top: e.detail.y,

slide_up2:animation2.export()

})

setTimeout(function () {

animation2.rotate(0).step({ duration: 0, transformOrigin: “50%,50%”, timingFunction: ‘linear’ })

that.setData({

slide_up2: animation2.export()

})

},200)

},

/* 动画执行 */

<image src=’/image/egg_knock.png’ class=‘knock’ wx:if="{{flags}}" style=“left:{{left}}px;top:{{top}}px” animation="{{slide_up2}}"></image>

/* 点击事件*/

<view class=‘body’ wx:if="{{flag}}" animation="{{slide_up}}" bindtap=‘showKnock’>

<text class=‘eggText eggText1’>{{text1}}</text>

<image class=‘eggBody eggBody1’ src=’/image/egg_body.png’></image>

<image class=‘eggEye eggEye1’ src=’/image/egg_eye.png’ animation="{{slide_up1}}"></image>

</view>

/* 锤子就在上方  本来完成的效果应该是鼠标点击到哪锤子出现到哪并有一个小动画  但是加了animation之后小锤子x还能动,但是纵向完全动不了*/

    

1 回复

你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

回到顶部