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

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

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

20241031_211130.gif


关键词
  • 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 轴上来回移动。

20241031_210908.gif


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 倍之间切换。

20241031_211004.gif


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 度。

20241031_211049.gif


三、组合自动动画示例

可以通过同时控制 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 - 高级动画效果与缓动控制


作者:SoraLuna
链接:https://www.nutpi.net/thread?topicId=234
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


目录
相关文章
|
15天前
「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用
本篇教程将介绍如何创建一个模拟记账应用,通过账单输入、动态列表展示和实时统计功能,学习接口定义和组件间的数据交互。
133 68
|
14天前
|
UED
「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统
本篇教程将实现一个模拟火车票查询系统,通过输入条件筛选车次信息,并展示动态筛选结果,学习事件处理、状态管理和界面展示的综合开发技巧。
51 13
|
13天前
「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提醒小应用
本篇教程将实现一个打卡提醒小应用,通过用户输入时间进行提醒设置,并展示实时提醒状态,实现提醒设置和取消等功能。
46 10
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
413 0
【鸿蒙 HarmonyOS】UI 组件 ( 拖动条 Slider 组件 )
|
XML Java 数据格式
HarmonyOS学习路之开发篇—Java UI框架(自定义组件与布局 二)
自定义布局 当Java UI框架提供的布局无法满足需求时,可以创建自定义布局,根据需求自定义布局规则
|
XML 前端开发 Java
HarmonyOS学习路之开发篇—Java UI框架(自定义组件与布局 一)
HarmonyOS提供了一套复杂且强大的Java UI框架,其中Component提供内容显示,是界面中所有组件的基类。ComponentContainer作为容器容纳Component或ComponentContainer对象,并对它们进行布局。
|
XML JavaScript 前端开发
HarmonyOS学习路之开发篇—Java UI框架(基础组件说明【三】)
接上一篇文章… 上两篇文章已经介绍了大部分的Java UI组件 ,因为时间关系把一个内容分为了三个部分,这是最后一篇组件的介绍。分别介绍ListContainer、ScrollView和WebView。
|
XML Java 数据格式
HarmonyOS学习路之开发篇—Java UI框架(基础组件说明【二】)
二、分类说明 ④Picker Picker提供了滑动选择器,允许用户从预定义范围中进行选择。 Picker的自有XML属性见下表:
|
XML Java Android开发
HarmonyOS学习路之开发篇—— Java UI框架(基础组件说明【一】)
HarmonyOS的常用组件一般在resources/base/layout下的xml文件中声明,然后在AbilitySlice中通过super.setUIContent(ResourceTable.某layout布局的文件名)来加载布局。在AbilitySlice中通过super.findComponentById(ResourceTable.组件的id)获取组件,获取成功后就可以对该组件进行操作,如添加监听,设置内容等。当然也可以通过代码动态的使用控件。
|
XML Java 数据格式
HarmonyOS学习路之开发篇—— Java UI框架(组件与布局说明)
UI即使用在屏幕上显示的用户界面,该界面用来显示所有可能被用户查看和操作的内容。