《HarmonyOS应用开发基础》 课件 实操 项目2-任务14 使用动画.pptx

任务14使用动画

项目2走进ArkTS声明式开发

任务14使用动画

本任务完成显示动画、组件的转场动画、页面的转场动画的设置。

任务描述

任务效果图预览

任务实施

01

02

03

05

04

整理工程资源

页面整体布局设计与开发

实现显式动画

实现页面转场动画

实现组件转场动画

01整理工程资源

02页面整体布局设计与开发

页面整体布局用Stack层叠布局实现，Stack的对齐方式采用默认的居中对齐。Stack内放置一个Image组件和一个Column布局容器组件，在Column内再放置Button按钮组件等。

03实现显式动画-1

在ets目录下创建view目录，在view目录下创建AttrAnimation.ets文件，在AttrAnimation.ets文件中创建AttrAnimation组件，使用显式动画实现加载中的动画效果。

整体布局是最外层使用Column，内部放置Stack层叠布局和一个Text组件，Stack中叠放两个图片loading.png和sandglass.png。

03实现显式动画-2

修改Index.ets文件的内容，在第一行导入AttrAnimation组件，并在“显示动画”按钮的条件渲染中进行调用。

04实现组件转场动画

在Index.ets文件中，实现单击likes（点赞）图片时，love（爱心）图片的插入和删除的组件转场动画效果。

05实现页面转场动画

在pages目录下新建页面Index2，分别在Index1和Index2两个页面中添加页面转场动画。

在Index组件中，给最外层的Stack布局添加页面的缩放比和透明度设置，并添加页面入场和出场动画效果。

任务14使用动画

在App的开发中，适当的使用动画效果，可以增强用户体验。本任务学习了常用的显示动画、组件内转场动画、页面间转场动画的用法，ArkUI开发框架中还提供了属性动画和路径动画，有兴趣的读者可自行参考官方文档进行使用。

任务小结