當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

stylie工具轻松搞定css3抛物线动画

發(fā)布時(shí)間：2024/5/14 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 stylie工具轻松搞定css3抛物线动画小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

?自從CSS3引入了動(dòng)畫（transition和@keyframes，還有與之搭配的transform）之后，寫動(dòng)畫也變的越來(lái)多越來(lái)越容易。

可是當(dāng)我們遇到需要利用數(shù)學(xué)公式的復(fù)雜動(dòng)畫時(shí)，卻一籌莫展，只能怪小時(shí)候數(shù)學(xué)沒(méi)學(xué)好（可能是語(yǔ)文老師教的）。那么問(wèn)題來(lái)了，但我拿到要實(shí)現(xiàn)這樣的需求，該如何：

可能我們會(huì)去苦惱，加班熬夜的去補(bǔ)功課去解決，可是這樣真的很費(fèi)勁，那么，我們就來(lái)分析一下如何，快速解決

要想做出這樣的動(dòng)畫，我們必先知道其運(yùn)動(dòng)的原理，不是嗎，鑒于拋物線太多了，這里只對(duì)最簡(jiǎn)單的勻變速曲線運(yùn)動(dòng)做分享，看圖：

好不容易找到了一張小圖，是不是有點(diǎn)讀高中物理課的感覺(jué)

運(yùn)動(dòng)原理可以分解為：水平方向勻速運(yùn)動(dòng)，垂直方向重力加速度運(yùn)動(dòng)

位移途徑為： 1. （水平）s = vt 2.（垂直）h = gt*t/2

假如我們已起拋點(diǎn)為原點(diǎn)，就可以根據(jù)運(yùn)行時(shí)間，計(jì)算出，物體x軸、y軸運(yùn)行的距離，通過(guò)細(xì)時(shí)間間隔，利用css3屬性tanslate3d（x，y，z）進(jìn)行精細(xì)的位移，那么我們就能形成拋物線運(yùn)動(dòng)了，那么我們?cè)囼?yàn)一下。

代碼塊

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>拋物線</title><style>body{background: #8fd5d5;}/******拋物線******/.ball{width:20px;height:20px;background:yellow;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;cursor:pointer}/********水平移動(dòng)距離600 速度 200m/s 重力加速度的運(yùn)動(dòng)速度**************/.tab span{display:inline-block;padding:10px;color:#fff;border:2px solid #59AEAE;}.animg{-webkit-animation:pao 3s linear both;}.animg50{-webkit-animation:pao50 3s linear both;}.animg100{-webkit-animation:pao100 3s linear both;}@-webkit-keyframes pao{0%{-webkit-transform:translate3d(0px,0,0)}10%{-webkit-transform:translate3d(60px,0.45px,0)}20%{-webkit-transform:translate3d(120px,1.8px,0)}30%{-webkit-transform:translate3d(180px,4.05px,0)}40%{-webkit-transform:translate3d(240px,7.2px,0)}50%{-webkit-transform:translate3d(300px,11.25px,0)}60%{-webkit-transform:translate3d(360px,16.2px,0)}70%{-webkit-transform:translate3d(420px,22.05px,0)}80%{-webkit-transform:translate3d(480px,28.8px,0)}90%{-webkit-transform:translate3d(540px,36.45,0)}100%{-webkit-transform:translate3d(600px,45px,0)}}@-webkit-keyframes pao50{0%{-webkit-transform:translate3d(0px,0,0)}10%{-webkit-transform:translate3d(60px,2.25px,0)}20%{-webkit-transform:translate3d(120px,9px,0)}30%{-webkit-transform:translate3d(180px,20.25px,0)}40%{-webkit-transform:translate3d(240px,36px,0)}50%{-webkit-transform:translate3d(300px,56.25px,0)}60%{-webkit-transform:translate3d(360px,81px,0)}70%{-webkit-transform:translate3d(420px,110.25px,0)}80%{-webkit-transform:translate3d(480px,144px,0)}90%{-webkit-transform:translate3d(540px,182.25,0)}100%{-webkit-transform:translate3d(600px,225px,0)}} @-webkit-keyframes pao100{0%{-webkit-transform:translate3d(0px,0,0)}10%{-webkit-transform:translate3d(60px,4.5px,0)}20%{-webkit-transform:translate3d(120px,18px,0)}30%{-webkit-transform:translate3d(180px,40.5px,0)}40%{-webkit-transform:translate3d(240px,72px,0)}50%{-webkit-transform:translate3d(300px,112.5px,0)}60%{-webkit-transform:translate3d(360px,162px,0)}70%{-webkit-transform:translate3d(420px,220.5px,0)}80%{-webkit-transform:translate3d(480px,288px,0)}90%{-webkit-transform:translate3d(540px,364.5,0)}100%{-webkit-transform:translate3d(600px,450px,0)}} .margin{margin-top:450px}</style> </head> <body><h2>拋物線運(yùn)動(dòng)曲線水平移動(dòng)距離600px 速度 200px/s 默認(rèn)垂直方向?yàn)橹亓铀俣?lt;/h2><div class="tab"><span class="sg">垂直方向重力加速度</span><span class="sg50">垂直方向50px/s</span><span class="sg100">垂直方向100px/s</span></div><div class="ball sg"></div><script type="text/javascript">document.querySelector(".sg").onclick =function(){ document.querySelector(".ball").className = "ball animg"}document.querySelector(".sg50").onclick =function(){ document.querySelector(".ball").className = "ball animg50"}document.querySelector(".sg100").onclick =function(){ document.querySelector(".ball").className = "ball animg100"}</script> </body> </html>

在演示效果中，我們發(fā)現(xiàn)，水平方向勻速運(yùn)動(dòng)一定，垂直方向的加速度越大時(shí)，所細(xì)分的做出的動(dòng)畫拋物線效果越不好，得出結(jié)論就是我們?yōu)榱吮３指玫膾佄锞€效果，時(shí)間比例細(xì)分越小，移動(dòng)的距離越精細(xì)，拋物線效果動(dòng)畫越好。可是，問(wèn)題來(lái)了，為了做精細(xì)的拋物動(dòng)畫，給我們帶來(lái)的問(wèn)題，就是要花更多的時(shí)間去計(jì)算精細(xì) 的值，可這非常需要時(shí)間……

