[HarmonyOS Next示例代码] 鸿蒙UI开发 - 阅读器翻页效果

 鸿蒙UI开发 - 阅读器翻页效果 源码下载地址

介绍

本示例基于显式动画、Canvas组件实现了阅读器上下滑动翻页、左右覆盖翻页、左右滑动翻页等效果。

效果预览

使用说明

• 进入应用默认为左右覆盖翻页，点击屏幕中部区域，弹出设置半模态窗口。
• 半模态窗口支持设置屏幕亮度、字体大小、翻页类型以及文本背景颜色，点击半模态窗口关闭按钮、外部区域或下拉关闭窗口。
• 文本以页为单位进行展示，上下滑动切换其他翻页模式时，以当前所处页首字为基准，更换字体同理。

工程目录

├──entry/src/main/ets/
│  ├──common
│  │  ├──constants
│  │  │  └──Constants.ets            // 公共常量类
│  │  └──uitls
│  │     └──Logger.ets               // 日志类
│  ├──entryability
│  │  └──EntryAbility.ets            // 程序入口类
│  ├──page                  
│  │  └──NovelPage.ets               // 首页
│  └──view
│     ├──CoverFlipView.ets           // 覆盖翻页
│     ├──Reader.ets                  // 绘制文本
│     ├──SheetView.ets               // 半模态窗口
│     ├──SlideFlipView.ets           // 左右滑动翻页
│     └──UpDownFlipView.ets          // 上下翻页
└──entry/src/main/resource           // 应用静态资源目录

具体实现

1. 使用Canvas组件实现文本绘制，支持调整字体大小。

2. 使用PanGesture滑动手势结合animateTo显示动画，实现上下翻页、左右覆盖翻页、左右滑动翻页等效果。

相关权限

不涉及