05鸿蒙【动画】

已于 2024-04-18 18:07:35 修改
阅读量226 收藏 4
点赞数 9
分类专栏： 鸿蒙 文章标签： harmonyos 华为
于 2024-03-14 23:27:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pacong/article/details/136718062
版权

目录

动画

  • 属性动画
  • 显式动画
  • 组件转场动画

手翻书的原理：
手翻书的原理主要是基于帧动画（Frame Animation）的概念。它通过在连续的画面中绘制微小的变化，制造出连贯的动画效果。每个画面被称为一帧，通过快速连续播放帧动画，让静止的图像变得活跃起来。手翻书可以被看作是动画片的简化版，利用人的视觉停留原理，通过手绘动画的形式展现内容。

在这里插入图片描述

在这里插入图片描述
我们只需要关注，一个组件的开始状态和结束状态，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(() => {
              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, curve: Curve.Smooth})
            .transition({
              type: TransitionType.Insert,
              opacity: 0,
              translate: {x: -250}
            })
        }
        // 操作按钮
        Row(){
          Button('←').backgroundColor('#20101010')
            .onClick(() => {
              animateTo(
                {duration: 500},
                () => {
                  this.fishX -= 20
                  this.src = $r('app.media.fish_rev')
                }
              )
            })
          Column({space: 40}){
            Button('↑').backgroundColor('#20101010')
              .onClick(() => {
                animateTo(
                  {duration: 500},
                  () => {
                    this.fishY -= 20
                  }
                )
              })
            Button('↓').backgroundColor('#20101010')
              .onClick(() => {
                animateTo(
                  {duration: 500},
                  () => {
                    this.fishY += 20
                  }
                )
              })
          }
          Button('→').backgroundColor('#20101010')
            .onClick(() => {
              animateTo(
                {duration: 500},
                () => {
                  this.fishX += 20
                  this.src = $r('app.media.fish')
                }
              )
            })
        }
        .height(240)
        .width(240)
        .justifyContent(FlexAlign.Center)
        .position({x:0,y:120})
      }
      .height('100%').width('100%')
    }
    .height('100%')
    .width('100%')
    .backgroundImage($r('app.media.sea'))
    .backgroundImageSize({height: '105%', width: '100%'})
  }
}

组件转场动画

在这里插入图片描述
在这里插入图片描述
注意入场出场动画要结合animateTo使用
显示与否的控制要放在animateTo里

在这里插入图片描述

//  小鱼动画案例按钮版

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(() => {
              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, curve: Curve.Smooth})
            .transition({
              type: TransitionType.Insert,
              opacity: 0,
              translate: {x: -250} // 起始位置
            })
        }
        // 操作按钮
        Row(){
          Button('←').backgroundColor('#20101010')
            .onClick(() => {
              animateTo(
                {duration: 500},
                () => {
                  this.fishX -= 20
                  this.src = $r('app.media.fish_rev')
                }
              )
            })
          Column({space: 40}){
            Button('↑').backgroundColor('#20101010')
              .onClick(() => {
                animateTo(
                  {duration: 500},
                  () => {
                    this.fishY -= 20
                  }
                )
              })
            Button('↓').backgroundColor('#20101010')
              .onClick(() => {
                animateTo(
                  {duration: 500},
                  () => {
                    this.fishY += 20
                  }
                )
              })
          }
          Button('→').backgroundColor('#20101010')
            .onClick(() => {
              animateTo(
                {duration: 500},
                () => {
                  this.fishX += 20
                  this.src = $r('app.media.fish')
                }
              )
            })
        }
        .height(240)
        .width(240)
        .justifyContent(FlexAlign.Center)
        .position({x:0,y:120})
      }
      .height('100%').width('100%')
    }
    .height('100%')
    .width('100%')
    .backgroundImage($r('app.media.sea'))
    .backgroundImageSize({height: '105%', width: '100%'})
  }
}

小鱼案例

计算方法，三角函数
在这里插入图片描述

请添加图片描述

Math.atan2()方法计算二维坐标系中任意一个点（x, y）和原点（0, 0）的连线与X轴正半轴的夹角大小。

// 所以Math.atan2(vy, vx)就可以计算出，角BAC的夹角，
// 3.计算手指与中心点连线和x轴正半轴的夹角，单位是弧度
        let angle = Math.atan2(vy, vx)

 // 5.计算摇杆小球的坐标
            this.positionX = this.centerX + distance * this.cos
            this.positionY = this.centerY + distance * this.sin