為了更好的解決以上的這個(gè)問(wèn)題，分享一款更好用的動(dòng)畫神器—Stylie 用戶界面簡(jiǎn)潔大方，使用簡(jiǎn)單

頁(yè)面打開(kāi)以后很簡(jiǎn)單，藍(lán)色的網(wǎng)格背景上面，兩個(gè)綠色的十字中間連著一根黃色的線，上面有一個(gè)白色小球不斷地從左邊滑動(dòng)到右邊（還稱不上滾動(dòng)），下面有一個(gè)進(jìn)度條，右邊有一個(gè)操作面板。

Keyframes標(biāo)簽設(shè)置面板：

1.第一個(gè)0ms處表示起點(diǎn)相關(guān)信息，第二個(gè)2000ms處表示2000ms處斷點(diǎn)的相關(guān)信息；

2.第一個(gè)0ms處表示起點(diǎn)相關(guān)信息，第二個(gè)2000ms處表示2000ms處斷點(diǎn)的相關(guān)信息；

3.X和Y分別表示橫坐標(biāo)及縱坐標(biāo)（其實(shí)你也可以用鼠標(biāo)去拖綠色的十字…）；

4.S表示縮放倍率（默認(rèn)是1）；

5.rX、rY、rZ分別表示物體沿X、Y、Z軸的旋轉(zhuǎn)角度（具體哪個(gè)軸是哪個(gè)可以在上面填寫數(shù)字自己嘗試，出于便于觀察的理由建議填寫180。當(dāng)然你也可以按住Shift鍵，拖，但是我覺(jué)得這樣很不好控制…）；

6.linear表示線性的…這一欄是自定義緩動(dòng)曲線（Easing curves）

Motion是自定義緩動(dòng)曲線運(yùn)動(dòng)軌跡，可以在Keyframes選擇里面添加你自定義的運(yùn)動(dòng)軌跡。

我覺(jué)得這個(gè)神器最牛逼的功能在于，緩動(dòng)曲線功能所有的數(shù)值，都！可！以！定義緩動(dòng)，讓我們輕松完成拋物線運(yùn)動(dòng)動(dòng)畫。

神器地址：http://jeremyckahn.github.io/stylie/

轉(zhuǎn)載于:https://www.cnblogs.com/pingfan1990/p/4528603.html

總結(jié)

以上是生活随笔為你收集整理的stylie工具轻松搞定css3抛物线动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。