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

在应用开发中,动画效果可以增强用户体验。鸿蒙框架提供了 translatescalerotate 等动画功能,允许对组件进行平移、缩放和旋转等操作。本篇将介绍 Animation 组件的基础知识和示例代码。

在这里插入图片描述


关键词
  • Animation 组件
  • 动画效果
  • 位置动画
  • 自动动画
  • 缩放动画

一、Animation 组件概述

鸿蒙的 Animation 组件支持多种动画效果,如平移、缩放和旋转。通过动态控制这些属性的变化,可以实现组件在界面中的流畅动画效果。以下实例演示这些基础动画的实现。


二、创建简单动画
2.1 自动位移动画

通过 translate 属性实现组件的自动平移效果,可以控制 xy 轴的偏移量,使组件自动左右或上下移动。定时器可用于定期触发动画。

@Entry
@Component
export struct AutoTranslateAnimation {
  @State private x: number = 0

  build() {
    Column() {
      // 图片组件,应用平移动画
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .translate({ x: this.x }) // 根据 x 状态变量实现水平平移
        .transition({ opacity: 0.5 }) // 设置透明度过渡效果

      Button('开始自动移动')
        .onClick(() => this.startAutoMove()) // 按钮开始自动动画
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }

  // 定义自动平移函数
  startAutoMove() {
    setInterval(() => {
      this.x = this.x === 0 ? 200 : 0; // 切换位置
    }, 1000); // 每1秒切换位置,实现自动平移
  }
}

效果示例:点击“开始自动移动”按钮后,图片每隔 1 秒在 x 轴上来回移动。

在这里插入图片描述


2.2 自动缩放动画

通过 scale 属性设置组件的自动缩放比例,控制 xy 轴的比例可以实现放大或缩小效果。

@Entry
@Component
export struct AutoScaleAnimation {
  @State private scale1: number = 1

  build() {
    Column() {
      // 图片组件,应用缩放动画
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .scale({ x: this.scale1, y: this.scale1 }) // 根据 scale1 实现缩放效果
        .transition({ opacity: 0.8 }) // 设置透明度过渡效果
        .margin(50)

      Button('开始自动缩放')
        .onClick(() => this.startAutoScale()) // 按钮开始自动缩放动画
    }
    .width('100%')
    .height('100%')
  }

  // 定义自动缩放函数
  startAutoScale() {
    setInterval(() => {
      this.scale1 = this.scale1 === 1 ? 1.5 : 1; // 切换缩放比例
    }, 1000); // 每1秒切换缩放,实现自动缩放
  }
}

效果示例:点击“开始自动缩放”按钮后,图片每隔 1 秒在 1 倍和 1.5 倍之间切换。

在这里插入图片描述


2.3 自动旋转动画

通过 rotate 属性控制组件的旋转角度,结合定时器可以实现自动旋转效果。

@Entry
@Component
export struct AutoRotateAnimation {
  @State private rotation: number = 0

  build() {
    Column() {
      // 图片组件,应用旋转动画
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .rotate({ angle: this.rotation }) // 根据 rotation 实现旋转效果
        .transition({ opacity: 0.8 }) // 设置透明度过渡效果
        .margin(50)

      Button('开始自动旋转')
        .onClick(() => this.startAutoRotate()) // 按钮开始自动旋转动画
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }

  // 定义自动旋转函数
  startAutoRotate() {
    setInterval(() => {
      this.rotation += 45; // 每次增加45度实现旋转
    }, 1000); // 每1秒旋转一次
  }
}

效果示例:点击“开始自动旋转”按钮后,图片每隔 1 秒顺时针旋转 45 度。

在这里插入图片描述


三、组合自动动画示例

可以通过同时控制 translatescalerotate 属性,实现多个动画效果的自动组合,创建更复杂的视觉效果。

@Entry
@Component
export struct AutoCombinedAnimationComponent {
  @State private x: number = 0
  @State private scale1: number = 1
  @State private rotation: number = 0

