HarmonyOS4-ArkUI组件动画

已于 2024-04-09 07:45:50 修改
阅读量1k 收藏 10
点赞数 5
文章标签： nginx 运维
于 2024-04-07 08:48:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sxwn123/article/details/137447732
版权
本文介绍了如何在ArkUI组件中实现动画效果，包括组件属性动画（如小鱼游动）、显示动画（配合`animateTo`）和摇杆功能（基于触摸事件和三角函数）。作者详细展示了上下左右箭头控制小鱼移动的示例以及如何结合转场动画进行游戏界面的过渡。
摘要由CSDN通过智能技术生成

一、ArkUI组件属性动画和显示动画

显示动画：

案例：上下左右箭头控制小鱼的游动  具体代码如下：

import router from '@ohos.router'

@Entry
@Component
struct AnimationPage {
  // 小鱼坐标
  @State fishX: number = 200
  @State fishY: number = 180
  // 小鱼角度
  @State angle: number = 0
  // 小鱼图片
  @State src: Resource = $r('app.media.fish')
  // 是否开始游戏
  @State isBegin: boolean = false

  build() {
    Row() {
      Stack() {
        // 返回按钮
        Button('返回')
          .position({ x: 0, y: 0 })
          .backgroundColor('#20101010')
          .onClick(() => {
            // 返回上一页
            router.back()
          })
        if (!this.isBegin) {
          // 开始游戏
          Button('开始游戏')
            .onClick(() => {
              // 点击后显示小鱼
              this.isBegin = true
            })
        } else {
          // 小鱼图片
          Image(this.src)
            .position({ x: this.fishX - 20, y: this.fishY - 20 }) // 中心点坐标
            .rotate({ angle: this.angle, centerX: '50%', centerY: '50%' })
            .width(40)
            .height(40)
          //.animation({duration: 500})

          // 操作按钮
          Row() {
            Button('⬅').backgroundColor('#20101010')
              .onClick(() => {
                // this.fishX -= 20
                // this.src = $r('app.media.fish_rev')
                // 显示动画
                animateTo({
                  duration: 500
                },
                  () => {
                    this.fishX -= 20
                    this.src = $r('app.media.fish_rev')
                  })
              })
            Column({ space: 40 }) {
              Button('⬆').backgroundColor('#20101010')
                .onClick(() => {
                  this.fishY -= 20
                })
              Button('⬇').backgroundColor('#20101010')
                .onClick(() => {
                  this.fishY += 20
                })
            }

            Button('➡').backgroundColor('#20101010')
              .onClick(() => {
                this.fishX += 20
                this.src = $r('app.media.fish')
              })
          }
          .width(240)
          .height(240)
        }
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

二、ArkUI组件转场动画

代码如下：

import router from '@ohos.router'

@Entry
@Component
struct AnimationPage {
  // 小鱼坐标
  @State fishX: number = 200
  @State fishY: number = 180
  // 小鱼角度
  @State angle: number = 0
  // 小鱼图片
  @State src: Resource = $r('app.media.fish')
  // 是否开始游戏
  @State isBegin: boolean = false

  build() {
    Row() {
      Stack() {
        // 返回按钮
        Button('返回')
          .position({ x: 0, y: 0 })
          .backgroundColor('#20101010')
          .onClick(() => {
            // 返回上一页
            router.back()
          })
        if (!this.isBegin) {
          // 开始游戏
          Button('开始游戏')
            .onClick(() => {
              // 点击后显示小鱼
              // this.isBegin = true

              // 转场动画需结合animateTo才能生效
              animateTo({
                duration: 1000
              },
                () => {
                  // 点击后显示小鱼
                  this.isBegin = true
                })
            })
        } else {
          // 小鱼图片
          Image(this.src)
            .position({ x: this.fishX - 20, y: this.fishY - 20 }) // 中心点坐标
            .rotate({ angle: this.angle, centerX: '50%', centerY: '50%' })
            .width(40)
            .height(40)
              //.animation({duration: 500})
              // 添加转场动画
            .transition({
              // 开始游戏，入场动画
              type: TransitionType.Insert,
              opacity: 0, //一开始是透明的
              translate: { x: -250 }
            })
        }
        // 操作按钮
        Row() {
          Button('⬅').backgroundColor('#20101010')
            .onClick(() => {
              // this.fishX -= 20
              // this.src = $r('app.media.fish_rev')
              // 显示动画
              animateTo({
                duration: 500
              },
                () => {
                  this.fishX -= 20
                  this.src = $r('app.media.fish_rev')
                })
            })
          Column({ space: 40 }) {
            Button('⬆').backgroundColor('#20101010')
              .onClick(() => {
                this.fishY -= 20
              })
            Button('⬇').backgroundColor('#20101010')
              .onClick(() => {
                this.fishY += 20
              })
          }

          Button('➡').backgroundColor('#20101010')
            .onClick(() => {
              this.fishX += 20
              this.src = $r('app.media.fish')
            })
        }
        .width(240)
        .height(240)
        .justifyContent(FlexAlign.Center)
        .position({x: 0, y: 120})
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

三、ArkUI组件实现摇杆功能

此功能自行开发

此块涉及到的主要是算法 ，比如三角函数

角度正弦和余弦

import router from '@ohos.router'
import { TouchEvent } from '@ohos.multimodalInput.touchEvent'
import curves from '@ohos.curves'

@Entry
@Component
struct AnimationPage {
  // 小鱼坐标
  @State fishX: number = 200
  @State fishY: number = 180
  // 小鱼角度
  @State angle: number = 0
  // 小鱼图片
  @State src: Resource = $r('app.media.fish')
  @State srcBg: Resource = $r('app.media.bg')
  // 是否开始游戏
  @State isBegin: boolean = false

  // 摇杆中心区域坐标
  private centerX: number = 120
  private centerY: number = 120

  // 大、小圆半径
  private maxRadius: number = 100
  private radius: number = 20

  // 摇杆小圆球初始位置
  @State positionX: number = this.centerX;
  @State positionY: number = this.centerY;

  // 角度正弦和余弦
  sin: number = 0
  cos: number = 0

  // 小鱼移动速度
  speed: number = 0

  // 任务id
  taskId: number = -1

  build() {
    Row() {
      Stack() {
        // 返回按钮
        Button('返回')
          .position({ x: 0, y: 0 })
          .backgroundColor('#20101010')
          .onClick(() => {
            // 返回上一页
            router.back()
          })
        if (!this.isBegin) {
          // 开始游戏
          Button('开始游戏')
            .onClick(() => {
              // 点击后显示小鱼
              // this.isBegin = true

              // 转场动画需结合animateTo才能生效
              animateTo({
                duration: 1000
              },
                () => {
                  // 点击后显示小鱼
                  this.isBegin = true
                })
            })
        } else {
          // 小鱼图片
          Image(this.src)
            .position({ x: this.fishX - 20, y: this.fishY - 20 }) // 中心点坐标
            .rotate({ angle: this.angle, centerX: '50%', centerY: '50%' })
            .width(40)
            .height(40)
              //.animation({duration: 500})
              // 添加转场动画
            .transition({
              // 开始游戏，入场动画
              type: TransitionType.Insert,
              opacity: 0, //一开始是透明的
              translate: { x: -250 }
            })
        }
        // 操作按钮
        Row() {
          Circle( {width: this.maxRadius * 2, height: this.maxRadius * 2})
            .fill('#20101010')
            .position({x: this.centerX - this.maxRadius, y: this.centerY - this.maxRadius})

          Circle( {width: this.radius * 2, height: this.radius * 2})
            .fill('#403A3A3A')
            .position({x: this.positionX - this.radius, y: this.positionY - this.radius})
        }
        .width(240)
        .height(240)
        .justifyContent(FlexAlign.Center)
        .position({x: 0, y: 120})
        .onTouch(this.handleTouchEvent.bind(this))
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
    .width('100%')
    .backgroundImage(this.srcBg)
  }

  // 处理手指移动的函数
  handleTouchEvent(event: TouchEvent) {
    // 1、先获取手指位置坐标
    // .x .y 我获取不到？ 为啥
    let x = event.touches[0].screenX
    // @ts-ignore
    let y = event.touches[0].screenY
    // 2、计算手指与中心点的坐标差值
    let vx = x - this.centerX
    let vy = y - this.centerY
    // 3、计算手指与中心点连线和x轴正半轴的夹角，单位是弧度
    let angle = Math.atan2(vy, vx);
    // 4、计算手指与中心点的距离（角度正弦和余弦）
    let distance = this.getDistance(vx, vy)
    // 5、计算摇杆小球的坐标（x轴和y轴）
    this.sin = Math.sin(angle)
    this.cos = Math.cos(angle)
    animateTo({curve: curves.responsiveSpringMotion()},
      () => {
        this.positionX = this.centerX + (distance * this.sin)
        this.positionY = this.centerY + (distance * this.cos)
      })
  }

  getDistance(x: number, y: number) {
    let d = Math.sqrt(x * x + y * y)
    return Math.min(d, this.maxRadius)
  }
}

最终版：

import router from '@ohos.router'
import curves from '@ohos.curves'

@Entry
@Component
struct AnimationPage {
  // 小鱼坐标
  @State fishX: number = 200
  @State fishY: number = 180
  // 小鱼角度
  @State angle: number = 0
  // 小鱼图片
  @State src: Resource = $r('app.media.fish')
  @State srcBg: Resource = $r('app.media.bg')
  // 是否开始游戏
  @State isBegin: boolean = false

  // 摇杆中心区域坐标
  private centerX: number = 120
  private centerY: number = 120

  // 大、小圆半径
  private maxRadius: number = 100
  private radius: number = 20

  // 摇杆小圆球初始位置
  @State positionX: number = this.centerX;
  @State positionY: number = this.centerY;

  // 角度正弦和余弦
  sin: number = 0
  cos: number = 0

  // 小鱼移动速度
  speed: number = 0

  // 任务id
  taskId: number = -1

  build() {
    Row() {
      Stack() {
        // 返回按钮
        Button('返回')
          .position({ x: 0, y: 0 })
          .backgroundColor('#20101010')
          .onClick(() => {
            // 返回上一页
            router.back()
          })
        if (!this.isBegin) {
          // 开始游戏
          Button('开始游戏')
            .onClick(() => {
              // 点击后显示小鱼
              // this.isBegin = true

              // 转场动画需结合animateTo才能生效
              animateTo({
                duration: 1000
              },
                () => {
                  // 点击后显示小鱼
                  this.isBegin = true
                })
            })
        } else {
          // 小鱼图片
          Image(this.src)
            .position({ x: this.fishX - 20, y: this.fishY - 20 }) // 中心点坐标
            .rotate({ angle: this.angle, centerX: '50%', centerY: '50%' })
            .width(40)
            .height(40)
              //.animation({duration: 500})
              // 添加转场动画
            .transition({
              // 开始游戏，入场动画
              type: TransitionType.Insert,
              opacity: 0, //一开始是透明的
              translate: { x: -250 }
            })
        }
        // 操作按钮
        Row() {
          Circle( {width: this.maxRadius * 2, height: this.maxRadius * 2})
            .fill('#20101010')
            .position({x: this.centerX - this.maxRadius, y: this.centerY - this.maxRadius})

          Circle( {width: this.radius * 2, height: this.radius * 2})
            .fill('#403A3A3A')
            .position({x: this.positionX - this.radius, y: this.positionY - this.radius})
        }
        .width(240)
        .height(240)
        .justifyContent(FlexAlign.Center)
        .position({x: 0, y: 120})
        .onTouch(this.handleTouchEvent.bind(this))
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
    .width('100%')
    .backgroundImage(this.srcBg)
  }

  // 处理手指移动的函数
  handleTouchEvent(event: TouchEvent) {
    switch (event.type) {
      case TouchType.Up:
        // 还原小鱼的速度
        this.speed = 0
        // 取消定时任务
        clearInterval(this.taskId)
        // 还原摇杆小球的坐标 springMotion:还原动画
        animateTo({curve: curves.springMotion()},
          () => {
            this.positionX = this.centerX
            this.positionY = this.centerY
            this.angle = 0
          })
        break
      case TouchType.Down:
        // 开始定时任务
        this.taskId = setInterval(() => {
          this.fishX += this.speed * this.cos
          this.fishY += this.speed * this.sin
        }, 40);
        break
      case TouchType.Move:
        // 1、先获取手指位置坐标
        let x = event.touches[0].x
        let y = event.touches[0].y
        // 2、计算手指与中心点的坐标差值
        let vx = x - this.centerX
        let vy = y - this.centerY
        // 3、计算手指与中心点连线和x轴正半轴的夹角，单位是弧度
        let angle = Math.atan2(vy, vx);
        // 4、计算手指与中心点的距离（角度正弦和余弦）
        let distance = this.getDistance(vx, vy)
        this.sin = Math.sin(angle)
        this.cos = Math.cos(angle)
        // responsiveSpringMotion:跟手动画
        animateTo({curve: curves.responsiveSpringMotion()},
          () => {
            // 5、计算摇杆小球的坐标（x轴和y轴） 使用显示动画改变坐标
            this.positionX = this.centerX + (distance * this.sin)
            this.positionY = this.centerY + (distance * this.cos)

            // 6、修改小鱼的角度  [弧度转角度]
            if (Math.abs(angle * 2) < Math.PI) {
              // 判断弧度是否小于90度  正负90度 朝右游
              this.src = $r('app.media.fish')
            } else {
              this.src = $r('app.media.fish_rev')
              angle = angle < 0 ? angle + Math.PI : angle - Math.PI
            }
            this.angle = angle * 180 / Math.PI
            this.speed = 5
          })
        break
    }
  }

  getDistance(x: number, y: number) {
    let d = Math.sqrt(x * x + y * y)
    return Math.min(d, this.maxRadius)
  }
}

会跑的兔子
关注
HarmonyOS Next开发学习手册——旋转屏动画增强
maniuT的博客
07-03 665
在原旋转屏动画基础上，可配置渐隐和渐现的转场效果。完整的代码示例和效果如下。需要在EntryAbility.ets文件的onWindowStageCreate方法中添加处理逻辑以获取屏幕的显示方向需要在项目的 module.json5 文件中的 abilities 列表里添加 “orientation”，指定为 “auto_rotation”
【HarmonyOS】深入了解 ArkUI 的动画交互以提高用户体验
ztK63LrD的博客
01-08 2890
从今天开始，博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”，对于刚接触这项技术的小伙伴在学习鸿蒙开发之前，有必要先了解一下鸿蒙，从你的角度来讲，你认为什么是鸿蒙呢？它出现的意义又是什么？鸿蒙仅仅是一个手机操作系统吗？它的出现能够和Android和IOS三分天下吗？它未来的潜力能否制霸整个手机市场呢？抱着这样的疑问和对鸿蒙开发的好奇，让我们开始今天对ArkUI动画操作的掌握吧！
【鸿蒙实战开发】ArkUI-组件动画详解
最新发布
HarmonyOS007的博客
08-09 418
ArkUI为组件提供了通用的属性动画和转场动画能力的同时，还为一些组件提供了默认的动画效果。例如，List的滑动动效，Button的点击动效，是组件自带的默认动画效果。在组件默认动画效果的基础上，开发者还可以通过属性动画和转场动画对容器组件内的子组件动效进行定制。
ArkUI动画概述
12-25 543
动画的原理是在一个时间段内，多次改变UI外观，由于人眼会产生视觉暂留，所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧，对应一次屏幕刷新，而决定动画流畅度的一个重要指标就是帧率FPS（Frame Per Second），即每秒的动画帧数，帧率越高则动画就会越流畅。动画参数包含了如动画时长、变化规律（即曲线）等参数。ArkUI提供的动画能力按照页面的分类方式，可分为页面内的动画和页面间的动画。如下图所示，页面内的动画指在一个页面内即可发生的动画，页面间的动画指两个页面跳转时才会发生的动画。
ArkUI 动画
DN三叶草的博客
12-20 1049
属性动画是通过设置组件的animation属性来给组件添加动画，当组件的width, height, opacity, backgroundColor, scale, rotate, translate等属性变更时，可以实现渐变过渡效果。解读：给组件添加animation属性，arkUI会监控组件样式的变化，当修改了组件的样式时，aukUI发现组件样式发生了变更，会填充组件起始样式和结束样式之间的每一帧画面，从而实现样式变化的动画效果。显式动画使用起来比较灵活，也是实际开发中使用较多的一种方式。
OpenHarmony实战开发-如何实现组件动画。
2401_82546228的博客
04-28 859
ArkUI为组件提供了通用的属性动画和转场动画能力的同时，还为一些组件提供了默认的动画效果。例如，List的滑动动效，Button的点击动效，是组件自带的默认动画效果。在组件默认动画效果的基础上，开发者还可以通过属性动画和转场动画对容器组件内的子组件动效进行定制。
鸿蒙HarmonyOS实战-ArkUI动画（放大缩小视图）_鸿蒙缩放动画实现
2401_84181626的博客
04-16 728
在这种转场中，只需要在一个页面中存在一个Static类型的共享元素，不能在两个页面中同时存在相同id的Static类型共享元素。这种类型的共享元素转场适用于两个页面之间相同元素的衔接，会从起始页共享元素的位置和大小过渡到目标页的共享元素的位置和大小。在共享元素转场中，通过在两个页面中配置相同id的组件作为共享元素，实现元素的位置、大小等属性的过渡。当用户从起始页跳转到目标页时，共享元素会从起始页的位置、大小过渡到目标页的位置、大小，从而创建一种衔接的动画效果。一个人可以走的很快，但一群人才能走的更远！
【Harmony OS】【ArkUI】ets开发 创建视图与构建布局
华为开发者联盟
08-04 1076
本篇是以HarmonyOS官网的基于TS扩展的声明式开发范式文档，体验声明式UI的创建简单视图为基础进行编写。所以笔者将原文进行整合，提取出其中的要点，以便通俗易懂地呈现给读者，希望能帮助你快速了解Harmony的ETS开发，学会简单的视图创建与布局构建的学习。...
【Harmony OS】【ArkUI】ets开发 图形与动画绘制
华为开发者联盟
08-02 1163
ets开发 图形与动画绘制
HarmonyOS实战经验合集之ArkUI（二）
华为开发者联盟
09-20 2124
ArkUI（方舟开发框架）：是一套UI开发框架，提供开发者进行应用UI开发时所必须的能力。
HarmonyOS（鸿蒙）ArkUI组件
小炫风技术旅行
03-17 480
方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。一:Image图片的数据源，支持本地图片和网络图片属性名称参数类型描述altstring |加载时显示的占位图，支持本地图片（png、jpg、bmp、svg和gif类型），不支持网络图片。默认值：null从API version 9开始，该接口支持在ArkTS卡片中使用。
鸿蒙HarmonyOS实战-ArkUI动画（布局更新动画）
shudaoshanQAQ的博客
01-06 2077
动画是一种通过连续展示一系列静止的图像（称为帧）来创造出运动效果的艺术形式。它可以以手绘、计算机生成或其他各种形式呈现。在动画中，每一帧都具有微小的变化，当这些帧被快速播放时，人眼会产生视觉上的错觉，认为物体在运动。动画可以用来表达故事、观念、想法、情感或其他形式的艺术创作。它在电影、电视节目、广告、游戏和网页设计等领域中得到广泛应用。
深入鸿蒙开发-如何更好地使用 ArkUI 的 Image 组件？
学习笔记
08-24 1903
开发者经常需要在应用中显示一些图片，例如：按钮中的logo、网络图片、本地图片等。在应用中显示图片需要使用组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif，具体用法请参考Image组件。ArkUI 的 Image组件类比SwiftUI中的Image，也就是UIKit中的UIImageView。本文主要对 Image 如何展示图像做一些解读，然后对Image。
【HarmonyOS】ArkUI - 动画
Creativity + Efficiency = Success
04-05 1069
利用属性动画、显示动画、组件转场动画实现组件动画效果。
鸿蒙ArkUI开发-属性动画的使用
m0_62167422的博客
01-25 1772
属性动画，是最为基础的动画，其功能强大、使用场景多，应用范围较广。简单来说，属性动画是组件的通用属性发生改变时而产生的属性渐变效果。如下图所示，其原理是，当组件的通用属性发生改变时，组件状态由初始状态逐渐变为结束状态的过程中，会创建多个连续的中间状态，逐帧播放后，就会形成属性渐变效果，从而形成动画。
ArkUI-动画
Cary_cacb的博客
07-18 234
属性动画是通过设置组建的animation属性来给组件添加动画，当组件的width、height、Opacity、backgroundColor、scale、rotate、translate等属性变更时，可以实现渐变过渡效果。
HarmonyOS Next 使用绘制组件实现自定义进度动画
shudaoshanQAQ的博客
03-20 1190
本示例介绍使用绘制组件中的Circle组件以及Path组件实现实时进度效果。
HarmonyOS玩转ArkUI动效 - 水母动画
Halifax
12-17 1726
喊上章鱼哥和蟹老板，我们一起去抓水母吧，“水母动画” 是我参加HarmonyOS【挑战赛第三期】的参赛作品。
直播预告丨Hello HarmonyOS进阶课程第四课——ArkUI动画开发
HarmonyOSDev的博客
05-23 457
为了帮助初识HarmonyOS的开发者快速入门，我们曾推出Hello HarmonyOS系列课程，从最基础的配置IDE和创建Hello World开始，详细介绍HarmonyOS基础、开发环境搭建、IDE使用指导、代码开发示例等，手把手教大家使用最新的ArkUI进行开发，学习Ability和各种跳转，全面地呈现一个HarmonyOS应用的开发过程。 这一系列课程告一段落后，许多开发者都在向我们“催更”，希望可以学习到更多Hello HarmonyOS系列的技术课程。 现在，大家的愿望要成真啦——
HarmonyOS ArkUI密码框组件
04-29
以下是对HarmonyOS ArkUI密码框组件的介绍： 1. 密码输入样式：HarmonyOS ArkUI密码框组件提供了多种密码输入样式，可以根据需求选择合适的样式，例如圆角、边框等。 2. 密码可见性控制：该组件还支持密码可见性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值