鸿蒙HarmonyOS实战-ArkUI动画（放大缩小视图）_鸿蒙实现图片放大缩小

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_84164469

535人浏览 · 2024-04-12 18:41:15

2401_84164469 · 2024-04-12 18:41:15 发布

一、放大缩小视图

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

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

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

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

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

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)
  }
}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数HarmonyOS鸿蒙开发工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。