目標(biāo)——就是純css實(shí)現(xiàn)下面的曲線運(yùn)動(dòng)

image.png

這里是我最后實(shí)現(xiàn)的效果動(dòng)畫：在線視頻實(shí)現(xiàn)效果

直接看所有的代碼；

html代碼

  <div class="ball run_top_right"></div>

css代碼

html{
 background: #ad4e24;
}
//定義球的初始值，位置是絕對(duì)定位；
.ball{
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: absolute;
  bottom: 40px;
  z-index: 10;
  left: 40px;
  background: greenyellow;
}

//定義動(dòng)畫的流程
.run_top_right {
  display: block;
  animation: run-right-right 3s 0.4s 1 linear, run-right-top 3s 0.4s 1 cubic-bezier(.66,.1,1,.41);
  // animation: run-right-right 3s 0.4s 1 linear, run-right-top 3s 0.4s 1 ease-out;
  animation-fill-mode: forwards;
}

//向上走的動(dòng)畫初始及結(jié)尾值
@keyframes run-right-top {
  0% {
    bottom: 40px;
  }

  100% {
    bottom: 800px;
  }
}
//向上右的動(dòng)畫初始及結(jié)尾值
@keyframes run-right-right {
  0% {
    left: 40px;
    transform: scale(0.7);
  }

  100% {
    left: 600px;
    transform: scale(0.45);
  }
}

這里簡(jiǎn)單解釋下：

第一、分解運(yùn)動(dòng)

上圖的曲線運(yùn)動(dòng)進(jìn)行分解
向右：勻速運(yùn)動(dòng)；
向上：加速運(yùn)動(dòng)；（因?yàn)橄蛏系木€越來越陡，意味著速度越來越快，所以在做加速運(yùn)動(dòng)）

第二、實(shí)現(xiàn)代碼解釋

有了對(duì)該運(yùn)動(dòng)的本質(zhì)認(rèn)識(shí)，那么實(shí)現(xiàn)起來就很易如反掌了；

@keyframes run-right-right {
  0% {
    left: 40px;
    transform: scale(0.7);
  }

  100% {
    left: 600px;
    transform: scale(0.45);
  }
}

——@keyframes 是css3的一個(gè)規(guī)則，用來定義一個(gè)運(yùn)動(dòng)的每個(gè)楨的位置，大小顏色等；

然后run-right-right就是這個(gè)動(dòng)畫特性的名字，很好理解；然后0%就是開始的時(shí)候的left值；transform: scale(0.7);變小0.7；時(shí)間到100%時(shí) left值變大到600px的位置，然后變小到0.45；（這里的位置，大小都是相對(duì)于初始設(shè)置的ball類里面的值）

animation: run-right-right 3s 0.4s 1 linear, run-right-top 3s 0.4s 1 cubic-bezier(.66,.1,1,.41);

——這段代碼的意思是動(dòng)畫animation用run-right-right動(dòng)畫和 run-right-top動(dòng)畫，注意我們是同時(shí)引用的兩個(gè)動(dòng)畫；
就是@keyframes 所定義的，然后我們又設(shè)置了一些參數(shù)，逐一解釋：

• 一.第一個(gè)參數(shù)就是引用的動(dòng)畫名字；
• 二，動(dòng)畫持續(xù)時(shí)間3s；
• 三、0.4s是延遲時(shí)間為0.4s，以run_top_right加到ball上面的時(shí)間為準(zhǔn)，延后0.4s;
• 四、1是動(dòng)畫的執(zhí)行次數(shù)是1次；
• 五、cubic-bezier(.66,.1,1,.41) 就是重要的貝塞爾曲線(cubic-bezier)；

實(shí)際上是設(shè)置animation-timing-function的屬性；就是設(shè)置運(yùn)動(dòng)速度的特性屬性；

• 1. linear，就是線性運(yùn)動(dòng)，也就是勻速運(yùn)動(dòng)；
• 2 ease，默認(rèn)。動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢。
• 3.ease-in，ease-out,ease-in-out,就很好記，ease就是慢的意思，ease-in就是慢速開始，就是做加速運(yùn)動(dòng)，ease-out就是減速運(yùn)動(dòng)，ease-in-out就是先加速后減速；當(dāng)然我們也可以設(shè)置成cubic-bezier()值；

貝塞爾曲線在線取值

打開網(wǎng)站就看到如下的界面；你可以自己調(diào)解運(yùn)動(dòng)曲線；我自己選了個(gè)向上做加速的曲線；然后復(fù)制cubic-bezier()值就是可以了。

image.png

因?yàn)檫@里我只需要向上的運(yùn)動(dòng)做變速運(yùn)動(dòng)所以run-right-right 我設(shè)置的是linear，勻速運(yùn)動(dòng)，然后 run-right-top設(shè)置的是cubic-bezier(.66,.1,1,.41)，這樣的加速運(yùn)動(dòng)，這樣得到的運(yùn)動(dòng)路徑就是一條曲線！！曲線的軌跡又run-right-top的cubic-bezier值決定！

  animation-fill-mode: forwards;

animation-fill-mode設(shè)置動(dòng)畫完成后的狀態(tài)；
forwards：當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）。簡(jiǎn)單說就是定格在最后100%的樣子；
backwards：在 animation-delay 所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值（在第一個(gè)關(guān)鍵幀中定義）。就是定格在0%時(shí)候的樣子

完成