iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
0

利用 Animation 製作美美的動畫吧

上上篇我們介紹了 Animation 的相關設定,在上一篇也實作了字體模糊動畫效果,本篇來試試看經典的球球追隨運動吧!


實作二:經典的球球追隨運動

move

基礎 HTML 的部分:

<div class="container">
 <div class="circle circle1"></div>
 <div class="circle circle2"></div>
 <div class="circle circle3"></div>
 <div class="circle circle4"></div>
 <div class="circle circle5"></div>
 <div class="circle circle6"></div>
</div>

動畫實現解說:

在此實作中,主要使用了 position 設定球球運動的路徑以及 CSS 的 opacity 效果,使跟隨的球球有殘影的感覺。並搭配動畫反向播放及延遲播放就能達成我們想要的效果。

  1. 動畫設定:動畫名稱爲 circlemove,利用 topleft 設定球球運動路徑。記得先要爲每一顆球球設定 position:absolute; 。這邊有個小 tips ,當你維持一定的時間距離(如下範例 25% 的時間距離),運動路徑設定的越遠,則球球運動看起來越快速,透過忽遠忽近的距離設定,可以讓球球運動看起來忽快忽慢。
@keyframes circlemove{
 0%{
  top:50px;
  left:50px;
 }
 25%{
  top:100px;
  left:300px;
 }
 50%{
  top:50px;
  left:500px;
 }
 75%{
  top:100px;
  left:600px;
 }
 100%{
  top:100px;
  left:900px;
 }
}
  1. circle 動畫設定:animation-name: circlemove; 指定要實現的動畫名稱 circlemove,animation-duration:3s; 動畫播放時間爲 3 秒,animation-iteration-count:infinite; 動畫無限次播放,animation-timing-function:linear; 動畫中間過程計算方式使用簡單的線性,animation-direction:alternate; 動畫播放方向爲相反輪播,使球球不斷在路徑上來回。
.circle{
 animation-name: circlemove;
 animation-duration:3s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
 animation-direction:alternate;
}
  1. 個別 circle 動畫設定:個別設定延遲播放,使後續播放的球球追隨前面的球球。而爲了實現整體畫面,要記得個別設定球球的大小及透明度。
.circle1{
 width: 100px;
 height: 100px;
}
.circle2{
 width: 60px;
 height: 60px;
 opacity:0.7;
 animation-delay:0.1s;
}
.circle3{
 width: 50px;
 height: 50px;
 opacity:0.5;
 animation-delay:0.2s;
}
.circle4{
 width: 40px;
 height: 40px;
 opacity:0.3;
 animation-delay:0.3s;
}
.circle5{
 width: 30px;
 height: 30px;
 opacity:0.2;
 animation-delay:0.4s;
}
.circle6{
 width: 20px;
 height: 20px;
 opacity:0.1;
 animation-delay:0.5s;
}

以上是今天的球球追隨運動,試試看吧 /images/emoticon/emoticon12.gif


上一篇
Day16 CSS 動畫 Animation 實作練習(上)
下一篇
Day18 來一個 Google Pie Chart 吧
系列文
前端之 " wow~原來是這樣啊 "30

尚未有邦友留言

立即登入留言