目錄：
今天給大家介紹的是animation動畫組件在鴻蒙中的應用.要實現一個 animation 動畫，需要使用兩個屬性@keyframes 和 animation.
一.關鍵幀(keyframes) :定義動畫在不同階段的狀態.所制作的動畫就根據keyframes中定義的規則運動. 它的語法結構如下兩種:1.百分比來規定改變發生的時間,2.通過關鍵詞 "from" 和 "to",等價於 0% 和 100%. 如下圖:
二.animation屬性:
(1)animation-name:指定選用的動畫的名字(自定義),需要和keyframes中的name一致
(2)animation-delay:定義動畫是從何時開始播放
(3)animation-iteration-count:定義我們的動畫播放的次數.次數可以是1次或者無限循環.默認值只播放一次
(4)animation-fill-mode:定義動畫模式,即指給定動畫播放前后應用元素的樣式,具體取值有none ,forwards,backwards,both .這個屬性個人感覺說起來比較抽象.
(5)animation-timing-function:時間函數,控制動畫的執行速度.linear 勻速; ease-in 加速; ease-out 減速; ease-in-out 先加速后減速
(6)animation-play-state 動畫運行狀態 paused:暫停 ; running 運行
注意:在css3的animation動畫中有一個animation-direction的屬性,但是我在鴻蒙中應用這個時,剛開始我以為是官方沒有提示,自己寫出來運行后也沒有想要的效果,所以我猜鴻蒙的animation組件中沒有這個屬性(若有或者有替代的屬性請各位大佬指出.)
視圖渲染:
<div class="container">
<div class="oneview">
</div>
<div class="twoview">
<image class="img1" src="common/zhou.jpg">
</image>
</div>
</div>
css屬性設置:
.container {
width: 100%;
height: 1200px;
display: flex;
flex-direction: column;
}
.oneview{
width: 300px;
height: 300px;
border-radius: 150px;
background-color: skyblue;
/**動畫名稱**/
animation-name: one1;
/**動畫時間**/
animation-duration: 6s;
/**動畫執行次數**/
animation-iteration-count: infinite;
/**動畫執行速度**/
animation-timing-function: ease-in-out;
/**動畫模式**/
animation-fill-mode: forwards;/**保持當前**/
}
/**動畫執行規則**/
@keyframes one1
{ from{
transform: translateX(0px);
}
to{
transform: translateX(300px);
}
}
.twoview{
width: 400px;
height: 400px;
border-radius: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgrey;
}
.img1{
width: 300px;
height: 300px;
border-radius: 150px;
/**動畫名稱**/
animation-name: one2;
/**動畫時間**/
animation-duration: 8s;
/**動畫執行次數**/
animation-iteration-count: infinite;
/**動畫執行速度**/
animation-timing-function: linear;
}
@keyframes one2{
from{
transform: rotate(0deg) ;
}
to{
transform: rotate(360deg);
}
}
效果如下:
-------------------------------------------------------------------------------------分割線--------------------------------------------------------------------------------------
鴻蒙的定時函數和js的動畫:
任務:采用js的定時函數做一個定時器,每隔一秒,數字減一,到0時定時任務結束,然后跳轉頁面,
定時函數setinterval:方法會不停地循環調用函數,以毫秒為單位,直到使用 clearInterval() 明確停止該函數
clearInterval() 函數的參數即 setInterval() 返回的id值,如下圖:
注意事項:一在執行計時器的倒計時時,通過this.num傳遞給視圖層時,我們發現並沒有執行這個操作.原因出在this這個關鍵字上.this所執行的操作跟它所處的位置有關,現在this處於function這個函數中,所以它代表的是這個函數對象,並不是當前頁面,因此,不會執行this.num--的操作,所以在這里我們需要合理規避關鍵字,做一次關鍵字替換.這樣this就可以引用num,執行減減的操作.
二.在定義動畫的時候,通過引用頁面對象時,鴻蒙給的提示框,我們可以發現動畫規則對應的是一個數組,動畫選項對應的是一個鍵,
代碼展示如下:
js業務邏輯層:
import router from '@system.router';
export default {
data: {
title: 'World',
num:10,
an1:"",
an2:""
},
onInit() {
let that=this;
let aa=setInterval(function () {
that.num--;
if(that.num==0){
//settimeout清楚函數,只執行一次
setTimeout(function(){
router.push({
uri:"pages/categories/categories"
})
})
clearInterval(aa);
}
},1000)
},
onShow(){
this.loadan1();
this.loadan2();
},
loadan1(){
//動畫的規則
let key=[{transform:{translate:'1000px -200px'}},
{transform:{translate:'390px 300px'}}
];
//動畫的選項
let options={
duration:8000,
easing:"linear",
fill:"forwards",
iterations:1 //執次數
}
//通過id作用於topone
this.an1=this.$element("topone").animate(key,options);
//播放動畫
this.an1.play();
},
loadan2(){
//動畫的規則
let key=[{transform:{translate:'-800px 200px'}},
{transform:{translate:'-100px -200px'}}
];
//動畫的選項
let options={
duration:8000,
easing:"linear",
fill:"forwards",
iterations:1 //執次數
}
//通過id作用於topone
this.an2=this.$element("bottomone").animate(key,options);
//播放動畫
this.an2.play();
}
}
視圖層:
<div class="container">
<div class="tv1">
<div class="view1" id="topone">
<text class="txt2">{{"來嘛,吃澀!"}} </text>
</div>
</div>
<div class="tv2">
<div class="yuan">
<text class="txt1">
{{num}}
</text>
</div>
</div>
<div class="tv3">
<div class="view2" id="bottomone">
<text class="txt2">{{"歡迎光顧"}} </text>
</div>
</div>
</div>
css屬性設置:
.container {
width: 100%;
height: 1500px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: skyblue;
}
.tv1{
width: 100%;
height: 20%;
/**background-color: orange;**/
display: flex;
justify-content: center;
align-items: center;
}
.tv2{
width: 100%;
height: 53%;
/**background-color: skyblue;**/
display: flex;
justify-content: center;
align-items: center;
}
.tv3{
width: 100%;
height: 27%;
/**background-color: red;**/
display: flex;
justify-content: center;
align-items: center;
}
.view1{
position: absolute;
top:0px;
left: -250px;
width: 400px;
height: 200px;
border: 1p solid lightgrey;
background-color: black;
opacity: 0.1;
border-radius: 45px;
display: flex;
justify-content: center;
align-items: center;
}
.view2{
position: absolute;
bottom:200px;
left: 250px;
width: 400px;
height: 200px;
border: 1p solid lightgrey;
background-color: black;
opacity: 0.1;
border-radius: 45px;
display: flex;
justify-content: center;
align-items: center;
}
.txt2{
font-size: 60px;
font-weight: bold;
font-family: sans-serif;
color: white;
}
.yuan{
width: 360px;
height: 360px;
border-radius: 180px;
background-color: black;
opacity: 0.1;
display: flex;
justify-content: center;
align-items: center;
}
.txt1{
font-family: sans-serif;
font-weight: bold;
font-size: 300px;
color: white;
}
效果展示:
作者：noutsider
想了解更多內容，請訪問： 51CTO和華為官方戰略合作共建的鴻蒙技術社區https://harmonyos.51cto.com