編碼的世界 / 優質文選 / 生涯

css3 實現元素 弧線運動

2022年3月30日
-   

如何使用CSS控制元素弧線運動

如上圖動畫效果所示，圓球弧線運動，分析運動：
  • 將小球的運動拆分成X軸和Y軸兩個運動來看，此時X軸的小球是以 （慢—快） 這樣的速度運動；
  • 而Y軸的方向小球是以（快—慢）這樣的速度運動；
  • 結合兩個軸的運動，實現弧線效果

    • 三次貝塞爾（Cubic Bezier）函數


    效果實現
    首先我們能想到的就是將X軸Y軸的位移動畫拆開。但是一個元素的動畫同一時間只能執行一個動畫（最後申明的）。所以我們可以換位思考，用兩個父子元素。給父級元素添加X軸位移動畫，給子元素增加Y軸位移動畫，具體代碼如下：
    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>元素弧線運動</title>
     <style>
     .box{
     width: 400px;
     height: 400px;
     border: 2px solid #ff8800;
     }
     span{
     display: block;
     width: 40px;
     height: 40px;
     border: 1px solid #222;
     animation: center1 2s ease-in forwards;
     }
     span:after{
     content: '';
     display: block;
     width: 40px;
     height: 40px;
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
     border-radius: 20px;
     background: greenyellow;
     animation: center2 2s ease-out forwards;
     }
     @keyframes center1 {
     to{transform: translateX(360px)}
     }
     @keyframes center2 {
     to{transform: translateY(360px)}
     }
     </style>
    </head>
    <body>
    <div class="box">
     <span></span>
    </div>
    </body>
    </html>


    此時還是能比較明顯的看出綠色小球是做的弧線運動。
    擴展：
    此時如果覺得弧線不夠大不夠明顯，我們可以自己調整次貝塞爾（Cubic Bezier）函數的值。根據網站 傳送門 。
  • 選擇ease-in 的曲線效果，此時我們改變 x1,y1的值（將紅色點向右拉）。然後複制此時的cubic-bezier()值。將這個值取代原本span的動畫 ease-in 的位置。
  • 選擇ease-out 的曲線效果，此時我們改變 x2,y2的值（將藍色點向右拉）。然後複制此時的cubic-bezier()值。將這個值取代原本span偽類after 的動畫 ease-out 的位置。
    此時的CSS代碼如下：

    • span{
     display: block;
     width: 40px;
     height: 40px;
     border: 1px solid #222;
     animation: center1 2s cubic-bezier(.66,.01,1,1) forwards;
     }
     span:after{
     content: '';
     display: block;
     width: 40px;
     height: 40px;
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
     border-radius: 20px;
     background: greenyellow;
     animation: center2 2s cubic-bezier(0,0,.36,1) forwards;
     }

    熱門文章