即日起至12月31日，加入班级并成功考取【HarmonyOS开发者基础/高级证书】+发布一篇技术文章，即可解锁“通关成就”，有机会赢取官方限定礼品！
礼品数量有限，手速要快！点击加入，让你的努力闪闪发光！✨

场景介绍

动态图片播放是影音娱乐类应用中的典型场景之一，如在视频评论区、新闻资讯页面等播放动态图片。

本示例基于MovingPhotoView组件展示了多个动态图片滑动播放的功能。

实现思路

1. 调用photoAccessHelper.getPhotoAccessHelper方法选择手机相册里的图片。
   1. let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
   2. photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.MOVING_PHOTO_IMAGE_TYPE;
   3. photoSelectOptions.maxSelectNumber = MAX_PHOTO_NUM;
   4. let photoViewPicker = new photoAccessHelper.PhotoViewPicker();
   5. let photoSelectResult = await photoViewPicker.select(photoSelectOptions);
   6. let uris = photoSelectResult.photoUris;
2. 把第一步选择好的图片转换成MovingPhoto格式。
   1. let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
   2. predicates.equalTo(photoAccessHelper.PhotoKeys.URI, uris[i]);
   3. let fetchOption: photoAccessHelper.FetchOptions = {
   4. fetchColumns: [],
   5. predicates: predicates
   6. };
   7. let fetchResult: photoAccessHelper.FetchResult<photoAccessHelper.PhotoAsset> =
   8. await phAccessHelper.getAssets(fetchOption);
   9. let photoAsset: photoAccessHelper.PhotoAsset = await fetchResult.getFirstObject();
   10. await photoAccessHelper.MediaAssetManager.requestMovingPhoto(context, photoAsset, {
   11. deliveryMode: photoAccessHelper.DeliveryMode.FAST_MODE
   12. }, {
   13. async onDataPrepared(movingPhoto: photoAccessHelper.MovingPhoto) {
   14. if (movingPhoto !== undefined) {
   15. srcList.push(movingPhoto);
   16. }
   17. }
   18. });
3. 使用MovingPhotoView组件播放动态图片。
   1. MovingPhotoView({
   2. movingPhoto: this.srcList[index],
   3. controller: this.controllers[index]
   4. })
   5. .muted(false)
   6. .autoPlay(false)
   7. .objectFit(ImageFit.Cover)
   8. .overlay(this.overlayBuilder())

约束与限制

• 本示例支持API Version 17 Release及以上版本。
• 本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
• 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。

工程目录

1. ├──entry/src/main/ets // 代码区
2. │ ├──constants
3. │ │ └──StyleConstants.ets // 样式常量
4. │ ├──entryability
5. │ │ └──EntryAbility.ets
6. │ ├──entrybackupability
7. │ │ └──EntryBackupAbility.ets
8. │ ├──pages
9. │ │ └──MainPage.ets // 入口页
10. │ └──views
11. │ └──MovingPhoto.ets // 动态图片展示页
12. └──entry/src/main/resources // 应用资源目录

参考文档

@ohos.multimedia.movingphotoview（动态照片）

相册管理模块Functions

Interface(MovingPhoto)

代码下载

动态图片播放示例代码

视频播放列表