提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

本次实验我选择学习使用动画这个选题，主要学习了鸿蒙 ArkUI 中的动画系统。通过动手实践，我实现了以下两种动画效果：
转场动画（transition）：通过 pageTransition() 方法，实现页面跳转时从左侧滑入滑出并带透明度变化的过渡效果。
属性动画（animation）：通过 .animation() 修饰器，实现组件属性（如缩放、颜色）在状态变化时自动做平滑过渡动画。
下面记录了我的学习过程和核心代码分析。

一、属性动画

这段代码实现的是一个简单的属性动画效果：页面上有一段文字"哈哈哈他信了"和一个按钮"点我有惊喜"。文字默认是看不见的，因为我把它设置成白色了，点击按钮后，文字会在 1 秒内慢慢放大到两倍，同时慢慢变成红色
关键 API 和参数说明：
@State：这是状态装饰器，标记 scaleValue 和 textColor 为组件的响应式状态变量。当它们的值改变时，UI 会自动更新。
.scale({ x: this.scaleValue, y: this.scaleValue })：设置文本的缩放比例，x 和 y 方向都跟着 scaleValue 的值变化。初始为 1.0（原始大小），点击按钮后变成 2.0（放大一倍）。
.fontColor(this.textColor)：设置文本颜色，跟着 textColor 状态变化。初始为 ‘white’，点击后变成 ‘red’。
.animation({ duration: 1000 })：这是属性动画的核心修饰器。它的作用是：当 .scale() 或 .fontColor() 绑定的状态值发生变化时，自动在新旧值之间做一个平滑过渡动画，duration: 1000 表示过渡耗时 1000 毫秒（1秒）。
.onClick(() => {
this.scaleValue = 2.0
this.textColor = ‘red’
})：
按钮点击事件。点击后把 scaleValue 改成 2.0、textColor 改成 ‘red’，因为这两个变量加了 @State，所以 UI 会自动更新，加上 .animation() 修饰器后就会-animate-出平滑过渡效果。

运行效果

点击之后文字会逐渐变大并且改变颜色

二、转场动画

1.第一页

1.build构建第一页

Column({ space: 24 })：创建一个纵向排列的布局容器，space: 24 表示里面的子组件（Text 和 Button）之间间隔 24 个像素。
Text(‘第一页’)：显示文字"第一页"，字号 28，加粗。
Button(‘跳转到第二页’)：创建一个按钮，文字是"跳转到第二页"。
.onClick(() => { … })：给按钮绑定点击事件。点击后执行里面的代码调用路由跳转到 pages/pagetwo2 页面。
this.getUIContext().getRouter().pushUrl({ url: ‘pages/pagetwo2’ })：利用鸿蒙的路由跳转 API。pushUrl 把新页面压入页面栈，原先的页面先留在栈底，这样我就可以实现两个页面来回跳转
.then() 和 .catch()：因为跳转是异步操作（可能需要加载资源），所以根据鸿蒙推荐的写法，用 Promise 来处理成功和失败两种情况。成功了就打印日志，失败了也打印错误信息方便调试。
2.pageTransition() 方法页面切换动画
PageTransitionEnter：定义新页面进入时的动画效果。
duration: 300：动画持续 300 毫秒（0.3 秒），速度适中，不会太快看不清也不会太慢让人着急。
curve: Curve.EaseOut：缓动曲线，意思是"先快后慢"。想象你开车踩油门起步很快，快到目的地时慢慢减速停住，就是这个感觉。
.translate({ x: ‘-30%’ })：位移动画。新页面初始位置在屏幕左侧外面 30% 的位置，然后动画过程中慢慢滑到正常位置（x=0），所以看起来就是从左边滑进来的效果。
.opacity(0.3)：透明度动画。新页面初始透明度是 0.3（比较透明，几乎看不清），动画过程中慢慢变成完全不透明（opacity=1），所以滑进来的同时还会慢慢变清晰。
PageTransitionExit：定义当前页面退出时的动画效果。
duration: 250：动画持续 250 毫秒（比进入稍快一点）。
curve: Curve.EaseIn：缓动曲线，意思是"先慢后快"。跟 Enter 的 EaseOut 正好反过来，起步慢然后加速出去。
.translate({ x: ‘-30%’ })：当前页面往左侧滑出去（初始位置在正常位置，动画结束时跑到左侧外面 30% 的位置）。
.opacity(0.3)：退出时透明度降到 0.3（变透明，慢慢消失）。

2.第二页

第二页的布局跟第一页一样：居中显示"第二页"标题 + 一个按钮。区别在于按钮的功能：
this.getUIContext().getRouter().back()：这是返回上一页的 API。它会把当前页面从页面栈中弹出（pop），回到上一个页面（FirstPage）。

跟第一页没啥区别，主要就是改变了位移方向。从第一页跳到第二页时，新页面从右边滑入、旧页面往右边滑出；从第二页返回第一页时，新页面（FirstPage）从左边滑入、旧页面（SecondPage）往左边滑出。

三、运行效果

第一页

第二页

视频效果

总结

初步接触了鸿蒙 ArkUI 框架中的一些动画相关功能。在开发过程中，我尝试了页面跳转时的转场效果，配置了进入和退出动画参数，实现页面跳转时候，好像因为这个是个异步操作，所以按照Promise 处理机制来，对于我来说让我有了更多的实践经验