介绍
本篇Codelab使用动画样式,实现几种常见动画效果:平移、旋转、缩放以及透明度变化。
相关概念
- [自定义组件]:自定义组件是用户根据业务需求,将已有的组件组合,封装成的新组件,可以在工程中多次调用,从而提高代码的可读性。
- [动画样式]:组件支持动态的旋转、平移、缩放效果,可在style或css中设置。
环境搭建
软件要求
- [DevEco Studio]版本:DevEco Studio 3.1 Release及以上版本。
- OpenHarmony SDK版本:API version 9及以上版本。
硬件要求
- 开发板类型:[润和RK3568开发板]。
- OpenHarmony系统:3.2 Release及以上版本。
环境搭建
完成本篇Codelab我们首先要完成开发环境的搭建,本示例以RK3568开发板为例,参照以下步骤进行:
- [获取OpenHarmony系统版本]:标准系统解决方案(二进制)。以3.2 Release版本为例:
- 搭建烧录环境。
- [完成DevEco Device Tool的安装]
- [完成RK3568开发板的烧录]
- 搭建开发环境。
代码结构解读
本篇Codelab只对核心代码进行讲解,对于完整代码,我们会在gitee中提供。
`HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿`
├──entry/src/main/js // 代码区
│ └──MainAbility
│ ├──common
│ │ └──images
│ │ └──ic_windmill.png // 风车图标
│ ├──component
│ │ └──animatedCards
│ │ ├──animatedCards.css // 自定义动画组件样式
│ │ ├──animatedCards.hml // 自定义动画组件页面
│ │ └──animatedCards.js // 自定义动画组件逻辑
│ ├──i18n
│ │ ├──en-US.json // 英文国际化
│ │ └──zh-CN.json // 中文国际化
│ ├──pages
│ │ └──animation
│ │ ├──animation.css // 动画页面样式
│ │ ├──animation.hml // 动画页面
│ │ └──animation.js // 动画页面逻辑
│ └──app.js // 程序入口
└──entry/src/main/resources // 应用资源目录
页面构建
页面展示几种常见动画效果:平移、旋转、缩放以及透明度变化,界面主要由image组件和text组件组成,效果如图所示:
< !-- animation.hml -- >
< element name='animated-cards' src="../../component/animatedCards/animatedCards.hml" >< /element >
< div class="container" >
< div class="animation-box" for="{{ value in animationList }}" >
< animated-cards icon="{{ windmillIcon }}" animation-list="{{ value }}" >< /animated-cards >
< /div >
< /div >
animation.js文件中,animationList是展示动画效果的列表数据,windmillIcon是页面动画的图片。
// animation.js
export default {
data: {
// 动画列表
animationList: [
{
animationName: 'Translate',
animationStyle: 'img-translate'
},
{
animationName: 'Rotate',
animationStyle: 'img-rotate'
},
{
animationName: 'RotateY',
animationStyle: 'img-rotateY'
},
{
animationName: 'Scale',
animationStyle: 'img-scale'
},
{
animationName: 'Opacity',
animationStyle: 'img-opacity'
}
],
// 动画图片
windmillIcon: '/common/images/ic_windmill.png'
}
}
动画实现
图片的平移、旋转、缩放以及透明度变化都是在animatedCards自定义组件中进行实现,界面主要由image组件和text组件组成。
< !--animatedCards.hml-- >
< div class="container" >
< div class="box" >
< text class="text" >{{ animationList.animationName }}< /text >
< div class="windmill-box" >
< image class="img {{ animationList.animationStyle }}" src="{{ icon }}" >< /image >
< /div >
< /div >
< /div >
声明类型为Array的props,父组件可以通过设置props属性向子组件传递参数。
// animatedCards.js
export default {
props: ['icon', 'animationList']
}
通过css样式,实现风车的平移、旋转、缩放以及透明度的变化。
/* animatedCards.css */
/* 平移动画 */
.img-translate {
animation-name: translateAnim;
}
/* 顺时针旋转 */
.img-rotate {
animation-name: rotateAnim;
}
/* Y轴方向旋转 */
.img-rotateY {
animation-name: rotateYAnim;
}
/* 缩放动画 */
.img-scale {
animation-name: scaleAnim;
}
/* 透明度变化 */
.img-opacity {
animation-name: opacityAnim;
}
/* 从-100vp平移到100vp */
@keyframes translateAnim {
from {
transform: translate(-100vp);
}
to {
transform: translate(100vp);
}
}
/* 从0°旋转到360° */
@keyframes rotateAnim {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 沿Y轴旋转,从0°旋转到360° */
@keyframes rotateYAnim {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
/* 从0倍缩放到1.2倍大小 */
@keyframes scaleAnim {
from {
transform: scale(0);
}
to {
transform: scale(1.2);
}
}
/* 不透明度值从0变化到1 */
@keyframes opacityAnim {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
审核编辑 黄宇
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。
举报投诉
-
鸿蒙
+关注
关注
57文章
2407浏览量
43257 -
HarmonyOS
+关注
关注
79文章
1987浏览量
31005 -
OpenHarmony
+关注
关注
25文章
3766浏览量
16961
发布评论请先 登录
相关推荐
HarmonyOS开发案例:【基础组件Slider的使用】
学习如何使用声明式UI编程框架的基础组件。本篇Codelab将会使用Image组件、Slider组件、Text组件共同实现一个可调节的风车动画

HarmonyOS IoT 硬件开发案例分享
``许思维老师HiSpark Wi-Fi IoT 开发案例分享:案例一:AHT20温湿度传感器开发、调试;案例二:oled屏驱动库移植,调试;案例三:用OLED屏播放视频,Wi-Fi 和 TCP/IP 综合应用。 ``
发表于 10-27 17:30
【润和直播课预告@华为开发者学院】HarmonyOS设备开发基础课程|HiSpark WiFi-IoT 智能小车套件开发案例
`【润和直播课预告@华为开发者学院】HarmonyOS设备开发基础课程|HiSparkWiFi-IoT 智能小车套件开发案例,3月18日(周四) 19:00-21:00,让你的
发表于 03-16 15:01
直播预告丨Hello HarmonyOS进阶课程第四课——ArkUI动画开发
HarmonyOS开发up主九弓子给大家带来真实的上架应用开发案例分享,教你从 Canvas绘图学到CSS应用,再到声明式UI动画API应用。ArkUI中的Canvas
发表于 05-23 10:34
【直播回顾】Hello HarmonyOS进阶课程第四课——ArkUI动画开发
,反响热烈,本节课知名HarmonyOS开发up主九弓子给大家带来真实的上架应用开发案例分享,教你从 Canvas绘图学到CSS应用,再到声明式UI动画API应用,一整节课下来除了充实
发表于 05-26 12:01
HarmonyOS属性动画开发示例(ArkTS)
源码下载
动效示例(ArkTS).zip
环境搭建
我们首先需要完成 HarmonyOS 开发环境搭建,可参照如图步骤进行。
软件要求
DevEco Studio版本:DevEco Studio
发表于 11-23 15:31
许思维老师HarmonyOS IoT硬件开发案例分享
许思维老师HiSpark Wi-Fi IoT 开发案例分享:案例一:AHT20温湿度传感器开发、调试;案例二:oled屏驱动库移植,调试;案例三:用OLED屏播放视频,Wi-Fi 和 TCP/IP 综合应用。
发表于 10-29 10:39
•39次下载

评论