「Mac畅玩鸿蒙与硬件18」鸿蒙UI组件篇8 - 高级动画效果与缓动控制

高级动画可以显著提升用户体验,为应用界面带来更流畅的视觉效果。本篇将深入介绍鸿蒙框架的高级动画,包括弹性动画、透明度渐变和旋转缩放组合动画等示例。

在这里插入图片描述


关键词
  • 高级动画
  • 弹性缓动
  • 自动动画
  • 缓动曲线

一、Animation 组件的高级缓动曲线

缓动曲线(Easing Curve)控制动画在不同阶段的速度变化,创造更自然的动画效果。鸿蒙提供了多种缓动类型,以下示例演示带有弹性效果的自动位移动画。


二、自动弹性动画

弹性动画模拟物理弹簧运动效果,以下代码展示带弹性缓动效果的左右自动位移动画。

2.1 弹性位移动画示例
@Entry
@Component
export struct ElasticAutoAnimation {@State private x: number = 0; // x 轴位置初始状态build() {Column() {// 图片组件,应用弹性缓动动画Image($r('app.media.cat')).width(305).height(360).translate({ x: this.x }) // 应用平移动画.transition({ opacity: 0.8 }) // 设置透明度过渡效果.margin(50)Button('启动弹性动画') // 按钮触发弹性动画.onClick(() => this.startElasticAnimation())}.width('100%').height('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center);}// 自动执行弹性动画的函数startElasticAnimation() {let step = 0;let amplitude = 200; // 初始弹跳幅度const interval = setInterval(() => {this.x = amplitude * Math.sin(step * Math.PI / 20); // 弹性公式实现位置更新amplitude *= 0.9; // 减小幅度step++;// 结束条件:当幅度足够小或完成足够多的步长时停止动画if (amplitude < 1) {clearInterval(interval);}}, 50); // 50ms的间隔}
}

效果示例:点击“启动弹性动画”按钮,图片会左右移动,幅度逐渐减小,形成弹性效果。

在这里插入图片描述


三、透明度渐入渐出动画

透明度的渐入渐出效果适用于页面切换或加载动画。动态调整 opacity1 属性可以实现柔和的淡入淡出效果。

3.1 自动透明度动画示例
@Entry
@Component
export struct AutoFadeAnimation {@State private opacity1: number = 1; // 透明度初始状态build() {Column() {// 图片组件,应用透明度渐变动画Image($r('app.media.cat')).width(305).height(360).opacity(this.opacity1) // 动态调整透明度.margin(50)Button('启动渐入渐出') // 按钮触发透明度动画.onClick(() => this.startFadeAnimation())}.width('100%').height('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center);}// 自动执行渐入渐出动画的函数startFadeAnimation() {setInterval(() => {this.opacity1 = this.opacity1 === 1 ? 0.2 : 1; // 在透明与不透明之间切换}, 800); // 每 800ms 切换透明度}
}

效果示例:点击“启动渐入渐出”按钮后,图片会自动在透明和不透明状态之间变化。

在这里插入图片描述


四、旋转与缩放组合动画

旋转和缩放组合动画适用于强调或引导用户注意力。以下代码展示自动旋转与缩放的组合动画。

4.1 自动旋转与缩放组合动画
@Entry
@Component
export struct RotateScaleAnimation {@State private rotation: number = 0; // 旋转角度@State private scale1: number = 1; // 缩放比例build() {Column() {// 图片组件,应用旋转与缩放动画Image($r('app.media.cat')).width(305).height(360).rotate({ angle: this.rotation }) // 应用旋转.scale({ x: this.scale1, y: this.scale1 }) // 应用缩放.transition({ opacity: 0.7 }) // 设置透明度过渡.margin(50)Button('启动旋转缩放') // 按钮触发组合动画.onClick(() => this.startRotateScaleAnimation())}.width('100%').height('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center);}// 自动执行旋转与缩放动画的函数startRotateScaleAnimation() {setInterval(() => {this.rotation += 45; // 每次增加45度旋转this.scale1 = this.scale1 === 1 ? 1.5 : 1; // 缩放比例在 1 和 1.5 之间切换}, 1200); // 每 1.2 秒切换一次}
}

效果示例:点击“启动旋转缩放”按钮后,图片会自动旋转 45 度并在两种缩放比例间切换。

在这里插入图片描述


五、综合应用:弹性缩放与透明度渐变

以下示例展示了弹性缩放与透明度渐变的组合动画,使界面效果更加丰富。

