今天給大家介紹的是 animation 動畫組件在鴻蒙中的應用。
要實現一個 animation 動畫，需要使用兩個屬性 keyframes 和 animation。
定義動畫在不同階段的狀態.所製作的動畫就根據 keyframes 中定義的規則運動。
它的語法結構如下兩種：
如下圖：
①animation-name：指定選用的動畫的名字（自定義）。需要和 keyframes 中的 name 一致。
②animation-delay：定義動畫是從何時開始播放。
③animation-iteration-count：定義我們的動畫播放的次數，次數可以是 1 次或者無限循環，默認值只播放一次。
④animation-fill-mode：定義動畫模式，即指給定動畫播放前後應用元素的樣式，具體取值有 none，forwards，backwards，both。這個屬性個人感覺說起來比較抽象。
⑤animation-timing-function：時間函數，控制動畫的執行速度。linear 勻速；ease-in 加速；ease-out 減速；ease-in-out 先加速後減速。
⑥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>
.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 的定時函數做一個定時器，每隔一秒，數字減一，到 0 時定時任務結束，然後跳轉頁面。
定時函數 setinterval：方法會不停地循環調用函數，以毫秒為單位，直到使用 clearInterval() 明確停止該函數。
clearInterval() 函數的參數即 setInterval() 返回的 id 值，如下圖：
注意事項：
①在執行計時器的倒計時時，通過 this.num 傳遞給視圖層時，我們發現並沒有執行這個操作。
原因出在 this 這個關鍵字上，this 所執行的操作跟它所處的位置有關，現在 this 處於 function 這個函數中，所以它代表的是這個函數對象，並不是當前頁面。
因此，不會執行 this.num-- 的操作，所以在這裡我們需要合理規避關鍵字，做一次關鍵字替換。
②在定義動畫的時候，通過引用頁面對象時，鴻蒙給的提示框，我們可以發現動畫規則對應的是一個數組，動畫選項對應的是一個鍵。
代碼展示如下：
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>
.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;
}
專注開源技術，共建鴻蒙生態