华为 HarmonyOS NEXT 原生应用开发: 动画的基础使用(属性、显示、专场)动画

news2024/11/26 16:51:36

2024年11月5日 LiuJinTao

文章目录

  • 鸿蒙中动画的使用
      • 一、属性动画 - animation
          • 属性动画代码示例
      • 二、显示动画 - AnimateTo
      • 三、专场动画

鸿蒙中动画的使用

一、属性动画 - animation

在这里插入图片描述

属性动画代码示例
/**
 * 属性动画的演示
 */
@Entry
@Component
struct Index {
  @State selfWidth: number = 20
  @State setId: number = 0
  build() {
    Column() {
      Text("HarmonyOS NEXT")
        .fontWeight(FontWeight.Bold)
        .fontSize(this.selfWidth)
        .textAlign(TextAlign.Center)
        .animation({
          // 动画事件
          duration: 900,
          // 动画曲线
          // curve: Curve.Linear,
          curve: "cubic-bezier(1.00, -0.18, 1.00, -0.33)",
          // 延迟时间
          delay: 500,
          // 执行次数  (-1 无限次)
          iterations: 2,
          // 播放模式
          playMode: PlayMode.Alternate
        })

      Button("放大")
        .onClick(() => {
          // 这里通过定时器实现动画效果(20毫秒动一下,产生视觉效果!)
          this.setId = setInterval(() => {
            if (this.selfWidth < 50) {
              this.selfWidth++
            } else {
              clearInterval(this.setId)  //  关闭定时器
            }
          }, 30)
        })
      Button("缩小")
        .onClick(() => {
          // 当 animation 发现该组件属性发生变化,就会执行 animation属性动画 (这里我们改变字体大小)
          this.selfWidth = 20
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

二、显示动画 - AnimateTo

在这里插入图片描述

/**
 *  显示动画的演示
 */
@Entry
@Component
struct Index {
  @State selfWidth: number = 20
  @State setId: number = 0
  build() {
    Column() {
      Text("HarmonyOS NEXT")
        .fontWeight(FontWeight.Bold)
        .fontSize(this.selfWidth)
        .textAlign(TextAlign.Center)

      Button("放大")
        .onClick(() => {
          // 这里通过定时器实现动画效果(20毫秒动一下,产生视觉效果!)
          this.setId = setInterval(() => {
            if (this.selfWidth < 50) {
              this.selfWidth++
            } else {
              clearInterval(this.setId)  //  关闭定时器
            }
          }, 30)
        })
      Button("缩小")
        .onClick(() => {
          animateTo({
            // 这里可以写  animation 中的所有配置
            duration: 900,
          } , () => {
            // 事件触发,这里执行的事件逻辑都会通过动画形式呈现
            //  和 animation比较,这个比较专一,控制字体大小就只会呈现字体大小动画
            this.selfWidth = 20
          })
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

三、专场动画

在这里插入图片描述

  • Index
import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index  {
  build() {
    Column() {
      Column() {
        Image($r("app.media.startIcon"))
          .width(100)
          .aspectRatio(1)
          // 分别绑定该属性,且id值一样,通过路由跳转实现专场动画效果
          .sharedTransition("sharedID", {duration: 350})
        Button("跳转")
          .onClick(() => {
            router.pushUrl({
              url: "pages/Index2"
            })
          })
      }
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}
  • Index2
import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index2 {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Image($r("app.media.startIcon"))
        .width("100%")
        .height(400)
          // 分别绑定该属性,且id值一样,通过路由跳转实现专场动画效果
        .sharedTransition("sharedID", {duration: 350})
      Button("返回")
        .onClick(() => {
          router.pushUrl({
            url: "pages/Index"
          })
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

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

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

相关文章

信号与噪声分析——第三节:随机过程的统计特征

随机过程的定义&#xff1a; 随机过程是一种数学模型&#xff0c;用来描述系统或现象在时间或者空间上随之变化的不确定性。 一个随机过程的数字特征 1.数学期望&#xff08;统计平均值&#xff09;&#xff1a; 表示为 数学期望是随机过程在时间 t 上的平均值&#xff0c;通常…

Linux SSH免密登入以及配置脚本

一、ssh原理简单介绍 客户端生成一对公钥和私钥&#xff0c;并将自己的公钥发送到服务器上 其中公钥用来加密&#xff0c;私钥用来解密。 二、ssh免密登入实现步骤详解 我这就以服务器controller和客户端compute来做为例子 2.1、首先在controller上输入ssh-keygen -t rsa …

搜维尔科技:Manus VR数据手套-机器人手部数据采集,推动机器人技术新高度

人工智能机器人培训-构建集成 将实时数据直接传输到ROS并开始控制你的机器人。使用我们的 C Windows 和Linux SDK开发集成&#xff0c;以用于自定义管道。 原始数据&#xff1a;推动机器学习和机器人技术 以CSV格式记录并导出手指运动作为原始数据。为机器学习和机器人应用提…

将HTML项目上传至Gitee仓库(详细教程)

1.登录giett giett地址链接:Gitee - 基于 Git 的代码托管和研发协作平台 2.新建一个giett仓库 创建后得到远程仓库&#xff1a; 3、在本地项目文件夹右击鼠标点击 Open Git Bash Here 4、输入命令 命令:git init&#xff0c;这个目录变成git可以管理的仓库&#xff0c;会出…

重大917该如何复习?难度大不大?重点是啥?

C哥专业提供——计软考研院校选择分析专业课备考指南规划 重大917整体难度不高&#xff0c;认真研究好各年真题&#xff0c;经过系统扎实的复习&#xff0c;相信同学一定能取得好的成绩&#xff01; 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 重庆…

CentOS 7 安装 ntp,自动校准系统时间

1、安装 ntp yum install ntp 安装好后&#xff0c;ntp 会自动注册成为服务&#xff0c;服务名称为 ntpd 2、查看当前 ntpd 服务的状态 systemctl status ntpd 3、启动 ntpd 服务、查看 ntpd 服务的状态 systemctl start ntpdsystemctl status ntpd 4、设置 ntpd 服务开机启…

信息安全工程师(77)常见网络安全应急事件场景与处理流程

前言 网络安全应急事件场景多样&#xff0c;处理流程也需根据具体情况灵活调整。以下将详述几种常见的网络安全应急事件场景及其处理流程。 一、数据泄露事件 场景描述&#xff1a; 数据泄露是指敏感、受保护或机密数据被未经授权的个人复制、传输、查看、窃取或使用。这种事件…

使用Django REST framework构建RESTful API

使用Django REST framework构建RESTful API Django REST framework简介 安装Django REST framework 创建Django项目 创建Django应用 配置Django项目 创建模型 迁移数据库 创建序列化器 创建视图 配置URL 配置全局URL 配置认证和权限 测试API 使用Postman测试API 分页 过滤和排序…

【保姆级教程】使用 oh-my-posh 和 clink 打造个性化 PowerShell 和 CMD

内容预览 ≧∀≦ゞ 终端美化指南—— oh-my-posh 和 clink 篇引言一、准备工作默认终端&#xff1a;Windows Terminal离线安装步骤 包管理器&#xff1a;scoop为什么选择使用 Scoop 安装&#xff1f;scoop 安装 字体下载 二、配置 Windows Terminal三、配置 oh-my-posh安装激活…

「Mac畅玩鸿蒙与硬件17」鸿蒙UI组件篇7 - Animation 组件基础

在应用开发中&#xff0c;动画效果可以增强用户体验。鸿蒙框架提供了 translate、scale 和 rotate 等动画功能&#xff0c;允许对组件进行平移、缩放和旋转等操作。本篇将介绍 Animation 组件的基础知识和示例代码。 关键词 Animation 组件动画效果位置动画自动动画缩放动画 一…

编写第一个 Appium 测试脚本:从安装到运行!

前言 最近接到一个测试项目&#xff0c;简单描述一下&#xff0c;需求就是&#xff1a;一端发送指令&#xff0c;另一端接受指令并处理指令。大概看了看有上百条指令&#xff0c;点点点岂不是废了&#xff0c;而且后期迭代&#xff0c;每次都需要点点点&#xff0c;想想就头大…

vue 使用docx-preview 预览替换文档内的特定变量

在开发合同管理中&#xff0c;需要使用到此功能&#xff0c;就是替换合同模板内的一些字符串&#xff0c;如&#xff1a;甲乙方名称&#xff0c;金额日期等&#xff0c;合同内容不变。效果如下&#xff1a; 使用docx-preview 好处是只预览不可编辑内容。 前端vue import { re…

部署istio应用未能产生Envoy sidecar代理

1. 问题描述及原因分析 在部署Prometheus、Grafana、Zipkin、Kiali监控度量Istio的第2.2章节&#xff0c;部署nginx应用&#xff0c;创建的pod并没有产生Envoy sidecar代理&#xff0c;仅有一个应用容器运行中 故在随后的prometheus中也没有产生指标istio_requests_total。通…

搭建你的私人云盘:使用File Browser与cpolar实现公网传输文件

文章目录 前言1.下载安装File Browser2.启动访问File Browser3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 前言 File Browser是一个开源的文件管理器和文件共享工具&#xff0c;它可以帮助用户轻…

NRF52832学习笔记(41)——添加串口库libuarte

一、背景 由于板子上不支持硬件流控&#xff0c;在使用 app_uart_fifo 库接收串口大数据时&#xff0c;频繁报 APP_UART_COMMUNICATION_ERROR 错误&#xff0c;多次重新初始化后&#xff0c;串口也不再产生中断了。查看官方论坛后决定使用串口异步库 libuarte。 二、简介 Li…

嵌入式硬件工程师的职业发展规划

嵌入式硬件工程师可以按照以下阶段进行职业发展规划&#xff1a; 1. **初级阶段&#xff08;1-3 年&#xff09; ** - **技术学习与积累**&#xff1a; **电路基础强化**&#xff1a; 深入学习模拟电路和数字电路知识&#xff0c;能够熟练分析和设计基本的电路&#xff0c;…

2024.11.5- Redis(3)

五 Redis的发布订阅 5.1 介绍 Redis通过publish、subscribe和psubcribe、Unsubscribe和punsubscribe等命令实现发布、订阅和退订功能。这些命令被广泛用于构建即时通信应用&#xff0c;比如网络聊天室(chatroom)和实时广播、实时提醒等。 ​ 角色: -- 客户端通过PUBLISH命令向…

最全Kafka知识宝典之消费端深度剖析

一、Kafka消费者基本特性 消费者与消费者组的关系 消费者用一个消费者组名标记自己 一个发布在Topic上消息被分发给此消费者组中的一个消费者 假如所有的消费者都在一个组中&#xff0c;那么这就变成了队列模型&#xff0c;即这些消费者只有一个消费者会收到消息假如所有的…

MySQL之JDBC入门详解

01-JDBC入门 一、JDBC概念 jdbc : java database connection , java数据库连接 jdbc是sun公司定义的java程序访问数据库的规范。 二、JDBC操作需要6步 三、入门程序 1、使用eclipse打开一个新的工作空间 2、切换到java视图界面 3、创建java工程&#xff1a;01-jdbc-helloworl…

ctfshow——web(总结持续更新)

文章目录 1、基础知识部分2、php伪协议2.1 php://input协议2.2 data://text/plain协议 3、webshell连接工具3.1 蚁剑连接一句话木马 4、各个web中间件重要文件路径4.1 Nginx 5、sqlmap使用6、php特性6.1 md5加密漏洞6.2 php特殊符号 7、TOP 10漏洞7.1 SQL注入7.2 代码执行7.3 文…