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

效果展示：