「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现

自定义动画让开发者可以设计更加个性化和复杂的动画效果,适合表现独特的界面元素。鸿蒙提供了丰富的工具,支持通过自定义路径和时间控制来创建复杂的动画运动。本篇将带你学习如何通过自定义动画实现更多样化的效果。

在这里插入图片描述


关键词
  • 自定义动画
  • 动画路径
  • 贝塞尔曲线
  • 动画控制

一、Animation 组件的自定义路径

自定义路径动画使组件能够按照特定轨迹移动。贝塞尔曲线是创建复杂动画路径的常用方法。

1.1 贝塞尔曲线

贝塞尔曲线动画适合需要平滑、自然的路径效果,可以通过调整控制点来改变曲线路径。以下代码演示了组件沿自定义贝塞尔曲线运动。

@Entry
@Component
export struct BezierPathAnimation {
  @State private x: number = 0; // x 轴初始位置
  @State private y: number = 0; // y 轴初始位置

  build() {
    Column() {
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .translate({ x: this.x, y: this.y }) // 应用自定义路径的移动
        .transition({ opacity: 0.8 }) // 设置透明度过渡效果
        .margin(50)

      Button('启动贝塞尔曲线动画') // 按钮触发贝塞尔路径动画
        .onClick(() => this.startBezierAnimation())
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center);
  }

  // 实现贝塞尔曲线动画
  startBezierAnimation() {
    let t = 0;
    const interval = setInterval(() => {
      t += 0.02; // 递增参数t,用于控制贝塞尔曲线进度

      // 贝塞尔曲线公式
      this.x = (1 - t) * (1 - t) * 0 + 2 * (1 - t) * t * 150 + t * t * 300;
      this.y = (1 - t) * (1 - t) * 0 + 2 * (1 - t) * t * 200 + t * t * 0;

      if (t >= 1) clearInterval(interval); // 动画结束时停止
    }, 50); // 每50ms更新一次位置
  }
}

效果示例:点击“启动贝塞尔曲线动画”按钮后,图片会按照贝塞尔曲线轨迹移动,形成柔和的弧形路径。

在这里插入图片描述


二、基于时间的动画控制

时间控制可用来设置动画播放的速度或暂停点。通过 setTimeoutclearInterval 等控制函数,可以实现精确的动画定时。

2.1 自动启动和暂停动画

以下示例展示了如何通过按钮启动或暂停自动位移动画。

@Entry
@Component
export struct TimedControlAnimation {
  @State private x: number = 0; // x 轴位置
  @State private isAnimating: boolean = false; // 控制动画状态
  private intervalId: number | null = null; // 存储动画的定时器 ID

  build() {
    Column() {
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .translate({ x: this.x }) // 应用自动位移动画
        .transition({ opacity: 0.7 }) // 设置透明度过渡效果
        .margin(50)

      Button(this.isAnimating ? '暂停' : '启动') // 切换启动和暂停按钮
        .onClick(() => this.toggleAnimation())
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center);
  }

  // 启动或暂停动画
  toggleAnimation() {
    if (this.isAnimating) {
      clearInterval(this.intervalId); // 暂停动画
      this.intervalId = null;
    } else {
      this.intervalId = setInterval(() => {
        this.x = this.x === 0 ? 200 : 0; // 在 0 和 200 之间切换位置
      }, 1000); // 每1秒切换位置,实现自动平移
    }
    this.isAnimating = !this.isAnimating; // 更新动画状态
  }
}

效果示例:点击“启动”按钮后,图片将左右自动移动;点击“暂停”按钮,动画将停止。

在这里插入图片描述


三、复杂组合动画

将多个动画效果组合可以实现丰富的视觉效果。以下代码展示旋转、缩放与路径运动的组合动画。

3.1 旋转、缩放与路径运动
@Entry
@Component
export struct ComplexCombinationAnimation {
  @State private x: number = 0; // x 轴位置
  @State private y: number = 0; // y 轴位置
  @State private rotation: number = 0; // 旋转角度
  @State private scale1: number = 1; // 缩放比例

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

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

  // 实现旋转、缩放和路径运动的组合动画
  startComplexAnimation() {
    let t = 0;
    const interval = setInterval(() => {
      t += 0.02;

      // 贝塞尔曲线路径
      this.x = (1 - t) * (1 - t) * 0 + 2 * (1 - t) * t * 150 + t * t * 300;
      this.y = (1 - t) * (1 - t) * 0 + 2 * (1 - t) * t * 200 + t * t * 0;

      // 旋转和缩放
      this.rotation += 5; // 累加旋转角度
      this.scale1 = this.scale1 === 1 ? 1.3 : 1; // 在 1 和 1.3 之间缩放

      // 动画结束条件
      if (t >= 1) clearInterval(interval);
    }, 100); // 每100ms更新一次
  }
}

