代码拉取完成，页面将自动刷新
本篇Codelab使用动画样式，实现几种常见动画效果：平移、旋转、缩放以及透明度变化。
完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：
获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：
搭建烧录环境。
搭建开发环境。
本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在gitee中提供。
├──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;
}
}
您已经完成了本次Codelab的学习，并了解到以下知识点：
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手