jQuery中的animate()
方法提供了一種動態改變元素CSS屬性的方式,使得頁面的動態效果更加生動,其中還有一種極具技術含量的應用就是橢圓動畫。
橢圓動畫的實現原理是基于CSS3的transform
屬性,其可以通過不同的參數實現元素不同方向的旋轉、縮放、移動等效果,那么讓我們看一下這個使用jQuery實現橢圓動畫的案例:
var a = 200, b = 100, angle = 0;
setInterval(function() {
var x = a * Math.cos(angle * Math.PI / 180);
var y = b * Math.sin(angle * Math.PI / 180);
$("#box").animate({left: x + 400, top: y + 200}, 1000);
angle++;
}, 50);
這段代碼中實現了一個橢圓動畫,其中a
和b
分別表示橢圓的長半軸和短半軸,angle
表示橢圓當前的旋轉角度。
每隔50
毫秒通過setInterval
函數調用一個匿名函數,該匿名函數先計算當前橢圓上某一個點的坐標(即利用參數方程計算),然后通過animate()
方法將box
元素移動到該點所在位置,時間為1000
毫秒(1秒)。
在整個過程中隨著angle
的變化,就可以實現不同方向、速度的橢圓旋轉效果。