HarmonyOS 如何用动画实现Canvas内容的改变

需要用Canvas绘制一些内容,且内容在组件状态改变时,需要动画效果

HarmonyOS
2024-12-18 16:49:51
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

canvas动画实现方式,下面的demo可以作为参考:

import curves from '@ohos.curves';

@Entry
@Component
struct AnimationDemo {
  @State animate: boolean = false; // 第一步: 声明相关状态变量
  @State rotateValue: number = 0; // 组件一旋转角度
  @State translateX: number = 0; // 组件二偏移量
  @State opacityValue: number = 1; // 组件二透明度
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) // 第二步:将状态变量设置到相关可动画属性接口

  build() {
    Row() {
      //组件一
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Canvas(this.context)
          .onReady(() => {
            this.context.fillRect(0, 0, 100, 100)
          })
      }
      .opacity(this.opacityValue)
      .rotate({ angle: this.rotateValue })
      .animation({ curve: curves.springMotion() }) //通过属性动画接口开启属性动画
      .backgroundColor('#317AF7')
      .width(100)
      .height(100)
      .borderRadius(30)
      .onClick(() => {
        this.animate = !this.animate
        //闭包内通过状态变量改变UI界面 //
        // 这里可以写任何能改变UI的逻辑比如数组添加,显隐控制,系统会检测改变后的UI界面与之前的UI界面的差异,对有差异的部分添加动画 //
        // 组件一的rotate属性发生变化,所以会给组件一添加rotate旋转动画
        this.rotateValue = this.animate ? 90 : 0
        // 组件二的offset属性发生变化,所以会给组件二添加offset偏移动画
        this.translateX = this.animate ? 50 : 0
        this.opacityValue = this.animate ? 0.6 : 1
      })

      // 组件二
      Column() {
      }
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor('#D94838')
      .borderRadius(30)
      .opacity(this.opacityValue)
      .translate({ x: this.translateX })
      .animation({ curve: curves.springMotion() })
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }

  }
}
分享
微博
QQ
微信
回复
2024-12-18 18:58:06
相关问题
HarmonyOS Canvas动画实现
173浏览 • 1回复 待解决
HarmonyOS canvas动画如何实现逐帧动画
390浏览 • 1回复 待解决
HarmonyOS Canvas 实现动画
538浏览 • 1回复 待解决
Mysql如何用sql语句删除这样内容
2153浏览 • 1回复 待解决
HarmonyOS Canvas绘制内容如何更新
305浏览 • 1回复 待解决
HarmonyOS 如何清空canvas里绘制内容
359浏览 • 1回复 待解决
Canvas绘制内容如何动态更新
2246浏览 • 1回复 待解决
HarmonyOS如何用Java实现配音功能
5309浏览 • 1回复 待解决