  build() {
    Column() {
      // 图片组件,应用组合动画效果
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .translate({ x: this.x }) // 平移
        .scale({ x: this.scale1, y: this.scale1 }) // 缩放
        .rotate({ angle: this.rotation }) // 旋转
        .transition({ opacity: 0.8 }) // 设置透明度过渡效果
        .margin(50)

      Button('开始自动组合动画')
        .onClick(() => this.startAutoCombinedAnimation()) // 按钮触发自动组合动画
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }

  // 定义自动组合动画函数
  startAutoCombinedAnimation() {
    setInterval(() => {
      this.x = this.x === 0 ? 50 : 0; // 切换位置
      this.scale1 = this.scale1 === 1 ? 1.5 : 1; // 切换缩放比例
      this.rotation += 45; // 每次增加旋转角度
    }, 1000); // 每1秒切换动画效果
  }
}

效果示例:点击“开始自动组合动画”按钮后,图片将每隔 1 秒自动产生平移、缩放和旋转的组合动画效果。
在这里插入图片描述


小结

本篇介绍了鸿蒙 Animation 组件的基础用法,并通过多个实例展示了 translatescalerotate 等动画效果的实现。通过合理运用这些基础动画,可以轻松创建自动化的动画效果,让界面更加生动有趣。


下一篇预告

下一篇将深入探讨高级动画效果和缓动控制,学习如何创建更自然的动画效果,进一步提升界面表现力。


上一篇: 「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List 和 Grid 组件展示数据列表
下一篇: 「Mac畅玩鸿蒙与硬件18」鸿蒙UI组件篇8 - 高级动画效果与缓动控制

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

详解:模板设计模式

模板设计模式(Template Pattern)是一种行为设计模式,在软件设计中有着广泛的应用,旨在提高代码的可维护性和可复用性。 一、定义与特点 定义: 模板设计模式定义了一个算法的骨架,将某些步骤推迟到子类中实…

Java中的时区和带时区的时间对象:ZoneId类、ZonedDateTime类

在 Java 中,ZoneId 和 ZonedDateTime 是处理时区和带时区日期时间的重要类,它们属于 java.time 包,这个包是在 Java 8 中引入的,用于替代旧的日期和时间 API(java.util.Date、java.util.Calendar 等)。 1、…

微积分复习笔记 Calculus Volume 1 - 4.5 Derivatives and the Shape of a Graph

4.5 Derivatives and the Shape of a Graph - Calculus Volume 1 | OpenStax

Windows配置Nodejs及nmp简明教程(2024可用)

一、下载及安装Nodejs 下载 Node.js 中文网 (nodejs.com.cn)在此下载windows长期维护版本的.msi安装包,64位 安装: 双节安装包一直点击Next下一步,注意安装路径选择C盘默认路径(C:\Program Files\nodejs\)即可&#x…

MATLAB实现蝙蝠算法(BA)

MATLAB实现蝙蝠算法(BA) 1.算法介绍 蝙蝠算法(简称BA)是一种受微型蝙蝠回声定位机制启发的群体智能算法,由Xin-She Yang于2010年提出。这种算法模拟了微型蝙蝠通过向周围环境发出声音并监听回声来识别猎物、避开障碍物以及追踪巢穴的行为。…

JavaStream流

认识 在java.util.stream util包下的新增API,可以用于操作集合或者数组的数据。 功能强大(提供了很多结合Lambda的API),性能高效(有很多优化),代码简洁(Lambda),可读性好…

【LwIP源码学习4】主线程tcpip_thread

前言 本文对lwip的主要线程tcpip_thread进行分析。 正文 tcpip_thread是lwip最主要的线程,其创建在tcpip_init函数中 sys_thread_new(TCPIP_THREAD_NAME, tcpip_thread, NULL, TCPIP_THREAD_STACKSIZE, TCPIP_THREAD_PRIO);tcpip_init函数被TCPIP_Init函数调用。…

HarmonyOS鸿蒙开发入门,常用ArkUI组件学习(二)

书接上回,让我们继续来学习ArkUI的其他组件 目录,可以点击跳转到想要了解的组件详细内容 组件四:Button组件五:Slider组件六: Column & Row组件七:循环控制组件八: List 组件四:…

四、k8s快速入门之Kubernetes资源清单

kubernetes中的资源 ⭐️ k8s中所有的内容都抽象为资源,资源实列化之后,叫做对象 1️⃣名称空间级别 ⭐️ kubeadm在执行k8s的pod的时候会在kube-system这个名称空间下执行,所以说当你kubectl get pod 的时候是查看不到的查看的是默认的po…

【收藏版】产品经理工作全流程拆解:每一步都是成功的基石

在信息爆炸的今天,产品经理的角色愈加重要。市场分析、用户需求调研、竞品分析、市场定位、产品设计、开发测试……每一个环节都可能决定产品的成败。这篇文章将带你逐步解读从产品立项到上线运营的全流程,为你揭开产品经理的核心工作要点。无论你是新手…

11.1组会汇报-基于区块链的安全多方计算研究现状与展望

基础知识 *1.背书,这个词源来自银行票据业务,是指票据转让时,原持有人在票据背面加盖自己的印鉴,证明该票据真实有效、如果有问题就可以找原持有人。 区块链中的背书就好理解了。可以简单的理解为验证交易并声明此交易合法&…

客如云:大型业务报表的分区化改造提升性能|OceanBase 应用实践

一 概述 1 背景 在过去两到三年的时间里,客如云的KPOS产品在商户数量和订单量均实现了数倍的增长,充分展示了产品的市场吸引力和业务模式的成功。然而,随着更多的大型连锁商户的加入,客如云商家平台迎来了前所未有的挑战。特别是…

一:Linux学习笔记(第一阶段)-- 安装软件 vmware workstation 虚拟机软件 centos系统

目录 学习计划: 资源准备 虚拟机软件:就别自己找了 现在换网站了 下载比较费劲 Centos8: 阿里云镜像地址下载(下载比较版 但是有不同版本):centos安装包下载_开源镜像站-阿里云 百度网盘地址&#xff…

git 删除远程不存在本地命令却能看到的分支

要删除远程不存在但本地却能看到的分支&#xff0c;你可以按照以下步骤操作&#xff1a; 删除本地分支&#xff1a; 如果你确定要删除的分支已经没有用处&#xff0c;可以使用以下命令来删除本地分支&#xff1a; git branch -d <branch-name>这里的 <branch-name>…

为数据集而生的 SQL 控制台

随着数据集的使用量急剧增加&#xff0c;Hugging Face 社区已经变成了众多数据集默认存放的仓库。每月&#xff0c;海量数据集被上传到社区&#xff0c;这些数据集亟需有效的查询、过滤和发现。 Dataset Monthly Creations 每个月在 Hugging Face Hub 创建的数据集 我们现在非常…

城市道路智慧照明服务认证介绍

城市道路智慧照明服务认证介绍 一 认证依据标准 城市道路智慧照明服务认证主要依据《城市道路智慧照明服务评价技术规范》标准&#xff0c;对城市道路照明服务提供商在智慧照明领域的服务质量、技术能力、管理水平等方面&#xff0c;进行综合评估和认证。 二 认证范围 城市道路…

云原生开源开发者沙龙丨AI 应用工程化专场杭州站邀您参会

云原生开源开发者沙龙 AI 原生应用架构专场&#xff0c;邀您一起交流&#xff0c;探索 AI 原生应用的工程化落地&#xff01; 活动简介 AI 驱动的应用程序开发、部署和运维&#xff0c;给应用带来了新的生命力和想象空间。但大部分开发者对 AI 应用的编程框架、可观测体系、网…

Selenium的下载及chrome环境搭建

Selenium的下载及环境的搭建 1.安装python环境 conda 安装python环境《略》2.在CMD在使用pip下载Selenium pip install selenium #pip安装3.下载webdriver 进入Selenium的下载界面&#xff1a;https://www.selenium.dev/downloads/ 下拉找到Browsers 4、驱动与浏览器 ht…

VBA中类的解读及应用第十七讲:类,让文本框在激活时改变颜色(下)

《VBA中类的解读及应用》教程【10165646】是我推出的第五套教程&#xff0c;目前已经是第一版修订了。这套教程定位于最高级&#xff0c;是学完初级&#xff0c;中级后的教程。 类&#xff0c;是非常抽象的&#xff0c;更具研究的价值。随着我们学习、应用VBA的深入&#xff0…

JavaCV 图像边缘检测 之 Sobel算子 算法

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…