文章目录前言这页的阅读顺序我建议这样走先把谁在驱动页面这件事搞清楚我会优先读的就是这几段逻辑第一段关键代码页面是怎么被带起来的第二段关键代码真正决定交互手感的地方真要学会用自己过一遍这条操作线直接照搬不够最好再补这几刀我觉得它真正有价值的地方在这完整代码收个尾前言页面切换动效不是花活它直接影响用户对层级变化的感知。这个案例把导航动画单独拎出来讲很适合拿来理解“为什么同样的跳转体验差别会这么大”。 我一直觉得好示例不一定代码多但一定能把“为什么要这么写”交代清楚。导航动画演示页 这个页面就属于这种值得停下来认真拆一遍。如果把这页当成练习材料我会优先看它怎样围绕 路由转场动画与切换节奏控制 组织页面。因为这一层想清楚了后面的代码基本就不会散。这类写法尤其适合落在 高质感页面、内容详情切换、交互演示页 这些场景里所以我下面不会只讲“组件怎么写”而是更关心“放进页面之后为什么这样组织”。这页的阅读顺序我建议这样走这一类页面看源码最怕的就是“每一段都认识但拼起来不知道为什么这么摆”。所以这里先从页面骨架讲起比直接盯属性更省时间。页面区域主要职责在代码里的典型表现头部说明区交代当前案例在演示什么Text标题、补充说明、标签文案核心展示区承载组件能力的主要效果Column、Row、业务组件本体辅助信息区补充状态、标签、分组或统计信息次级文本、角标、分组标题、描述块交互入口区负责切换、返回、定位、选择等动作点击事件、按钮、索引条、导航入口这一页没有额外拆出接口页面更多是直接围绕基础数据和组件参数展开。我会把它当成真实业务页面来拆重点看哪些写法可以直接迁到项目里哪些只是示例环境下的轻量实现。先把谁在驱动页面这件事搞清楚有些 ArkUI 页面看起来像静态展示但只要你开始点、滑、选、切状态关系马上就露出来了。这个案例也一样。isShow建议优先确认它控制的是显示、选择、切换还是数据同步。currentPage建议优先确认它控制的是显示、选择、切换还是数据同步。animationType建议优先确认它控制的是显示、选择、切换还是数据同步。真要自己上手改我建议别一开始就扑到样式上先把状态分层这件事处理好长期数据列表内容、卡片信息、导航目标、角标基数这类不该跟着一次点击乱跳的内容。交互状态当前选中项、弹层开关、吸附开关、回显结果这类会频繁变化的值。计算结果过滤结果、统计文案、高亮判断这类更适合派生出来的内容。我会优先读的就是这几段逻辑我一般不会把所有方法从上到下读一遍而是先找“用户动一下之后页面为什么会变”的那条链路。这个案例没有太多额外方法核心价值主要集中在页面结构和组件组合方式。我自己读这类方法时通常只抓一条线谁触发、谁被改、页面哪里立刻有反馈。把这三件事连起来很多交互代码一下就顺了。第一段关键代码页面是怎么被带起来的这一段建议慢一点看。它通常决定了页面初始状态也决定了后续哪些区域会跟着刷新。StateisShow:booleantrueStatecurrentPage:stringmainStateanimationType:stringbuild(){Column(){if(this.isShow){Column({space:16}){Text(路由动画).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text(NavDestination 支持不同的页面切换动画效果).fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width(100%)if(this.currentPagemain){Column({space:12}){Text(选择转场动画).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#333333)这一段我通常不会一下翻过去而是先确认下面这几个判断点State字段到底在控制显示、选择、跳转结果还是模式切换。默认值是不是合理页面一打开会不会就落在一个可理解的状态上。字段命名能不能让后来的人一眼看懂用途而不是还要翻半天 UI。第二段关键代码真正决定交互手感的地方这一段点击逻辑很直观用户选择某种动画代码先写入animationType再把currentPage切到详情页。也就是说页面跳转和转场说明是同一次交互里的两个结果适合拿来讲清楚“动效选择如何影响页面感知”。.onClick((){this.animationType默认推入动画this.currentPagedetail})Row({space:6}){Text(↑).fontSize(16).fontColor(PRESET_COLORS[0].value)Text(底部弹出).fontSize(14).fontColor(#333333).layoutWeight(1)Text(从下滑入).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)}.width(100%).padding(14).backgroundColor(DEMO_CARD_COLOR).borderRadius(10).onClick((){this.animationType底部弹出动画this.currentPagedetail代码读到这里我通常会顺手补三件事不然后面很容易只看热闹这个交互入口接收的到底是什么输入。输入进来之后代码改了哪个状态或者触发了哪次导航。变化发生后用户最先感知到的反馈会落在哪个区域。这三个问题串起来之后这一页基本就不只是“看过”而是真的读懂了。真要学会用自己过一遍这条操作线如果你准备把这个案例交给团队里别的人看我甚至建议直接让对方按下面的顺序自己操作一遍。很多理解偏差都会在这一步消失。先进入页面确认首屏是不是把导航动画演示页的主题交代清楚。盯住核心展示区观察默认状态下最醒目的内容是什么。主动触发一次关键交互比如点击、滑动、跳转、返回、切换或者选择。回头检查状态区、提示区、标题区或者附属信息有没有跟着变化。最后再打开源码对照刚才那次交互把状态变化链路串起来。如果这五步你能边操作边说清楚页面发生了什么后面再换成自己的数据和交互心里会稳很多。直接照搬不够最好再补这几刀从教程页到业务页差的从来不只是接口。更多时候是组件职责、命名和状态来源要重新收拾一遍。导航类页面迁到业务里时最先要补的是参数类型和返回结果约定而不是视觉样式。如果页面层级开始变多建议尽早把跳转入口、回退逻辑和标题栏动作拆成清晰边界。只要页面里有重复块就别硬撑着手写到底早点抽成小组件后面改样式和改交互都会轻松很多。示例数据最好和布局代码分开放不然后面一接接口页面文件很容易立刻变臃肿。我觉得它真正有价值的地方在这很多官方示例的价值在于展示组件存在过但这种页面更进一步它在展示“组件被放进页面之后怎么活起来”。页面结构比较稳后续不管是换数据还是换皮肤成本都不会特别高。状态数量总体可控适合拿来练“一个页面里如何分配职责”这件事。组件参数和页面目标之间关系比较直观不太会出现“能跑但看不懂为什么这么配”的情况。完整代码下面保留整理过命名的完整 ArkTS 代码方便你直接对照学习。这里已经去掉原始的 Demo 命名改成了更贴近当前案例语义的名称。/** * 导航动画演示页 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesEntryComponentstruct NavigationTransitionAnimation{StateisShow:booleantrueStatecurrentPage:stringmainStateanimationType:stringbuild(){Column(){if(this.isShow){Column({space:16}){Text(路由动画).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text(NavDestination 支持不同的页面切换动画效果).fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width(100%)if(this.currentPagemain){Column({space:12}){Text(选择转场动画).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#333333)// 动画选项Column({space:10}){Row({space:6}){Text(→).fontSize(16).fontColor(DEMO_THEME_COLOR)Text(默认推入).fontSize(14).fontColor(#333333).layoutWeight(1)Text(从右滑入).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)}.width(100%).padding(14).backgroundColor(DEMO_CARD_COLOR).borderRadius(10).onClick((){this.animationType默认推入动画this.currentPagedetail})Row({space:6}){Text(↑).fontSize(16).fontColor(PRESET_COLORS[0].value)Text(底部弹出).fontSize(14).fontColor(#333333).layoutWeight(1)Text(从下滑入).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)}.width(100%).padding(14).backgroundColor(DEMO_CARD_COLOR).borderRadius(10).onClick((){this.animationType底部弹出动画this.currentPagedetail})Row({space:6}){Text(○).fontSize(16).fontColor(PRESET_COLORS[1].value)Text(淡入淡出).fontSize(14).fontColor(#333333).layoutWeight(1)Text(透明度渐变).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)}.width(100%).padding(14).backgroundColor(DEMO_CARD_COLOR).borderRadius(10).onClick((){this.animationType淡入淡出动画this.currentPagedetail})Row({space:6}){Text(↗).fontSize(16).fontColor(PRESET_COLORS[2].value)Text(缩放进入).fontSize(14).fontColor(#333333).layoutWeight(1)Text(从小变大).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)}.width(100%).padding(14).backgroundColor(DEMO_CARD_COLOR).borderRadius(10).onClick((){this.animationType缩放进入动画this.currentPagedetail})}.width(100%)}.width(100%)}else{// 目标页Column({space:16}){Row(){Text(← 返回).fontSize(14).fontColor(DEMO_THEME_COLOR).onClick((){this.currentPagemain})Blank()Text(动画详情).fontSize(14).fontColor(#333333)}.width(100%)Column({space:12}){Text(this.animationType).fontSize(22).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR).textAlign(TextAlign.Center)Text(页面已通过选定的转场动画进入).fontSize(14).fontColor(DEMO_SUBTEXT_COLOR).textAlign(TextAlign.Center)// 动画说明Column({space:8}){Text(动画属性说明).fontSize(13).fontWeight(FontWeight.Medium).fontColor(#333333).width(100%)Text(• NavDestination 支持 onTransitionEnd 回调).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).width(100%)Text(• 可自定义进入/退出动画时长和曲线).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).width(100%)Text(• 支持共享元素转场效果).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).width(100%)}.width(100%).padding(12).backgroundColor(#F5F5F5).borderRadius(8)}.width(100%).padding(24).backgroundColor(DEMO_CARD_COLOR).borderRadius(12)Button(返回带退出动画).fontSize(14).height(40).backgroundColor(DEMO_THEME_COLOR).fontColor(#FFFFFF).borderRadius(20).onClick((){this.currentPagemain})}.width(100%).padding(16).backgroundColor(DEMO_CARD_COLOR).borderRadius(12)}}.alignItems(HorizontalAlign.Start)}Text(导航动画演示页 - 路由动画).fontSize(12).fontColor(#999999).margin({top:12})}.width(100%).height(100%).backgroundColor(DEMO_BG_COLOR).padding(16)}}收个尾这个案例没有故意炫技反而因此更适合学习。页面目标清楚、代码组织也相对直接拿来练手或者做项目骨架都不亏。
文章目录前言这页的阅读顺序我建议这样走先把谁在驱动页面这件事搞清楚我会优先读的就是这几段逻辑第一段关键代码页面是怎么被带起来的第二段关键代码真正决定交互手感的地方真要学会用自己过一遍这条操作线直接照搬不够最好再补这几刀我觉得它真正有价值的地方在这完整代码收个尾前言页面切换动效不是花活它直接影响用户对层级变化的感知。这个案例把导航动画单独拎出来讲很适合拿来理解“为什么同样的跳转体验差别会这么大”。 我一直觉得好示例不一定代码多但一定能把“为什么要这么写”交代清楚。导航动画演示页 这个页面就属于这种值得停下来认真拆一遍。如果把这页当成练习材料我会优先看它怎样围绕 路由转场动画与切换节奏控制 组织页面。因为这一层想清楚了后面的代码基本就不会散。这类写法尤其适合落在 高质感页面、内容详情切换、交互演示页 这些场景里所以我下面不会只讲“组件怎么写”而是更关心“放进页面之后为什么这样组织”。这页的阅读顺序我建议这样走这一类页面看源码最怕的就是“每一段都认识但拼起来不知道为什么这么摆”。所以这里先从页面骨架讲起比直接盯属性更省时间。页面区域主要职责在代码里的典型表现头部说明区交代当前案例在演示什么Text标题、补充说明、标签文案核心展示区承载组件能力的主要效果Column、Row、业务组件本体辅助信息区补充状态、标签、分组或统计信息次级文本、角标、分组标题、描述块交互入口区负责切换、返回、定位、选择等动作点击事件、按钮、索引条、导航入口这一页没有额外拆出接口页面更多是直接围绕基础数据和组件参数展开。我会把它当成真实业务页面来拆重点看哪些写法可以直接迁到项目里哪些只是示例环境下的轻量实现。先把谁在驱动页面这件事搞清楚有些 ArkUI 页面看起来像静态展示但只要你开始点、滑、选、切状态关系马上就露出来了。这个案例也一样。isShow建议优先确认它控制的是显示、选择、切换还是数据同步。currentPage建议优先确认它控制的是显示、选择、切换还是数据同步。animationType建议优先确认它控制的是显示、选择、切换还是数据同步。真要自己上手改我建议别一开始就扑到样式上先把状态分层这件事处理好长期数据列表内容、卡片信息、导航目标、角标基数这类不该跟着一次点击乱跳的内容。交互状态当前选中项、弹层开关、吸附开关、回显结果这类会频繁变化的值。计算结果过滤结果、统计文案、高亮判断这类更适合派生出来的内容。我会优先读的就是这几段逻辑我一般不会把所有方法从上到下读一遍而是先找“用户动一下之后页面为什么会变”的那条链路。这个案例没有太多额外方法核心价值主要集中在页面结构和组件组合方式。我自己读这类方法时通常只抓一条线谁触发、谁被改、页面哪里立刻有反馈。把这三件事连起来很多交互代码一下就顺了。第一段关键代码页面是怎么被带起来的这一段建议慢一点看。它通常决定了页面初始状态也决定了后续哪些区域会跟着刷新。StateisShow:booleantrueStatecurrentPage:stringmainStateanimationType:stringbuild(){Column(){if(this.isShow){Column({space:16}){Text(路由动画).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text(NavDestination 支持不同的页面切换动画效果).fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width(100%)if(this.currentPagemain){Column({space:12}){Text(选择转场动画).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#333333)这一段我通常不会一下翻过去而是先确认下面这几个判断点State字段到底在控制显示、选择、跳转结果还是模式切换。默认值是不是合理页面一打开会不会就落在一个可理解的状态上。字段命名能不能让后来的人一眼看懂用途而不是还要翻半天 UI。第二段关键代码真正决定交互手感的地方这一段点击逻辑很直观用户选择某种动画代码先写入animationType再把currentPage切到详情页。也就是说页面跳转和转场说明是同一次交互里的两个结果适合拿来讲清楚“动效选择如何影响页面感知”。.onClick((){this.animationType默认推入动画this.currentPagedetail})Row({space:6}){Text(↑).fontSize(16).fontColor(PRESET_COLORS[0].value)Text(底部弹出).fontSize(14).fontColor(#333333).layoutWeight(1)Text(从下滑入).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)}.width(100%).padding(14).backgroundColor(DEMO_CARD_COLOR).borderRadius(10).onClick((){this.animationType底部弹出动画this.currentPagedetail代码读到这里我通常会顺手补三件事不然后面很容易只看热闹这个交互入口接收的到底是什么输入。输入进来之后代码改了哪个状态或者触发了哪次导航。变化发生后用户最先感知到的反馈会落在哪个区域。这三个问题串起来之后这一页基本就不只是“看过”而是真的读懂了。真要学会用自己过一遍这条操作线如果你准备把这个案例交给团队里别的人看我甚至建议直接让对方按下面的顺序自己操作一遍。很多理解偏差都会在这一步消失。先进入页面确认首屏是不是把导航动画演示页的主题交代清楚。盯住核心展示区观察默认状态下最醒目的内容是什么。主动触发一次关键交互比如点击、滑动、跳转、返回、切换或者选择。回头检查状态区、提示区、标题区或者附属信息有没有跟着变化。最后再打开源码对照刚才那次交互把状态变化链路串起来。如果这五步你能边操作边说清楚页面发生了什么后面再换成自己的数据和交互心里会稳很多。直接照搬不够最好再补这几刀从教程页到业务页差的从来不只是接口。更多时候是组件职责、命名和状态来源要重新收拾一遍。导航类页面迁到业务里时最先要补的是参数类型和返回结果约定而不是视觉样式。如果页面层级开始变多建议尽早把跳转入口、回退逻辑和标题栏动作拆成清晰边界。只要页面里有重复块就别硬撑着手写到底早点抽成小组件后面改样式和改交互都会轻松很多。示例数据最好和布局代码分开放不然后面一接接口页面文件很容易立刻变臃肿。我觉得它真正有价值的地方在这很多官方示例的价值在于展示组件存在过但这种页面更进一步它在展示“组件被放进页面之后怎么活起来”。页面结构比较稳后续不管是换数据还是换皮肤成本都不会特别高。状态数量总体可控适合拿来练“一个页面里如何分配职责”这件事。组件参数和页面目标之间关系比较直观不太会出现“能跑但看不懂为什么这么配”的情况。完整代码下面保留整理过命名的完整 ArkTS 代码方便你直接对照学习。这里已经去掉原始的 Demo 命名改成了更贴近当前案例语义的名称。/** * 导航动画演示页 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesEntryComponentstruct NavigationTransitionAnimation{StateisShow:booleantrueStatecurrentPage:stringmainStateanimationType:stringbuild(){Column(){if(this.isShow){Column({space:16}){Text(路由动画).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text(NavDestination 支持不同的页面切换动画效果).fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width(100%)if(this.currentPagemain){Column({space:12}){Text(选择转场动画).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#333333)// 动画选项Column({space:10}){Row({space:6}){Text(→).fontSize(16).fontColor(DEMO_THEME_COLOR)Text(默认推入).fontSize(14).fontColor(#333333).layoutWeight(1)Text(从右滑入).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)}.width(100%).padding(14).backgroundColor(DEMO_CARD_COLOR).borderRadius(10).onClick((){this.animationType默认推入动画this.currentPagedetail})Row({space:6}){Text(↑).fontSize(16).fontColor(PRESET_COLORS[0].value)Text(底部弹出).fontSize(14).fontColor(#333333).layoutWeight(1)Text(从下滑入).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)}.width(100%).padding(14).backgroundColor(DEMO_CARD_COLOR).borderRadius(10).onClick((){this.animationType底部弹出动画this.currentPagedetail})Row({space:6}){Text(○).fontSize(16).fontColor(PRESET_COLORS[1].value)Text(淡入淡出).fontSize(14).fontColor(#333333).layoutWeight(1)Text(透明度渐变).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)}.width(100%).padding(14).backgroundColor(DEMO_CARD_COLOR).borderRadius(10).onClick((){this.animationType淡入淡出动画this.currentPagedetail})Row({space:6}){Text(↗).fontSize(16).fontColor(PRESET_COLORS[2].value)Text(缩放进入).fontSize(14).fontColor(#333333).layoutWeight(1)Text(从小变大).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)}.width(100%).padding(14).backgroundColor(DEMO_CARD_COLOR).borderRadius(10).onClick((){this.animationType缩放进入动画this.currentPagedetail})}.width(100%)}.width(100%)}else{// 目标页Column({space:16}){Row(){Text(← 返回).fontSize(14).fontColor(DEMO_THEME_COLOR).onClick((){this.currentPagemain})Blank()Text(动画详情).fontSize(14).fontColor(#333333)}.width(100%)Column({space:12}){Text(this.animationType).fontSize(22).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR).textAlign(TextAlign.Center)Text(页面已通过选定的转场动画进入).fontSize(14).fontColor(DEMO_SUBTEXT_COLOR).textAlign(TextAlign.Center)// 动画说明Column({space:8}){Text(动画属性说明).fontSize(13).fontWeight(FontWeight.Medium).fontColor(#333333).width(100%)Text(• NavDestination 支持 onTransitionEnd 回调).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).width(100%)Text(• 可自定义进入/退出动画时长和曲线).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).width(100%)Text(• 支持共享元素转场效果).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).width(100%)}.width(100%).padding(12).backgroundColor(#F5F5F5).borderRadius(8)}.width(100%).padding(24).backgroundColor(DEMO_CARD_COLOR).borderRadius(12)Button(返回带退出动画).fontSize(14).height(40).backgroundColor(DEMO_THEME_COLOR).fontColor(#FFFFFF).borderRadius(20).onClick((){this.currentPagemain})}.width(100%).padding(16).backgroundColor(DEMO_CARD_COLOR).borderRadius(12)}}.alignItems(HorizontalAlign.Start)}Text(导航动画演示页 - 路由动画).fontSize(12).fontColor(#999999).margin({top:12})}.width(100%).height(100%).backgroundColor(DEMO_BG_COLOR).padding(16)}}收个尾这个案例没有故意炫技反而因此更适合学习。页面目标清楚、代码组织也相对直接拿来练手或者做项目骨架都不亏。
