- 当前 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