【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);
    }
}

效果展示：