鸿蒙进阶-属性动画

news2024/11/13 12:02:32

hello大家好啊,这里是鸿蒙开天组,今天我们来学习鸿蒙中的动画属性。

先来说说动画~

属性值的变化,通常会引发 UI 的变化,结合动画可以让这个变化过程【更为流畅】,反之这个过程将在一瞬间完成,用户体验不好,观感突兀。这就是动画的作用:链接

HarmonyOS 中的动画主要分为:

  1. 属性动画
  2. 转场动画
  3. 组件动画

这么三类,一些和动画相关的其他细节咱们接着往下学。

今天咱们主要来学习属性动画。

属性动画-animation

接下来看看如何让咱们的应用动起来

组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

基本使用

使用动画的核心步骤如下:

  1. 声明相关状态变量
  2. 将状态变量设置到相关可动画属性方法上
  3. 通过属性动画接口开启属性动画(在属性动画上面的属性会应用动画)
  4. 通过状态变量改变UI界面
// 最核心写法,相关动画属性后续展开
组件
  .属性1()
  .属性2()
  // .... animation 必须在需要动画的属性的后面 
  .animation({})

看完了概念,让我们来试一下~

基础模板

@Entry
@Component
struct Page01_animation {
  // 1. 声明相关状态变量
  @State translateY: number = 1
  @State bgColor: ResourceColor = Color.Pink
  @State fontColor: ResourceColor = '#0094ff'
  @State fontWeight: number = 100

