HarmonyOS 鸿蒙Next 在canvas里画线条，怎么能实现动画效果呢？
HarmonyOS 鸿蒙Next 在canvas里画线条，怎么能实现动画效果呢？
比如画一条线段，能看到线段缓慢变长而不是一下子显示？或者除了canvas还有别的组件可以实现么？
以下代码不能实现：
Canvas(this.context)
.width(‘100%’)
.height(‘100%’)
.backgroundColor(’#ffff00’)
.onReady(() => {
this.context.lineWidth = 3
animateTo({ duration: 3000 }, () => {
this.context.moveTo(50, 50)
this.context.lineTo(300, 400)
this.context.stroke()
})
方式1、自己加个定时器，然后每次计算终点坐标后再在Canvas中绘制线段；坐标和最终位置重合后停止定时器；
方式2、用 Line 绘制组件，加个变量endPoint控制线段第二点位置，然后结合animateTo功能切换第二点位置的初始值和最终值；
Canvas 只是个画布，提供一些绘制函数，算是个基础工具；对于在其上绘制的内容没有直接实现动画的功能；但有定时器配合可自行实现任意动画效果，只是需要自行封装一些功能，实现起来没有直接拿来可用的现成接口； 系统API 有动画接口，可对组件属性进行动画控制；图形绘制组件提供一些基本图形快速绘制能力，这些组件的属性可和动画接口配合做出动画效果；复杂曲线要看多复杂，如果直线、椭圆弧、圆弧、等基本线形组合能实现则可考虑上述动画实现方式；
是这样么？没动画效果，哪里设置的不对么
@Entry @Component struct Text3 { @State message: string = ‘Hello World’; @State x: number = 30 @State y: number = 50
build() { Column() { Text(this.message) .id(‘Text3HelloWorld’) .fontSize(50) .fontWeight(FontWeight.Bold) .onClick(() => { animateTo({ duration: 3000 }, () => { this.x = 200 this.y = 200 }) })
Line({ width: 300, height: 500 })
.startPoint([10, 10])
.endPoint([this.x, this.y])
.backgroundColor(Color.Yellow)
.stroke(Color.Black)
}
.height('100%')
.width('100%')
} }
