手机上的动画和电脑开发环境中的不一样
发布于 6 年前 作者 jungong 11156 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)

startcanvas4(){

const ctx = wx.createCanvasContext(‘myCanvas4’)

ctx.arc(20,30,10,0,2*Math.PI)

ctx.moveTo(20,40)

ctx.lineTo(20,150)

ctx.moveTo(15, 150)

ctx.lineTo(25,150)

ctx.lineTo(25,340)

ctx.lineTo(15,340)

ctx.closePath()

ctx.stroke()

ctx.draw()

this.rotateAndScaleThenTranslate()

this.rotateAndScale(this.data.value)

this.data.value = -this.data.value

},

rotateAndScaleThenTranslate() {

// 先旋转同时放大,然后平移

this.animation.scale(0.5, 0.5).step()

this.animation.translate(10, 40).step({ duration: 1000 })

this.setData({

animationData: this.animation.export()

})

},

rotateAndScale(value) {

// 旋转同时放大

this.animation.rotate(value).step({ duration: 2000 })

this.setData({

animationData: this.animation.export()

})

},

onShow() {

const animation = wx.createAnimation({

duration: 1000,

timingFunction: ‘ease’,

})

this.animation = animation

this.setData({

animationData: animation.export()

})

},

<view class=“container”

animation="{{animationData}}"

style=“width:375rpx”>

<canvas class=“canvas-element” canvas-id=“myCanvas4” style=“background:transparent”>

</canvas>      

</view>

<button class=“canvas-button” bindtap=“startcanvas4” type=“primary”  >接XXX</button>

  • 预期表现

在电脑上开发环境中画出来的图形跟随动画一起运动,在手机上画出的图形不跟随动画一起运动。

  • 复现路径
  • 提供一个最简复现 Demo
回到顶部