1. 程式人生 > >多個貝塞爾曲線在同一個animate動畫中的實踐

多個貝塞爾曲線在同一個animate動畫中的實踐

貝塞爾曲線(Bézier curve):
又稱貝茲曲線或貝濟埃曲線,是應用於二維圖形應用程式的數學曲線。一般的向量圖形軟體通過它來精確畫出曲線,貝茲曲線由線段與節點組成,節點是可拖動的支點,線段像可伸縮的皮筋,我們在繪圖工具上看到的鋼筆工具就是來做這種向量曲線的。貝塞爾曲線是計算機圖形學中相當重要的引數曲線,在一些比較成熟的點陣圖軟體中也有貝塞爾曲線工具,如PhotoShop等。在Flash4中還沒有完整的曲線工具,而在Flash5裡面已經提供出貝塞爾曲線工具。

貝塞爾模擬:
http://cubic-bezier.com/#.17,.67,.83,.67

動畫要求:
在這裡插入圖片描述

程式碼:

@keyframes followMe {
        0% {transform: translate3d(0, 0, 0);
        transition-timing-function:cubic-bezier(0.26,0.00,0.60,0.20);}
        10% {transform: translate3d(0, -10px, 0);
        transition-timing-function:cubic-bezier(0.40,0.80,0.74,1.00);}
        20% {transform: translate3d(0, 0, 0);
        transition-timing-function:cubic-bezier(0.26,0.00,0.60,0.20);}
        30% {transform: translate3d(0, 0, 0);
        transition-timing-function:cubic-bezier(0.40,0.80,0.74,1.00);}
        40% {transform: translate3d(0, -10px, 0);
        transition-timing-function:cubic-bezier(0.26,0.00,0.60,0.20);}
        50% {transform: translate3d(0, 0, 0);}
        100% {transform: translate3d(0, 0, 0)}
    }
.swiper-follow{
        animation: followMe 2s;
        animation-delay: 3s;
        animation-iteration-count: 2;
    }