收藏
回答

手机上的动画和电脑开发环境中的不一样

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug Android 4.4.4 honor 4 7.0.4

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


回答关注问题邀请回答
收藏
登录 后发表内容