效果示例:点击“启动组合动画”按钮后,图片会沿贝塞尔曲线移动,并自动旋转和缩放。

在这里插入图片描述


四、自定义缓动函数

缓动函数让动画更具表现力。下面是自定义的弹性缓动函数示例,使图片在缩放时带有弹跳效果。

4.1 弹性缩放动画
@Entry
@Component
export struct CustomEaseAnimation {
  @State private scale1: number = 1; // 缩放比例

  build() {
    Column() {
      Image($r('app.media.cat'))
        .width(305)
        .height(360)
        .scale({ x: this.scale1, y: this.scale1 }) // 应用弹性缩放
        .transition({ opacity: 0.7 }) // 设置透明度过渡效果
        .margin(50)

      Button('启动弹性缩放') // 按钮触发弹性缩放动画
        .onClick(() => this.startElasticScaleAnimation())
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center);
  }

  // 实现弹性缩放动画的函数
  startElasticScaleAnimation() {
    let t = 0;
    const interval = setInterval(() => {
      t += 0.05;
      this.scale1 = 1 + Math.sin(t * Math.PI * 4) * Math.exp(-t * 4); // 弹性缓动公式

      // 当 t 超过某值时停止动画
      if (t >= 1) {
        clearInterval(interval);
        this.scale1 = 1; // 恢复缩放比例
      }
    }, 50); // 每 50ms 更新一次缩放比例
  }
}

效果示例:点击“启动弹性缩放”按钮后,图片将缩放并带有弹性效果。
在这里插入图片描述


小结

本篇介绍了鸿蒙中如何实现自定义动画,包括贝塞尔曲线路径、时间控制、多重组合和自定义缓动函数。通过这些技巧,开发者可以设计出更具个性化和表现力的动画效果,提升应用的用户体验。


下一篇预告

在下一篇中,将介绍如何使用 Canvas 组件实现自定义绘图,为鸿蒙应用增添图形效果。


上一篇:「Mac畅玩鸿蒙与硬件18」鸿蒙UI组件篇8 - 高级动画效果与缓动控制
下一篇:「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas 组件自定义绘图

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

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

相关文章

FLUX 推出 Ultra 和 Raw 模式,仅10秒生成2K高清图!

大家好,我是渔夫。 就在 2024年11月6日,BlackForestLabs 团队升级了他们最新的文生图模型 FLUX1.1 [pro]。 推出 Ultra 和 Raw 模式,仅10秒就能生成2K高清图片,速度非常惊人。 Ultra 模式:可生成超高分辨率图像&#x…

24/11/6 算法笔记 SVD

SVD,即奇异值分解(Singular Value Decomposition),是线性代数中一种重要的矩阵分解方法。 定义 对于任何给定的 mnmn 的实数矩阵 AA(其中 mm 是行数,nn 是列数),SVD分解可以表示为…

开发笔记 | 快速上手基于Dify等第三方大模型平台接口实现AI智能聊天

前置: 1.部署Dify,见官方教程及介绍https://docs.dify.ai/zh-hans,本文主要讲基于部署完之后的java实现的调用它的接口实现AI智能聊天,其他AI功能后续有用到再补充,没有就看缘分 2.什么是Dify?可以简单理解…

数据分析:转录组差异fgsea富集分析

文章目录 介绍加载R包数据链接导入数据数据预处理DE testing: 2BP vs no-BP比较limma-voomLoad steroid dataIn No-BP patientsIn 2BP patientsCompare gene expression vs bacterial mass其他系统信息介绍 转录组差异fgsea富集分析是一种基于基因集的富集分析方法,它关注的是…

查看网路信息-ifconfig命令

1.ifconfig缺点: 可以查看接口的网络类型;部分IP和掩码以及状态是否插线,看不到接口下的网关,DNS, 要想看到接口下多个IP,使用 ip addr show 命令 要想看网关,使用 ip route show 命令、route -n 命令 显示路由表内…

基于Spring Boot的中小型制造企业质量管理系统设计与实现,LW+源码+讲解

摘 要 信息数据从传统到当代,是一直在变革当中,突如其来的互联网让传统的信息管理看到了革命性的曙光,因为传统信息管理从时效性,还是安全性,还是可操作性等各个方面来讲,遇到了互联网时代才发现能补上自…

Java:多态的调用

1.什么是多态 允许不同类的对象对同一消息做不同的响应。即同一消息可以根据发送对象的不同而采用多种不同的行为方式。(发送消息就是函数调用)。多态使用了一种动态绑定(dynamic binding)技术,指在执行期间判断所引用…

