【HarmonyOS】【JS】小白的鸿蒙学习之路2--小小的图片啊，动呀动起来
【关键字】
image组件、动画
【介绍】
今天和大家分享下，我在官网上学习的一篇Codelab。这篇帖子通过一个代码示例，实现image组件的平移、缩放、旋转和透明度变化效果。话不多说，我们一起学起来吧！
【成果展示】
【开发步骤】
1.新建工程的JS，如下图所示
2.工程的JS目录如下图所示
1)在工程目录中：i18n下存放多语言的json文件；
-
en-US.json：此文件定义了在英文模式下页面显示的变量内容。
-
zh-CN.json：此文件定义了在中文模式下页面显示的变量内容。
2)common.images下存放工程中使用的图片资源文件；
3）pages文件夹下存放多个页面，每个页面由hml、css和js文件组成。
-
index.hml：此文件定义了index页面的布局、index页面中用到的组件，以及这些组件的层级关系。
-
index.css：此文件定义了index页面的样式。
-
index.js：此文件定义了index页面的业务逻辑，比如数据绑定、事件处理等。
3.打开index.hml文件，删除默认代码，添加image组件和text组件，并添加对应的class，用于设置组件的显示效果，代码如下：
<div class="container">
<image class="img img-translate" src="/common/images/cat.png"></image>
<text class="text">平移</text>
<image class="img img-rotate" src="/common/images/cat.png"></image>
<text class="text">360度旋转</text>
<image class="img img-rotateY" src="/common/images/cat.png"></image>
<text class="text">Y旋转</text>
<image class="img img-scale" src="/common/images/cat.png"></image>
<text class="text">缩放</text>
<image class="img img-opacity" src="/common/images/cat.png"></image>
<text class="text">不透明</text>
</div>
4、上面所有的组件都定义了class属性，它对应的样式都定义在index.css中。这部分定义了整个页面中各个组件的样式。在index.css中先添加如下代码：
.container {
background-color: yellowgreen;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 动画以低速结束、设置动画在3秒内完成、等待0秒，然后开始动画、定动画应该播放无限次*/
.img {
margin-top: 40px;
height: 14%;
width: 100%;
animation-timing-function: ease-out;
animation-duration: 3s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
.text {
font-size: 40px;
}
.img-translate {
animation-name: translateAnim;
}
.img-rotate {
animation-name: rotateAnim;
}
.img-rotateY {
animation-name: rotateYAnim;
}
.img-scale {
animation-name: scaleAnim;
}
.img-mixes {
animation-name: mixesAnim;
}
.img-opacity {
animation-name: opacityAnim;
}
/*从-100px平移到100px*/
@keyframes translateAnim {
from {
transform: translate(-100px);
}
to {
transform: translate(100px);
}
}
/*从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;
}
}【经验总结】
一个小拓展，同时实现缩放、旋转和透明度变化效果
CSS:
.container {
background-color: yellowgreen;
flex-direction: column;
justify-content: center;
align-items: center;
}
.img {
margin-top: 40px;
height: 90%;
width: 100%;
animation-timing-function: ease-out;
animation-duration: 3s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
.text {
font-size: 40px;
}
.img-gathers {
animation-name: gathersAnim ;
}
@keyframes gathersAnim {
from {
opacity: 0;
}
to {
opacity: 1;
}
from {
transform: scale(0);
}
to {
transform: scale(1.2);
}
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}效果展示：
【相关参考】
JS API动画样式参考：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-common-animation-0000001281201102
JS UI框架学习：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-js-overview-0000001333721061
欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
