鸿蒙HarmonyOS实战-ArkUI动画(放大缩小视图)

harmonyos,arkui · 浏览次数 : 4

小编点评

**文章简介** 文章介绍了如何使用动画效果实现视图的放大缩小功能,包括交换元素转场和静态元素转场两种方法。 **交换元素转场** * 在两个页面中配置相同id的组件作为共享元素。 * 当用户从起始页跳转到目标页时,共享元素会从起始页的位置、大小过渡到目标页的位置、大小。 * 这种方法适用于两个页面之间相同元素的衔接,会从起始页共享元素的位置和大小过渡到目标页的共享元素的位置和大小。 **静态元素转场** * 只在一个页面中存在一个Static类型的共享元素。 * 当跳转到目标页时,配置了Static类型sharedTransition的组件会显示透明度从0渐变到设定的透明度的动画效果,而位置保持不变。 * 当起始页消失时,该组件将逐渐变为0的透明度,位置仍保持不变。 **动画效果** * 通过在代码中编写自定义的动画效果,可以实现视图的放大缩小功能。 * 可以使用属性动画或帧动画来实现视图的动态缩放效果。

正文

🚀前言

在HarmonyOS中,可以通过以下方法放大缩小视图:

  1. 使用缩放手势:可以使用双指捏合手势来放大缩小视图。将两个手指放在屏幕上,并向内或向外移动手指,即可进行放大或缩小操作。

  2. 使用系统提供的缩放控件:在HarmonyOS的开发中,可以使用系统提供的缩放控件来实现视图的放大缩小功能。通过在布局文件中添加缩放控件,并设置合适的属性,即可实现视图的放大缩小效果。

  3. 使用自定义动画效果:通过在代码中编写自定义的动画效果,可以实现视图的放大缩小功能。可以使用属性动画或帧动画来实现视图的动态缩放效果。

本文主要讲解的是动画效果实现的放大缩小视图

🚀一、放大缩小视图

共享元素转场是一种页面之间过渡效果的设计,通过在不同页面之间共享相同的元素来实现平滑的过渡动画。在共享元素转场中,通过在两个页面中配置相同id的组件作为共享元素,实现元素的位置、大小等属性的过渡。当用户从起始页跳转到目标页时,共享元素会从起始页的位置、大小过渡到目标页的位置、大小,从而创建一种衔接的动画效果。共享元素转场可以提升用户体验,使页面之间的切换更加流畅和自然。

🔎1.Exchange类型的共享元素转场

对于交换型的共享元素转场,需要在两个页面中存在通过sharedTransition函数配置为相同id的组件,这些组件被称为共享元素。这种类型的共享元素转场适用于两个页面之间相同元素的衔接,会从起始页共享元素的位置和大小过渡到目标页的共享元素的位置和大小。如果没有指定类型,默认为交换类型的共享元素转场,这也是最常见的共享元素转场方式。当使用交换类型的共享元素转场时,共享元素转场的动画参数由目标页中的options动画参数决定。

🔎2.Static类型的共享元素转场

静态型的共享元素转场通常适用于页面跳转时,标题逐渐出现或隐藏的场景。在这种转场中,只需要在一个页面中存在一个Static类型的共享元素,不能在两个页面中同时存在相同id的Static类型共享元素。当跳转到目标页时,配置了Static类型sharedTransition的组件会显示透明度从0渐变到设定的透明度的动画效果,而位置保持不变。当起始页消失时,该组件将逐渐变为0的透明度,位置仍保持不变。这样的转场效果能够呈现出标题逐渐显示或隐藏的效果。

更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY

🔎3.场景示例

主页

// src page
import router from '@ohos.router';

@Entry
@Component
struct SharedTransitionSrc {
  build() {
    Column() {
      // 配置Exchange类型的共享元素转场,共享元素id为"sharedImage1"
      Image($r('app.media.img_2')).width(50).height(50)
        .sharedTransition('sharedImage1', { duration: 1000, curve: Curve.Linear })
        .onClick(() => {
          // 点击小图时路由跳转至下一页面
          router.pushUrl({ url: 'pages/myTest/sharedTransitionDst' });
        })
    }
    .padding(10)
    .width("100%")
    .alignItems(HorizontalAlign.Start)
  }
}

子页

// dest page
import router from '@ohos.router';
@Entry
@Component
struct SharedTransitionDest {
  build() {
    Column() {
      // 配置Static类型的共享元素转场
      Text("SharedTransition dest page")
        .fontSize(16)
        .sharedTransition('text', { duration: 500, curve: Curve.Linear, type: SharedTransitionEffectType.Static })
        .margin({ top: 10 })

      // 配置Exchange类型的共享元素转场,共享元素id为"sharedImage1"
      Image($r('app.media.img_2'))
        .width(150)
        .height(150)
        .sharedTransition('sharedImage1', { duration: 500, curve: Curve.Linear })
        .onClick(() => {
          // 点击图片时路由返回至上一页面
          router.back();
        })
    }
    .width("100%")
    .alignItems(HorizontalAlign.Center)
  }
}