并查集算法详解

文章目录 并查集概念并查集的常见操作构建并查集合并并查集和查找 关于find函数 并查集概念 并查集(Union-Find)是一种树型的数据结构,用于处理一些不交集的合并及查询问题。其主要应用是判断两个元素是否在同一个集合中,以及合并…

Redis持久化机制——针对实习面试

目录 Redis持久化机制Redis为什么要有持久化机制?Redis持久化方式有哪些?AOF持久化工作原理是什么?有什么优缺点?AOF持久化工作原理AOF的优点AOF的缺点 RDB持久化工作原理是什么?有什么优缺点?RDB持久化工作…

【系统架构设计师(第2版)】七、系统架构设计基础知识

有效的软件体系结构及其明确的描述和设计,已成为软件工程领域中重要的主题。 *注:由于历史原因,研究者和工程人员对**Software Architecture(简称SA)*的翻译不尽相同,本文中软件“体系结构”和“架构”具有…

【NLP】使用 SpaCy、ollama 创建用于命名实体识别的合成数据集

命名实体识别 (NER) 是自然语言处理 (NLP) 中的一项重要任务,用于自动识别和分类文本中的实体,例如人物、位置、组织等。尽管它很重要,但手动注释大型数据集以进行 NER 既耗时又费钱。受本文 ( https://huggingface.co/blog/synthetic-data-s…

Google推出了AI驱动的学习工具“Learn About”

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

Vue3中使用LogicFlow实现简单流程图

实现结果 实现功能&#xff1a; 拖拽创建节点自定义节点/边自定义快捷键人员选择弹窗右侧动态配置组件配置项获取/回显必填项验证 自定义节点与拖拽创建节点 拖拽节点面板node-panel.vue <template><div class"node-panel"><divv-for"(item, k…

本地部署运行 HuggingFace Diffuser 大模型

最近需要篡改大模型验证篡改定位水印的泛化性&#xff0c;但是由于网络连接原因无法直接使用&#x1f917;s Diffusers library &#xff0c;在网上找到了以下本地部署的方法。 目录 下载模型&#xff0c;部署至服务器上 1&#xff09;huggingface官网下载 2&#xff09;gi…

Bert框架详解(下)

一、Bert模型网络结构 1、Add与Normalize Add&#xff1a;将前面的数据传到后面层&#xff0c;残差网络同理。 Normalize &#xff1a;归一化&#xff0c;与batch normalize同理。 2、outputs(shifted right) outputs&#xff08;shifted right&#xff09;&#xff1a;指在…

操作系统学习笔记-3.2虚拟内存

文章目录 虚拟内存请求分页管理方式页面置换算法最佳置换算法工作原理OPT 算法的示例最佳置换算法的优点和缺点 先进先出置换算法最近最久未使用时钟置换算法时钟置换算法的工作原理&#xff1a;算法的步骤&#xff1a; 改进型时钟置换算法改进型时钟置换算法的特点&#xff1a…

【数学】通用三阶矩阵特征向量的快速求法 超简单!!!

目录 三个定理1、3个特征值&#xff08;即根互不相等&#xff09;例题实践2、2个特征值&#xff08;即有一个双重根&#xff09;3、1个特征值&#xff08;即有一个三重根&#xff09;定理证明 三个定理 本定理适用于 所有三阶矩阵 的特征向量求法&#xff01; 1、3个特征值&…

16通道AD采集方案,基于复旦微ARM + FPGA国产SoC处理器平台

测试数据汇总 表 1 本文带来的是基于复旦微FMQL20S400M四核ARM Cortex-A7(PS端) + FPGA可编程逻辑资源(PL端)异构多核SoC处理器设计的全国产工业评估板的AD采集案例。本次案例演示的开发环境如下: Windows开发环境:Windows 7 64bit、Windows 10 64bit PL端开发环境:P…

文件系统和日志管理

文件系统和日志管理 文件系统&#xff1a;文件系统提供了一个接口&#xff0c;用户用来访问硬件设备&#xff08;硬盘、光驱&#xff09;------------- 在硬件设备上对文件的管理 1、文件存储在硬盘上&#xff08;机械硬盘&#xff1a;一个扇区 2、文件中硬盘上的最小存储单位…

数据结构---排序总结

1.排序的时间复杂度&#xff08;均为平均值&#xff09; O(n^2) &#xff1a;冒泡排序&#xff0c;选择排序&#xff0c;插入排序。 O(n * log(n))&#xff1a;堆排序&#xff0c;快速排序&#xff0c;归并排序。 O(n^1.3)&#xff1a;希尔排序 2.空间复杂度&#xff1a; O(n) …