**想系统学习HarmonyOS开发？
欢迎加入班级，学技术、拿认证、获得HarmonyOS礼盒，一站式成长通道已为你打开！**
场景介绍
视频镜面播放是运动健康类应用的典型场景之一，如用户利用镜面播放功能学习瑜伽、舞蹈、健身操等视频课程，帮助用户规范动作。
本示例基于AVPlayer实现视频播放功能，通过rotate实现组件镜面效果。
效果预览
实现思路
-
设置是否选择镜面播放，若选择镜面播放，镜面角度翻转180°，按钮变为蓝色，否则镜面角度恢复，按钮变为白色。
Image(this.isMirror ? $r('app.media.mirror_blue') : $r('app.media.mirror_white')) .height(Constants.IMAGE_18) .width(Constants.IMAGE_18) .onClick(() => { if (!this.isMirror) { this.isMirror = true // 设置镜面角度 this.angle = 180; // 弹窗提醒展示 this.dialogDuration(); } else { this.isMirror = false // 恢复镜面角度 this.angle = 0; } }) -
设置播放控件镜面属性rotate，实现镜面功能。
Stack() { ... } .height(Constants.FULL_PERCENT) .rotate({ y: 2, angle: this.angle, perspective: 200 })
约束与限制
- 本示例支持API Version 17 Release及以上版本。
- 本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。
工程目录
├──entry/src/main/ets // 代码区│ ├──common│ │ └──Constants.ets // 常量│ ├──entryability│ │ └──EntryAbility.ets│ ├──pages│ │ └──MainPage.ets // 播放主页│ └──util│ ├──GlobalContext.ets // 存储工具类│ └──Logger.ets // 日志工具类└──entry/src/main/resources // 应用资源目录