  build() {
    Column() {
      Text('C')
        .width(100)
        .height(100)
        .opacity(1)
        .textAlign(TextAlign.Center)
         // 2.将状态变量设置到相关可动画属性接口
        .fontWeight(this.fontWeight)
        .backgroundColor(this.bgColor)
        .translate({ y: this.translateY })
      Button('修改状态变量')
        .onClick(() => {
          // 4. 通过状态变量改变UI界面
          this.bgColor = '#0094ff'
          this.translateY = 100
          this.fontColor = Color.Pink
          this.fontWeight = 900
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)
  }
}

在上面的模板代码中,我们需要为容器添加动画,也就是给text的变量改变添加一个过渡。

为了方便理解,接下来的参考代码将变量改变的部分进行了函数封装,这样我们就可以得到这样一个结果 :

@Entry
@Component
struct Page01_animation {
  // 1. 声明相关状态变量
  @State translateY: number = 1
  @State bgColor: ResourceColor = Color.Pink
  @State fontColor: ResourceColor = '#0094ff'
  @State fontWeight: number = 100
  @State isOrNot: boolean = false

  onclickEventEnd() {
    // 4. 通过状态变量改变UI界面
    this.bgColor = '#0094ff'
    this.translateY = 100
    this.fontColor = Color.Pink
    this.fontWeight = 900
  }

  onclickEventStart() {
    // 4. 通过状态变量改变UI界面
    this.bgColor = Color.Pink
    this.translateY = 1
    this.fontColor = Color.Pink
    this.fontWeight = 100
  }

  build() {
    Column() {
      Text('C')
        .width(100)
        .height(100)
        .opacity(1)// 2.将状态变量设置到相关可动画属性接口
        .fontWeight(this.fontWeight)
        .backgroundColor(this.bgColor)
        .textAlign(TextAlign.Center)
        .translate({ y: this.translateY })
      // 3.通过属性动画接口开启属性动画
        .animation({})
      Button('修改状态变量')
        .onClick(() => {
          if (this.isOrNot) {
            this.onclickEventStart()
            this.isOrNot = !this.isOrNot
          } else {
            this.onclickEventEnd()
            this.isOrNot = !this.isOrNot
          }
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)
  }
}

常用属性

可以通过动画参数(以对象的形式传递)来定制动画效果

组件
  .animation({ 动画参数 })

名称

参数类型

必填

描述

duration

number

动画时长,单位为毫秒。

默认值:1000

curve

string | Curve

| ICurve

设置动画曲线。

默认值:Curve.EaseInOut

delay

number

动画延迟播放时间。单位为毫秒,默认不延时播放。

默认值:0

取值范围:(-∞, +∞)

iterations

number

动画播放次数。

默认值:1

取值范围:[-1, +∞)

说明:

设置为-1时表示无限次播放。设置为0时表示无动画效果。

playMode

PlayMode

动画播放模式,默认播放完成后重头开始播放。

默认值:PlayMode.Normal

onFinish

() => void

结束回调,动画播放完成时触发。

从API version 9开始,该接口支持在ArkTS卡片中使用。

动画曲线枚举值:

名称

描述

Linear

表示动画从头到尾的速度都是相同的。

Ease

表示动画以低速开始,然后加快,在结束前变慢,CubicBezier(0.25, 0.1, 0.25, 1.0)。

EaseIn

表示动画以低速开始,CubicBezier(0.42, 0.0, 1.0, 1.0)。

EaseOut

表示动画以低速结束,CubicBezier(0.0, 0.0, 0.58, 1.0)。

EaseInOut

表示动画以低速开始和结束,CubicBezier(0.42, 0.0, 0.58, 1.0)。

FastOutSlowIn

标准曲线,CubicBezier(0.4, 0.0, 0.2, 1.0)。

LinearOutSlowIn

减速曲线,CubicBezier(0.0, 0.0, 0.2, 1.0)。

FastOutLinearIn

加速曲线,CubicBezier(0.4, 0.0, 1.0, 1.0)。

ExtremeDeceleration

急缓曲线,CubicBezier(0.0, 0.0, 0.0, 1.0)。

Sharp

锐利曲线,CubicBezier(0.33, 0.0, 0.67, 1.0)。

Rhythm

节奏曲线,CubicBezier(0.7, 0.0, 0.2, 1.0)。

Smooth

平滑曲线,CubicBezier(0.4, 0.0, 0.4, 1.0)。

Friction

阻尼曲线,CubicBezier(0.2, 0.0, 0.2, 1.0)。

playMode 播放模式枚举值

名称

描述

Normal

动画正向播放。

Reverse

动画反向播放。

Alternate

先正向播放,再反向播放。

AlternateReverse

先反向播放,后正向播放。

非常多的属性值,这里就不逐个尝试啦~有兴趣的可以自己尝试一下。

案例-折扣信息

接下来咱们来写一个小小的案例

需求:

动画效果:

  • 元素大小切换
  • 动画次数无限,元素【加载之后】开启动画

点击按钮触发

咱们先考虑如何实现点击开启动画,元素加载之后涉及到一个还未学习的知识点

核心步骤:有布局,有逻辑

1.布局:用 Text 方便调整实现布局

2.动画:animation

        a.次数无限次

        b.动画线性:匀速

        c.改变的是缩放

                 i.宽高,定义在@State

3.如何触发:

        a.点击触发

模板代码

@Entry
@Component
struct Page02_animationDemo1 {
  build() {
    Column({ space: 50 }) {
      Text('全场低至一分购')
        .fontSize(30)
        .fontWeight(900)
        .fontColor(Color.Red)
        .backgroundColor('#e8b66d')
        .padding(10)
        .borderRadius(20)
    }
    .width('100%')
    .height('100%')
    .padding(20)

  }

  @Styles
  fullSize() {
    .width('100%')
    .height('100%')
  }
}

参考代码

@Entry
@Component
struct Page02_animationDemo1 {
  // 1. 声明相关状态变量
  @State scaleX: number = 1
  @State scaleY: number = 1

  build() {
    Column({ space: 50 }) {
      Text('全场低至一分购')
        .fontSize(30)
        .fontWeight(900)
        .fontColor(Color.Red)
        .backgroundColor('#e8b66d')
        .padding(10)
        .borderRadius(20)
        // 2.将状态变量设置到相关可动画属性接口
        .scale({
          x: this.scaleX,
          y: this.scaleY
        })
        // 3. 通过属性动画接口开启属性动画
        .animation({
          duration: 1000,
          curve: Curve.Ease,
          playMode: PlayMode.Alternate,
          iterations: -1
        })
        .onClick(() => {
          // 4.通过状态变量改变UI界面
          this.scaleX = 1.3
          this.scaleY = 1.3
        })
    }
    .width('100%')
    .height('100%')
    .padding(20)

  }

  @Styles
  fullSize() {
    .width('100%')
    .height('100%')
  }
}

组件加载自动触发事件

如果要实现元素加载的时候就开始动画,可以使用挂载事件来实现,这是一个通用事件

链接

名称

功能描述

onAppear(event: () => void)

组件挂载显示时触发此回调。

从API version 9开始,该接口支持在ArkTS卡片中使用。

onDisAppear(event: () => void)

组件卸载消失时触发此回调。

从API version 9开始,该接口支持在ArkTS卡片中使用。

如何理解软件开发中的事件: 框架提供给开发者,在特定时机注册自定义逻辑的一种机制

接下来进行一个测试~

@Entry
@Component
struct Page03_appearAnddisAppear {
  @State isShow: boolean = false

  build() {
    Column({ space: 50 }) {
      Button('切换显示')
        .onClick(() => {
          this.isShow = !this.isShow
        })

      if (this.isShow) {
        Text('我是文本')
          .width('100%')
          .onAppear(() => {
            console.log('加载了')
          })
          .onDisAppear(() => {
            console.log('卸载了')
          })
      }

    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

案例调整后的效果

@Entry
@Component
struct Page04_animationDemo1_event {
  // 1. 声明相关状态变量
  @State scaleX: number = 1
  @State scaleY: number = 1

  build() {
    Column({ space: 50 }) {
      Text('全场低至一分购')
        .fontSize(30)
        .fontWeight(900)
        .fontColor(Color.Red)
        .backgroundColor('#e8b66d')
        .padding(10)
        .borderRadius(20)// 2.将状态变量设置到相关可动画属性接口
        .scale({
          x: this.scaleX,
          y: this.scaleY
        })// 3. 通过属性动画接口开启属性动画
        .animation({
          duration: 1000,
          curve: Curve.EaseInOut,
          playMode: PlayMode.Alternate,
          iterations: -1
        })
        .onAppear(() => {
          // 4.通过状态变量改变UI界面
          this.scaleX = 1.3
          this.scaleY = 1.3
        })
    }
    .width('100%')
    .height('100%')
    .padding(20)

  }

  @Styles
  fullSize() {
    .width('100%')
    .height('100%')
  }
}

今天的文章就到这里啦!这里是鸿蒙开天组,感谢大家的关注,咱们下篇文章再见!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2236443.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

算法每日练 -- 双指针篇(持续更新中)

介绍: 常见的双指针有两种形式,一种是对撞指针(左右指针),一种是快慢指针(前后指针)。需要注意这里的双指针不是 int* 之类的类型指针,而是使用数组下标模拟地址来进行遍历的方式。 …

RHCE的学习(11)

第八章 防火墙 什么是防火墙 防火墙是位于内部网和外部网之间的屏障,它按照系统管理员预先定义好的规则来控制数据包的进出。 分类: 硬件防火墙:由厂商设计好的主机硬件,其操作系统主要以提供数据包数据的过滤机制为主&#xff…

Java开发配置文件的详情教程配置文件类型

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……) 2、学会Oracle数据库入门到入土用法(创作中……) 3、手把手教你开发炫酷的vbs脚本制作(完善中……) 4、牛逼哄哄的 IDEA编程利器技巧(编写中……) 5、面经吐血整理的 面试技…

ffmpeg:视频字幕嵌入(GPU加速)

实现方案 参考指令 ffmpeg -i input_video.mp4 -vf "subtitlessubtitles.srt" output_video.mp4 解决因文件名称复杂导致的指令执行失败问题(引号给文件框起来) ffmpeg -i "A.mp4" -vf "subtitlesB.srt" "c.mp4&qu…

改进系列(3):基于ResNet网络与CBAM模块融合实现的生活垃圾分类

目录 1. ResNet介绍 2. CBAM 模块 3. resnet cbam 3.1 添加在每个layer层后 3.2 关于训练的建议 4. 垃圾分类实战 4.1 数据集 4.2 训练 4.3 最好的权重 4.4 推理 5. 其它 1. ResNet介绍 ResNet(残差网络)是一种深度卷积神经网络模型&#xf…

【HarmonyOS Next】数据本地存储:@ohos.data.preferences

【HarmonyOS Next】数据本地存储:ohos.data.preferences 在开发现代应用程序时,数据存储是一个至关重要的过程。应用程序为了保持某些用户设置、应用状态以及其他小量数据信息通常需要一个可靠的本地存储解决方案。在 HarmonyOS Next 环境下&#xff0c…

【从零开始的LeetCode-算法】3255. 长度为 K 的子数组的能量值 II

给你一个长度为 n 的整数数组 nums 和一个正整数 k 。 一个数组的 能量值 定义为: 如果 所有 元素都是依次 连续 且 上升 的,那么能量值为 最大 的元素。否则为 -1 。 你需要求出 nums 中所有长度为 k 的 子数组 的能量值。 请你返回一个长度为 n - …

C++ 参数传递 笔记

目录 1、输入参数的传递方式-选择传值还是传引用? 处理用户信息 处理坐标 处理配置 处理ID 2、对于需要修改的参数,使用非const引用传递 有趣的例外:警惕表象的迷惑 需要警惕的陷阱 “糟糕”的update方法: “完美”的set_name与set…

爬虫策略规避:Python爬虫的浏览器自动化

网络爬虫作为一种自动化获取网页数据的技术,被广泛应用于数据挖掘、市场分析、竞争情报等领域。然而,随着反爬虫技术的不断进步,简单的爬虫程序往往难以突破网站的反爬虫策略。因此,采用更高级的爬虫策略,如浏览器自动…

信号-3-信号处理、可重入函数与`volatile`关键字总结

信号处理是操作系统中的一个重要机制,它允许进程在运行期间响应外部事件,并作出相应的处理。为了处理信号,程序员需要理解如何设置信号处理器,如何管理信号的屏蔽与阻塞,以及信号的递送机制。本文将结合操作系统中的信…

深度学习-图像评分实验(TensorFlow框架运用、读取处理图片、模型建构)

目录 0、实验准备 ①实验环境 ②需要下载的安装包 ③注意事项(很关键,否则后面内容看不懂) ④容易出现的问题 1、查看数据并读取数据。 2、PIL库里的Image包进行读取(.resize更改图片尺寸,并将原始数据归一化处…

【Linux系统】—— 基本指令(二)

【Linux系统】—— 基本指令(二) 1 「alias」命令1.1 「ll」命令1.2 「alias」命令 2 「rmdir」指令与「rm」指令2.1 「rmdir」2.2 「rm」2.2.1 「rm」 删除普通文件2.2.2 「rm」 删除目录2.2.3 『 * 』 通配符 3 「man」 指令4 「cp」 指令4.1 拷贝普通…

面向对象技术简述(含设计模式)

6.9.2 面向对象技术 面向对象 对象 分类 继承 通过消息的通信 面向对象 对象 分类 继承 通过消息的通信 面向对象对象分类继承通过消息的通信其中包括: 对象 运行的实体;既包含属性/数据,又包含方法/行为/操作数据的函数;…

【信号处理】基于联合图像表示的深度学习卷积神经网络

Combined Signal Representations for Modulation Classification Using Deep Learning: Ambiguity Function, Constellation Diagram, and Eye Diagram 信号表示 Ambiguity Function(AF) 模糊函数描述了信号的两个维度(dimensions):延迟(delay)和多普勒(Doppler)。 …

【C++练习】两个实型数的加法运算

题目: 编写一个C程序,实现两个实型数的加法运算并输出结果。 要求: 定义一个函数 dadd,该函数接收两个 double 类型的参数,并返回它们的和。在 main 函数中,提示用户输入两个实型数(double 类…

【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)

博主说明:本文项目编号 T 061 ,文末自助获取源码 \color{red}{T061,文末自助获取源码} T061,文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…

Sql面试题二:请查询出用户连续三天登录的所有数据记录

问题: 现有用户登录记录表,请查询出用户连续三天登录的所有数据记录 id dt 1 2024-04-25 1 2024-04-26 1 2024-04-27 1 2024-04-28 1 2024-04-30 1 2024-05-01 1 2024-05-02 1 2024-05-04 1 2024-05-05 2 2…

科研绘图系列:R语言分组堆积图(grouped stacked barplot)

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包准备画图主题数据链接导入数据画图数据准备图例图1图2合并图系统信息介绍 分组堆积图(Grouped Stacked Bar Chart)是一种数据可视化图表,它结合了分组柱状图和堆积柱状图…

世界技能竞赛大数据应用开发环境1:1还原

集群情况 模块A搭建环境,在容器中搭建大数据平台 Pc机,安装安装比赛需要软件 模块B中使用idea快速开发完成数据处理 模块E包含了接口数据,使用vs code快速搭建vue数据可视化

【网络协议大花园】应用层 http协议的使用小技巧,用好了都不用加班,效率翻两倍(下篇)

本篇会加入个人的所谓鱼式疯言 ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. 🤭🤭🤭可能说的不是那么严谨.但小编初心是能让更多人…