请添加图片描述
小鱼的角度
在这里插入图片描述

   // 6.修改小鱼的角度
            if(Math.abs(angle * 2) < Math.PI){  // 注意这里angle是弧度， 90度=π/2
              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  // 弧度转角度  弧度和角度的关系：弧度数/π=角度值/180°。

            this.speed = 5

小鱼全部代码

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

@Entry
@Component
struct AnimationPage2 {
  // 小鱼坐标
  @State fishX: number = 200
  @State fishY: number = 120
  // 小鱼角度
  @State angle: number = 0
  // 小鱼图片
  @State src: Resource = $r('app.media.fish')

  // 是否开始游戏
  @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(() => {
              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)
            .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})
        }
        .height(240)
        .width(240)
        .justifyContent(FlexAlign.Center)
        .position({x:0,y:120})
        .onTouch(this.handleTouchEvent.bind(this))  // 手指在移动过程中，会移除大圆，所以我们把，监听放到大容器上
      }
      .height('100%').width('100%')
    }
    .height('100%')
    .width('100%')
    .backgroundImage($r('app.media.sea'))
    .backgroundImageSize({height: '105%', width: '100%'})
  }
  // 处理手指移动的事件
  handleTouchEvent(event: TouchEvent){
    switch (event.type){   // 对手指移动类型做判断，离开停下小鱼，摇杆还原
      case TouchType.Up:
      // 还原小鱼速度
        this.speed = 0
      // 取消定时任务
        clearInterval(this.taskId)
      // 还原摇杆小球的坐标
        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)
        animateTo(
          {curve: curves.responsiveSpringMotion()},   // 跟守动画，持续的动画曲线
          () => {
            // 5.计算摇杆小球的坐标
            this.positionX = this.centerX + distance * this.cos
            this.positionY = this.centerY + distance * this.sin

            // 6.修改小鱼的角度
            if(Math.abs(angle * 2) < Math.PI){  // 注意这里angle是弧度， 90度=π/2
              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  // 弧度转角度  弧度和角度的关系：弧度数/π=角度值/180°。

            this.speed = 5
          }
        )
        break
    }
  }
  getDistance(x: number, y: number){
    let d = Math.sqrt(x * x + y * y)
    return Math.min(d, this.maxRadius)
  }
}
pacong
关注
  • 9
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS鸿蒙ArkTS滑动动画按钮
特创数字
03-02 238
【代码】HarmonyOS鸿蒙ArkTS滑动动画按钮。
鸿蒙HarmonyOS 动画
qq_28641891的博客
04-29 957
鸿蒙HarmonyOS 动画 显式动画（animateTo）属性动画（animation）转场动画详解
鸿蒙 HarmonyOs 动画效果 快速入门
制定持续可量化的目标，不断坚持。
06-30 1290
设置动画曲线。默认值：Curve.EaseInOut,平滑开始和结束设置播放次数。默认值：1，取值范围：[-1, +∞]设置为 -1 表示无限次播放。
【鸿蒙实战开发】HarmonyOS动画效果实现
HarmonyOS_002的博客
07-14 852
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、openHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
鸿蒙开发之发动画篇
2401_82772199的博客
02-01 518
动画的原理是在一个时间段内，多次改变UI外观，由于人眼会产生视觉暂留，所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧，对应一次屏幕刷新，而决定动画流畅度的一个重要指标就是帧率FPS（Frame Per Second），即每秒的动画帧数，帧率越高则动画就会越流畅。ArkUI中，产生动画的方式是改变属性值且指定动画参数。动画参数包含了如动画时长、变化规律（即曲线）等参数。当属性值发生变化后，按照动画参数，从原来的状态过渡到新的状态，即形成一个动画。
【鸿蒙学习】
m0_54969479的博客
01-14 1959
鸿蒙第一课笔记 学习网址：https://www.bilibili.com/video/BV1p54y1G7WU?p=1 https://developer.harmonyos.com/cn/docs/documentation/doc-guides/start-with-js-low-code-0000001136173782 1、OpenHarmony技术架构 OpenHarmony整体遵从分层设计，从上到下为：内核层、系统层、框架层和应用层。系统功能按照“系统 > 子系统 > 组件”逐级展
harmonyos开机动画-om:和谐
07-01
harmonyos开机动画 | | | 项目中文注解鸿蒙官方内核源码,图文并茂,详细阐述鸿蒙架构和代码设计细节.每个码农,学职生涯,都应精读一遍内核源码.精读内核源码最大的好处是:将孤立知识点织成一张高浓度,高密度底层网,对...
harmonyos开机动画-AndroidVSHarmony:TheprojecttellsyouhowtodeveloptheHarmony
07-01
harmonyos开机动画 AndroidVSHarmony [TOC] 介绍 The project tells you how to develop the HarmonyOS project.And it shows the differences between [Android] project and [HarmonyOS] project.And it shows the...
鸿蒙 ArkTS 双色旋转动画效果（源码版）
02-07
鸿蒙 ArkTS 双色旋转动画效果是一种在 HarmonyOS 操作系统中实现的视觉效果，主要应用于用户界面的交互设计，提升用户体验。ArkTS 是 HarmonyOS 的一种编程语言，它是基于 TypeScript 扩展的，提供了丰富的类型安全...
【HarmonyOS】【应用开发】动画-属性动画与显式动画
开发小鸽
01-07 2374
官网对于属性动画的定义如下：组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等个人理解：属性动画针对的是同一个组件的属性变化情况，如在同一个页面中触发了组件的属性变化，这个变化需要以过渡的方式体现，这就需要属性动画来承接这个过渡过程，不然变化就会显得十分突兀与生硬。因此，只要组件的指定属性有变化，那么这个变化就会通过属性动画来体现。
HarmonyOS开发实战（ Beta5版）应用滑动场景帧率问题分析最佳实践
最新发布
weixin_55362248的博客
09-01 763
应用运行时的流畅度，涉及人因要素，不完全等同于应用系统性能。其中帧率问题，可以从如下几个指标进行衡量。
鸿蒙（ Beta5.0版）开发实战：自定义TabBar页签
weixin_55362248的博客
08-29 1763
依次点击tabBar页面，除了社区图标之外，其它图标往上移动一小段距离。
HarmonyOS开发实战（ Beta5版）减小应用包大小
weixin_55362248的博客
08-30 1361
当前DevEco Studio默认打包应用时不压缩so库文件，配置so压缩选项后，DevEco Studio会将so库文件以压缩形式打包到包中，从而减小应用包大小。
鸿蒙（API 12 Beta3版）【使用AVScreenCapture录屏取原始码流(C/C++)】视频播放与录制
鸿蒙的技术博客
08-27 1124
屏幕录制主要为主屏幕录屏功能。 开发者可以调用录屏（AVScreenCapture）模块的C API接口，完成屏幕录制，采集设备内、麦克风等的音视频源数据。当开发直播、办公等应用时，可以调用录屏模块获取音视频原始码流，然后通过流的方式流转到其他模块处理，达成直播时共享桌面的场景。
鸿蒙OpenHarmony、HarmonyOS、HarmonyOS NEXT的区别
01234567890
08-27 717
鸿蒙OpenHarmony、HarmonyOS、HarmonyOS NEXT三个版本区别
鸿蒙位置服务
qq_46025779的博客
08-27 503
3、看一下用户是否授权，没有授权拉起弹窗让用户授权。在module.json5文件下申请位置权限。4、把这个方法加到页面启动的时候就查。6、在添加一个页面就ok了。5、开始获取当前位置。
消息称华为纯血鸿蒙部分应用采用虚拟机方案
weixin_41446370的博客
08-29 672
华为预计在11月发布正式版纯血鸿蒙，为了能够适配更多的App，官方也是有了新的解决方案。之前，余承东表示，鸿蒙原生应用进入全面冲刺阶段，TOP 5000应用全部启动，满足用户使用时长99.9%，1500多个已经完成上架，18个领域全覆盖。他表示，希望在2024年之前，在中国市场将99%以上手机使用时间占比的5000个应用完全迁移到鸿蒙原生操作系统上，以实现操作系统和应用生态的统一。虚拟机方案的引入也给了开发者更多的时间来完成适配工作，确保应用能够在鸿蒙系统上更好地运行。
HarmonyOS NEXT 体验电话拨打
weixin_69135651的博客
08-27 574
使用了ArkTS的装饰器语法，如@Entry和@Component组件。代码开始部分导入了必要的常量、类型和函数。应用了一些通用样式，如字体大小、颜色、边距等，以确保界面的一致性和美观性。基于鸿蒙Next模拟电话通讯录，可以拨打电话，删除电话等。客户服务、业务咨询、回访处理、沟通交流、信息交流等等。第一步：点击拨打点电话，先判断设备是否具备通讯能力。整个界面使用Column布局，将各个元素垂直排列。使用Row布局来组织水平方向的元素，如拨打按钮。使用了如@Builder 装饰器自定义了组件。
鸿蒙状态管理
qq_36197716的博客
09-01 760
我们开发中构建的页面多为静态页面。如果希望构建一个动态的，有交互的界面，就需要引入‘状态’的概念用户构建了一个UI模型，其中应用的运行时的状态是参数，当参数改变时，UI作为返回结果，也将进行对应的改变。状态变化带来UI的重新渲染。自定义组件拥有变量所谓属性，必须被装饰器修饰才可以成为状态变量，状态变量的改变会引起UI的渲染刷新，如果不使用状态变量，UI只能在初始化时渲染，后续将不会再刷新。State状态：驱动UI更新的数据，用户通过触发组件的事件方法，改变状态数据。
HarmonyOS JS UI：transform与animation动画解析
"HarmonyOS JS UI 动画教程" 在 HarmonyOS 的开发中，JavaScript UI 动画是提升用户体验的关键元素。本教程主要讲解了两种类型的动画：静态动画和连续动画，以及它们如何通过 `transform` 和 `animation` 样式来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值