HarmonyOS7 Canvas 怎么动起来：CanvasAnimationLoop 动画循环详解

文章目录前言这页案例到底讲了什么完整代码angle 是这段动画的发动机startAnimation() 做的其实是“开循环”动画帧开始前为什么一定要 clearRect()旋转为什么要配合 translate() 使用save() 和 restore() 为什么不能少颜色跟着角度变化是个很巧的示范stopAnimation() 不只是停止按钮这套思路还能扩展成什么最容易踩的坑写在最后前言静态图形会画了只能算学到一半。Canvas真正开始有表现力往往是在它动起来之后。旋转、粒子、波纹、仪表盘、加载动画很多你平时觉得“这页面有点高级”的效果本质上都是一帧一帧刷出来的。问题也正出在这里。一旦开始动画Canvas就不再只是“画一张图”而变成“持续重绘一个状态变化中的画面”。这跟前面学静态图形完全不是一个思路。这个案例非常适合做第一步因为它只做了一件事让一个方块旋转起来。这页案例到底讲了什么表面看它在讲旋转动画实际上讲的是一套最基础的Canvas动画循环模型用状态变量保存动画进度用定时器持续更新状态每次重绘前清空旧画面通过坐标变换实现旋转这套模型虽然简单但后面的很多动画都离不开它。完整代码import{DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesEntryComponentstruct CanvasAnimationLoop{StateisShow:booleantrueStateangle:number0privatesettings:RenderingContextSettingsnewRenderingContextSettings(true)privatecontext:CanvasRenderingContext2DnewCanvasRenderingContext2D(this.settings)privatetimerId:number-1StateisAnimating:booleanfalsestartAnimation():void{if(this.isAnimating)returnthis.isAnimatingtruethis.timerIdsetInterval((){this.angle(this.angle5)%360},50)}stopAnimation():void{this.isAnimatingfalseclearInterval(this.timerId)}build(){Column(){if(this.isShow){Scroll(){Column({space:16}){Text(Canvas 动画效果).fontSize(16).fontColor(DEMO_THEME_COLOR).fontWeight(FontWeight.Bold)Column(){Text(旋转动画演示).fontSize(13).fontColor(#4D96FF).margin({bottom:8})Column(){Canvas(this.context).onReady((){constw380consth180this.context.clearRect(0,0,w,h)this.context.save()this.context.translate(w/2,h/2)this.context.rotate(this.angle*Math.PI/180)this.context.fillStylehsl(${this.angle}, 70%, 60%)this.context.fillRect(-30,-30,60,60)this.context.strokeStyle#666666this.context.lineWidth1this.context.beginPath()this.context.arc(0,0,50,0,Math.PI*2)this.context.stroke()this.context.restore()this.context.font12px sans-serifthis.context.fillStyle#999999this.context.fillText(旋转角度:${this.angle}°,10,h-10)}).width(100%).height(180).backgroundColor(#F0F0F0).borderRadius(8)}Row({space:12}){Button(开始动画).onClick((){this.startAnimation()}).fontSize(12).backgroundColor(DEMO_THEME_COLOR)Button(停止动画).onClick((){this.stopAnimation()}).fontSize(12).backgroundColor(#FF6B6B)}.margin({top:8})}.backgroundColor(DEMO_CARD_COLOR).padding(12).borderRadius(12)Column({space:6}){Text(Canvas 动画实现).fontSize(14).fontColor(DEMO_THEME_COLOR).fontWeight(FontWeight.Bold)Text(利用 State 变量驱动重绘).fontSize(12).fontColor(#333333)Text(setInterval 定时更新状态).fontSize(12).fontColor(#333333)Text(每次更新调用 context 重新绘制帧).fontSize(12).fontColor(#333333)Text(.clearRect 清除上一帧内容).fontSize(12).fontColor(#333333)Text(.save/.restore 保存恢复状态).fontSize(12).fontColor(#333333)Text(.translate/rotate/scale 变换矩阵).fontSize(12).fontColor(#333333)Text(使用 requestAnimationFrame 更流畅).fontSize(12).fontColor(#333333)}.width(100%).backgroundColor(#E8F4FD).padding(14).borderRadius(12)}.width(100%)}}Text(CanvasAnimationLoop - setInterval 动画循环).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(DEMO_BG_COLOR).padding(16)}}angle是这段动画的发动机案例里最关键的状态就是这个角度Stateangle:number0它本质上不是“一个数字”而是当前动画帧的描述。只要这个值持续变化画面就会持续变化。所以动画思维的第一步不是先想怎么画而是先想哪一个状态变化能带动画面变化在这个案例里答案就是旋转角度。startAnimation()做的其实是“开循环”startAnimation():void{if(this.isAnimating)returnthis.isAnimatingtruethis.timerIdsetInterval((){this.angle(this.angle5)%360},50)}这段代码有两个点必须看懂。第一if (this.isAnimating) return是防止重复启动。没有这句你多点几次开始按钮就会叠出多个定时器速度和状态都会乱掉。第二this.angle (this.angle 5) % 360是让角度持续增加并循环归零。这样不管动画跑多久数值都不会无限膨胀。动画帧开始前为什么一定要clearRect()案例里每次绘制前都做了这件事this.context.clearRect(0,0,w,h)这是Canvas动画最基本的卫生习惯。因为画布不会自动忘记上一帧。你不清空新的方块会叠在旧方块上最后就会形成拖影或者一团糊掉的痕迹。除非你故意想做残影效果否则绝大多数动画都应该先清屏再重画。旋转为什么要配合translate()使用这段变换代码非常关键this.context.save()this.context.translate(w/2,h/2)this.context.rotate(this.angle*Math.PI/180)this.context.fillRect(-30,-30,60,60)this.context.restore()如果你直接rotate()图形会围绕当前坐标原点转通常不是你想要的效果。这里先translate(w / 2, h / 2)意思是把坐标原点移动到画布中心。然后再旋转方块就会围绕中心点转。最后fillRect(-30, -30, 60, 60)用负坐标把方块中心对齐到新原点。这个小技巧非常常见。save()和restore()为什么不能少这两个方法是状态隔离的关键。因为translate()和rotate()会改变当前坐标系如果你不把变换前的状态保存下来后面画文字、画圆、画别的元素时都会被这个旋转坐标系拖进去。案例里旋转完成后马上restore()就是为了让后面的说明文字继续按照正常坐标绘制。颜色跟着角度变化是个很巧的示范案例用了这句this.context.fillStylehsl(${this.angle}, 70%, 60%)这不是必须的但很聪明。因为它让你看到动画状态不仅能控制位置和旋转也能同时控制颜色变化。这一下就把你的思路打开了。以后做动态进度、状态光效、节奏反馈时完全可以让一个状态同时驱动多个视觉属性。stopAnimation()不只是停止按钮stopAnimation():void{this.isAnimatingfalseclearInterval(this.timerId)}停止动画这件事别轻视。它不仅是交互按钮需要更是资源管理需要。如果页面离开了、组件销毁了动画还在后台跑CPU 和电量都会被白白消耗。真实项目里这部分通常还要结合页面生命周期进一步收口。这套思路还能扩展成什么你一旦理解这个案例就能顺手扩展出很多东西加载转圈动画仪表盘指针摆动粒子漂浮波纹扩散数据高亮闪动区别只在于驱动状态变成了什么重绘逻辑换成了什么图形。最容易踩的坑第一个坑是重复启动多个定时器。第二个坑是没清空上一帧画面越跑越脏。第三个坑是做了坐标变换后忘记restore()后面的元素全歪。第四个坑是页面离开时没停动画性能被偷偷吃掉。写在最后动画的本质从来不是“会动”这么简单而是你是否能稳定地控制一帧一帧的状态变化。这个案例看着小但已经把Canvas动画最关键的几根骨头搭出来了。把它练顺后面无论你做加载、图表、交互反馈都会更有底气。