细解鸿蒙之元服务UX上架标准-基本转场过程无多余加载过渡
是否必须遵守：必须
标准项描述：
保证元服务转场切换沉浸无干扰，页面跳转遵循元服务动效规范，切换过程中无须动画/文字加载状态。
动效设计满足：
1）父子层级转场流畅，无多余动画/文字加载提示。
2）搜索、新建、编辑场景转场流畅，无多余动画/文字加载提示。
3）卡片（列表、网格、按钮、图片、视频）打开转场流畅，无多余动画/文字加载提示。
4）左右翻页滑动流畅，无多余动画/文字加载提示。
测试方法：检查元服务一二级界面切换效果。
判定标准：遵循元服务加载状态规范
基本转场过程无多余加载过渡是一种优化转场体验的重要方式。通过减少多余加载过渡，可以提高转场的效率和质量，为用户带来更加流畅、高效的体验。在设计和开发过程中，应注重转场的优化，确保转场过程无多余加载过渡，从而提升应用程序的整体性能和用户体验。--javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
// 导入必要的组件和装饰器
import promptAction from '@ohos.promptAction';
import { router } from '@kit.ArkUI';
import { showToast } from '../utils/ToastUtil';
// 组件的预览装饰器，用于在开发环境中预览组件
@Preview
// 入口组件的装饰器，表明该组件是应用的入口
@Entry
// 定义一个名为 Fan 的组件
@Component
struct Fan {
// 记录已经翻的页数，使用 @State 装饰器，当值改变时会触发组件重新渲染
@State pageCount: number = 0;
// 记录游戏是否开始，true 为开始，false 为未开始，状态变量控制游戏的开始和暂停
@State isGameStarted: boolean = false;
// 记录剩余时间（秒），状态变量，会在 UI 中显示剩余时间
@State remainingTime: number = 60;
// 定时器的 id，用于存储定时器的标识符，以便后续清除定时器
private timerId: number = 0;
@State color: Color = Color.Blue;
@State text: string = "开始游戏";
// 存储一系列图片的路径，用于在 Swiper 组件中显示
@State banners: string[] = [
"/image/F1.jpg",
"/image/F2.jpg",
"/image/F3.jpg",
"/image/F4.jpg",
"/image/F5.jpg",
"/image/F6.jpg",
"/image/F7.jpg",
"/image/F8.jpg",
"/image/F9.jpg",
"/image/F10.jpg",
"/image/F11.jpg",
"/image/F12.jpg"
];
build() {
// 使用 Column 组件进行垂直布局
Column() {
Row(){
Text("<")
.onClick(()=>{
this.endGame
router.back()
})
//点击热区
.height("40vp")
.width("40vp")
.backgroundColor(Color.White).borderRadius(60).opacity(0.6)
}
.width('100%')
.justifyContent(FlexAlign.Start)
//边距适中
.margin({top:45,left:'16vp'})
// 以下是被注释掉的代码，可能原本打算显示一张图片，但目前未使用
// Image("/image/fanshu.jpg")
// 显示欢迎信息的 Text 组件，设置字体大小和上边距
Text(`欢迎来到单手翻书比赛`)
.fontSize(25)
.margin({ top: 60 });
// 显示当前翻的页数的 Text 组件，设置字体大小和上边距
Text(`已翻页数: ${this.pageCount}`)
.fontSize(20)
.margin({ top: 50 });
// 显示剩余时间的 Text 组件，设置字体大小和上边距
Text(`剩余时间: ${this.remainingTime} 秒`)
.fontSize(20)
.margin({ top: 10 });
// 开始游戏的按钮，使用 Button 组件，显示的文本为 this.text 状态变量
Button(this.text)
.height(50)
.width(200)
.onClick(() => {
showToast("请快速滑动图片哟")
// 点击按钮时调用 startGame 方法，开始游戏
this.startGame();
})
.borderRadius(50)
.backgroundColor(this.color)
.margin({ top: 50})
.enabled(!this.isGameStarted) // 根据 isGameStarted 状态控制按钮可点击性，游戏未开始时可点击
// 模拟翻页按钮的上边距和下边距设置
.margin({bottom:40,top:30})
// 使用 Swiper 组件，用于显示一系列图片并可滑动
Swiper() {
// 使用 ForEach 遍历 banners 数组，为每个 banner 生成一个 Column 包含一个 Image 组件
ForEach(this.banners, (banner: string) => {
Column() {
// 显示图片的 Image 组件，设置高度、宽度和圆角
Image(banner)
.height(400)
.width(300)
.borderRadius(30);
}
.onClick(() => {
})
.alignItems(HorizontalAlign.Center)
.height("100%");
}, (banner: string) => banner);
}
.height("500vp")
.width("95%")
.displayMode(SwiperDisplayMode.STRETCH)
.loop(true)
.autoPlay(false)
.indicator(false)
.interval(1000)
.onChange((index) => {
// 当 Swiper 组件切换时，如果游戏开始，则增加已翻页数
if (this.isGameStarted) {
this.pageCount++;
}
});
}
// 修正背景颜色设置，使用线性渐变作为背景颜色
.backgroundColor("#3561ee42")
.linearGradient({
direction: GradientDirection.Bottom, // 渐变方向，从顶部到底部
repeating: false, // 不重复渐变颜色
colors: [[0xFF14E2ED, 0.0], [0xFFFFFF, 0.7]] // 渐变颜色及对应的比例，从 0xFF14E2ED 渐变到 0xFFFFFF
})
.width('100%')
.height('100%');
}
// 开始游戏的方法，启动定时器并设置游戏状态为开始
startGame() {
// 改变按钮文本，更新 UI 上显示的按钮文本
this.text = "游戏中";
// 改变按钮颜色，更新 UI 上按钮的颜色
this.color = Color.Gray;
// 设置游戏开始，更新游戏状态，影响其他 UI 元素的交互和显示
this.isGameStarted = true;
// 重置已翻页数，更新 UI 上显示的已翻页数
this.pageCount = 0;
// 重置剩余时间，更新 UI 上显示的剩余时间
this.remainingTime = 60;
// 启动定时器，每秒更新一次剩余时间
this.timerId = setInterval(() => {
this.remainingTime--;
// 当剩余时间小于 0 时，结束游戏
if (this.remainingTime < 0) {
this.remainingTime = 0;
this.endGame();
}
}, 1000);
}
// 结束游戏的方法，清除定时器，弹出提示显示最终翻页结果并重置游戏状态
endGame() {
// 改变按钮文本，更新 UI 上显示的按钮文本
this.text = "开始游戏";
// 改变按钮颜色，更新 UI 上按钮的颜色
this.color = Color.Blue;
// 清除定时器，停止剩余时间的更新
clearInterval(this.timerId);
// promptAction.showToast({
// message: `游戏结束！你一共翻了 ${this.pageCount} 页。`,
// duration: 3000
// });
// 设置游戏结束，更新游戏状态，影响其他 UI 元素的交互和显示
this.isGameStarted = false;
}
}PS：实际项目中如有出入，请告知博主，博主会第一时间修改得哇~