5.1 弹性缩放与渐变动画
@Entry
@Component
export struct ElasticScaleFadeAnimation {@State private scale1: number = 1; // 缩放比例@State private opacity1: number = 1; // 透明度build() {Column() {// 图片组件,应用弹性缩放和透明度渐变Image($r('app.media.cat')).width(305).height(360).scale({ x: this.scale1, y: this.scale1 }) // 应用缩放.opacity(this.opacity1) // 应用透明度.transition({ opacity: 0.5 }) // 设置透明度过渡.margin(50)Button('启动弹性缩放与渐变') // 按钮触发组合动画.onClick(() => this.startElasticScaleFade())}.width('100%').height('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center);}// 自动执行弹性缩放与渐变的函数startElasticScaleFade() {let amplitude = 1.3;const interval = setInterval(() => {this.scale1 = amplitude; // 缩放弹性效果this.opacity1 = this.opacity1 === 1 ? 0.5 : 1; // 在两种透明度之间渐变amplitude = amplitude > 1 ? 1 : 1.3; // 缩放幅度的弹性切换// 若达到目标状态则清除动画if (Math.abs(amplitude - 1) < 0.1) {clearInterval(interval);}}, 1000);}
}

效果示例:点击“启动弹性缩放与渐变”按钮后,图片会进行弹性缩放,并在透明与不透明之间渐变显示。
在这里插入图片描述


小结

本篇介绍了鸿蒙 Animation 组件的高级动画控制,通过弹性效果、渐入渐出和旋转缩放的组合,帮助开发者创建更加生动的界面效果。掌握这些技巧后,可以根据需要灵活运用,设计出高品质的动画效果。


下一篇预告

在下一篇中,我们将深入介绍自定义动画路径,实现更复杂的动画运动方式。


上一篇:「Mac畅玩鸿蒙与硬件17」鸿蒙UI组件篇7 - Animation 组件基础
下一篇:「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot源码解析(二):启动流程之引导上下文DefaultBootstrapContext

SpringBoot源码系列文章 SpringBoot源码解析(一)&#xff1a;启动流程之SpringApplication构造方法 SpringBoot源码解析(二)&#xff1a;启动流程之引导上下文DefaultBootstrapContext 目录 前言一、入口二、DefaultBootstrapContext1、BootstrapRegistry接口2、BootstrapCon…

ELK之路第三步——日志收集筛选logstash和filebeat

logstash和filebeat&#xff08;偷懒版&#xff09; 前言logstash1.下载2.修改配置文件3.测试启动4.文件启动 filebeat1.下载2.配置3.启动 前言 上一篇&#xff0c;我们说到了可视化界面Kibana的安装&#xff0c;这一篇&#xff0c;会简单介绍logstash和filebeat的安装和配置。…

Python毕业设计选题:基于Hadoop的租房数据分析系统的设计与实现

开发语言&#xff1a;Python框架&#xff1a;flaskPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 系统首页 房屋信息详情 个人中心 管理员登录界面 管理员功能界面 用户管理界面 房屋信…

深度学习笔记之BERT(一)BERT的基本认识

深度学习笔记之BERT——BERT的基本认识 引言回顾&#xff1a;Transformer的策略回顾&#xff1a;Word2vec的策略和局限性 BERT \text{BERT} BERT的基本理念抽象的双向BERT的预训练策略 预训练与微调 引言 从本节开始&#xff0c;将介绍 BERT \text{BERT} BERT系列模型以及其常…

YOLOv8改进,YOLOv8引入ResCBAM注意力机制,二次创新C2f结构

摘要 腕部创伤甚至骨折在日常生活中经常发生,在儿童中,他们占骨折病例的很大比例。在进行手术之前,外科医生通常会要求患者先进行 X 光成像,并根据放射科医生的分析进行手术准备。随着神经网络的发展,“You Only Look Once”(YOLO)系列模型在骨折检测中的应用越来越广泛…

CSS--两列网页布局,三列布局和多行多列布局

