多個貝塞爾曲線在同一個animate動畫中的實踐
阿新 • • 發佈:2018-10-31
貝塞爾曲線(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; }