image

第一个页面(src page)和第二个页面(dest page)都配置了id为"sharedImage1"的共享元素转场,以便两个页面都能匹配到这一组共享元素。当从第一个页面跳转到第二个页面时,第一个页面为起始页,第二个页面为目标页。配置了id为"sharedImage1"的组件按照目标页中的500ms时长进行共享元素转场,从而实现放大视图的效果;而id为"text"的组件则按照配置的Static类型sharedTransition参数中的500ms时长进行共享元素转场,使标题逐渐出现。

当从第二个页面返回到第一个页面时,第二个页面为起始页,第一个页面为目标页。配置了id为"sharedImage1"的组件按照目标页中的1000ms时长进行共享元素转场,使其缩小至原始视图;同时,id为"text"的组件按照配置的Static类型sharedTransition参数中的500ms时长进行共享元素转场,使标题逐渐隐藏。

🚀写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
  • 更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY

image

与鸿蒙HarmonyOS实战-ArkUI动画(放大缩小视图)相似的内容:

鸿蒙HarmonyOS实战-ArkUI动画(放大缩小视图)

前言 在HarmonyOS中,可以通过以下方法放大缩小视图: 使用缩放手势:可以使用双指捏合手势来放大缩小视图。将两个手指放在屏幕上,并向内或向外移动手指,即可进行放大或缩小操作。 使用系统提供的缩放控件:在HarmonyOS的开发中,可以使用系统提供的缩放控件来实现视图的放大缩小功能。通过在布

鸿蒙HarmonyOS实战-ArkUI动画(页面转场动画)

前言 页面转场动画是指在应用程序中,当用户导航到另一个页面时,使用动画效果来过渡页面之间的切换。这样做的目的是为了提升用户体验,使页面之间的切换更加平滑和有趣。 常见的页面转场动画包括淡入淡出、滑动、翻转、缩放等效果。通过使用这些动画效果,可以给用户一种流畅的感觉,让页面之间的切换更加自然。 在

鸿蒙HarmonyOS实战-ArkUI组件(Canvas)

一、Canvas Canvas组件是一种图形渲染组件,它提供了一个画布(canvas),开发者可以在上面绘制各种图形、文本等。Canvas组件通常用于创建游戏、数据可视化等需要动态绘制图形的应用程序。 Canvas组件提供了多个API,开发者可以使用这些API进行绘制操作。常用的API包括绘制矩

鸿蒙HarmonyOS实战-ArkUI事件(组合手势)

一、组合手势 应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作,用于实现不同的功能和操作。 HarmonyOS中常见的手势操作及其功能: 组合手势是由多个手势组合而成的手势动作。通过不同手势的组合,可以完成更复杂的操作。例如,

鸿蒙HarmonyOS实战-ArkUI事件(组合手势)

一、组合手势 应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作,用于实现不同的功能和操作。 HarmonyOS中常见的手势操作及其功能: 组合手势是由多个手势组合而成的手势动作。通过不同手势的组合,可以完成更复杂的操作。例如,

鸿蒙HarmonyOS实战-ArkUI事件(单一手势)

一、单一手势 应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作,用于实现不同的功能和操作。 HarmonyOS中常见的手势操作及其功能: 1.点击手势(TapGesture) 点击手势(TapGesture)是指用户在触摸

鸿蒙HarmonyOS实战-ArkUI事件(手势方法)

一、手势方法 应用程序的手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作,用于实现不同的功能和操作。 HarmonyOS中常见的手势操作及其功能: 1.gesture(常规手势绑定方法) 接口说明: .gesture(gesture

鸿蒙HarmonyOS实战-ArkUI事件(焦点事件)

前言 焦点事件是指程序中的重要事件或关键点。焦点事件通常是程序的核心逻辑和功能,需要引起特殊的关注和处理。 在图形用户界面(GUI)编程中,焦点事件通常与用户交互和界面输入相关。例如,当用户点击按钮、输入文本或选择菜单项时,这些操作会触发相应的焦点事件。程序需要捕获这些焦点事件并进行处理,以执行

鸿蒙HarmonyOS实战-ArkUI事件(键鼠事件)

前言 键鼠事件是指在计算机操作中,用户通过键盘和鼠标来与计算机进行交互的行为。常见的键鼠事件包括按下键盘上的键、移动鼠标、点击鼠标左键或右键等等。键鼠事件可以触发许多不同的操作,比如在文本编辑器中输入文字、在游戏中移动角色、在网页上点击链接等等。计算机操作系统和应用程序可以通过监听键鼠事件来响应

鸿蒙HarmonyOS实战-ArkUI事件(触屏事件)

前言 触屏事件是指通过触摸屏幕来进行操作和交互的事件。常见的触屏事件包括点击(tap)、双击(double tap)、长按(long press)、滑动(swipe)、拖动(drag)等。触屏事件通常用于移动设备和平板电脑等具有触摸屏幕的设备上,用户可以通过触摸屏幕上的不同区域或者以不同的方式进