两列网页布局 两列网页布局实验 先将一个未运用浮动效果的网页结构写出来 <style>header{/* 给页眉设置宽高和样式 */width:1000px;height: 40px;background-color: gray;border: 3px brown solid;margin-bottom: 5px;}article{width:1000px;height: 600px;background-c…

如何使用Web-Check和cpolar实现安全的远程网站监测与管理

文章目录 前言1.关于Web-Check2.功能特点3.安装Docker4.创建并启动Web-Check容器5.本地访问测试6.公网远程访问本地Web-Check7.内网穿透工具安装8.创建远程连接公网地址9.使用固定公网地址远程访问 前言 本期给大家分享一个网站检测工具Web-Check&#xff0c;能帮你全面了解网…

Webserver(2.6)信号

目录 信号的概念信号相关的函数killraiseabortalarm1s钟电脑能数多少个数&#xff1f; setitimer过3s以后&#xff0c;每隔2s定时一次 信号捕捉函数signalsigaction 信号集sigprocmask编写一个程序&#xff0c;把所有的常规信号未决状态打印到屏幕 sigchld信号 信号的概念 比如…

AprilTag在相机标定中的应用简介

1. AprilTag简介 相机标定用的标靶类型多样,常见的形式有棋盘格标靶和圆形标靶。今天要介绍的AprilTag比较特别,它是一种编码形式的标靶。其官网为AprilTag,它是一套视觉基准系统,包含标靶编解码方法(Tag生成)和检测算法(Tag检测),可用于AR、机器人、相机标定等领域。…

Qt报错QOCI driver not loaded且QOCI available的解决方法

参考 Linux Qt 6安装Oracle QOCI SQL Driver插件&#xff08;适用WSL&#xff09; 安装 QOCI 插件完成后运行 Qt 项目报错&#xff1a; qt.sql.qsqldatabase: QSqlDatabase: QOCI driver not loaded qt.sql.qsqldatabase: QSqlDatabase: available drivers: QMIMER QPSQL QODBC…

【MySQL】 穿透学习数据库理论与知识剖析

前言&#xff1a;本节内容讲述一些数据库的基本概念。 第一个部分就是数据库相关的概念&#xff0c; 比如什么是数据库&#xff0c; 如何理解mysqld以及mysql。第二部分理解数据库和表在系统层面的形式。 第三部分就是mysql的一些操作分类。 第四部分就是数据库的插件配置这些。…

Web Broker(Web服务应用程序)入门教程(1)

1、介绍 Web Broker 组件&#xff08;位于工具面板的“Internet”选项卡中&#xff09;可以帮助您创建与特定统一资源标识符&#xff08;URI&#xff09;相关联的事件处理程序。当处理完成后&#xff0c;您可以通过编程方式构建 HTML 或 XML 文档&#xff0c;并将它们传输给客…

网络安全法详细介绍——爬虫教程

目录 [TOC](目录)一、网络安全法详细介绍1. 网络安全法的主要条款与作用2. 网络安全法与爬虫的关系3. 合法使用爬虫的指南 二、爬虫的详细教程1. 准备环境与安装工具2. 使用requests库发送请求3. 解析HTML内容4. 使用robots.txt规范爬虫行为5. 设置请求间隔6. 数据清洗与存储 三…

25国考照片处理器使用流程图解❗

1、打开“国家公务员局”网站&#xff0c;进入2025公务员专题&#xff0c;找到考生考务入口 2、点击下载地址 3、这几个下载链接都可以 4、下载压缩包 5、解压后先看“使用说明”&#xff0c;再找到“照片处理工具”双击。 6、双击后会进入这样的界面&#xff0c;点击&…

Go 语言之搭建通用 Web 项目开发脚手架

Go 语言之搭建通用 Web 项目开发脚手架 MVC 模式 MVC 模式代表 Model-View-Controller&#xff08;模型-视图-控制器&#xff09; 模式。这种模式用于应用程序的分层开发。 Model&#xff08;模型&#xff09; - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑&…

江协科技STM32学习- P34 I2C通信外设

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

windows在两台机器上测试 MySQL 集群实现实时备份

在两台机器上测试 MySQL 集群实现实时备份的基本步骤&#xff1a; 一、环境准备 机器配置 确保两台机器&#xff08;假设为服务器 A 和服务器 B&#xff09;能够互相通信&#xff0c;例如它们在同一个局域网内&#xff0c;并且开放了 MySQL 通信所需的端口&#xff08;默认是 …

【MIT-OS6.S081笔记1】xv6环境搭建

最近开始做一个操作系统的神课MIT-OS6.S081&#xff0c;我做的是老版本的2020版本的&#xff0c;环境使用的是VirtualBox的Ubuntu系统&#xff0c;在这里记录一下学习的过程。首先需要搭建一下环境&#xff0c;参考官网Tools Used in 6.S081&#xff0c;这个知乎文章也写得很好…

深度学习基础—语言模型和序列生成

引言 深度学习基础—循环神经网络&#xff08;RNN&#xff09;https://blog.csdn.net/sniper_fandc/article/details/143417972?fromshareblogdetail&sharetypeblogdetail&sharerId143417972&sharereferPC&sharesourcesniper_fandc&sharefromfrom_link 上…

kdd比赛方案

解决方案概述 采用两阶段的方法来解决比赛任务。在第一阶段&#xff0c;采用与 SciBERT 集成的跨编码器模型来确定源论文是否是最重要的参考文献之一。在第二阶段&#xff0c;利用了从目标和源论文中得出的特征&#xff0c;以及第一阶段的输出&#xff0c;输入到几个二进制分类…