我們常見的一些像下雪、下雨、火苗這類的動畫,都是可以使用粒子效果來實現。主要使用了類caemitterlayer
和caemittercell
來實現。下面我們將通過實現乙個下雪的效果來說明該類的使用方法和各個屬性的含義。
caemitterlayer 可理解為粒子發射器
建立乙個caemitterlayer
的例項,也就是建立乙個發射器。
cgrect rect = cgrectmake(0, 100, self.view.bounds.size.width, 50);
//建立發射器
caemitterlayer *emitter = [caemitterlayer layer];
emitter.frame = rect;
[self.view.layer addsublayer:emitter];
複製**
設定發射器型別
//設定發射器型別
emitter.emittershape = kcaemitterlayerrectangle;
複製**
這時候就要說一下屬性emittershape
的取值了。有6種取值kcaemitterlayerpoint
、kcaemitterlayerline
、kcaemitterlayerrectangle
、kcaemitterlayercuboid
、kcaemitterlayercircle
和kcaemitterlayersphere
。簡單介紹幾種
其他三種先不說了。 需要注意的,上述所說的區域不是emitterlayer的,而是由屬性emitterposition
和emittersize
來確認的。 下面就來設定這兩個屬性的值,在該例子中,將其設定為和layer一樣了。
emitter.emitterposition = cgpointmake(rect.size.width*0.5, rect.size.height*0.5);
emitter.emittersize = rect.size;
複製**
caemittercell 可理解為我們要發射的例子
和我們之前說過的animation一樣,caemittercell也只不過是我們為你用來展現粒子形態的乙個資料模型。
我們建立乙個粒子,並且將flake.png作為其內容。接下來發射器會建立他的很多各種各樣的拷貝來模擬真實的雪花。
caemittercell *emittercell = [caemittercell emittercell];
emittercell.contents = (__bridge id _nullable)([uiimage imagenamed:@"flake"].cgimage);
複製**
接著新增**
//設定粒子建立速率,也就是每秒產生的個數
emittercell.birthrate = 20;
//設定粒子的生命週期,也就是在螢幕上存在的時間
emittercell.lifetime = 3.5;
//將粒子賦給發射器
emitter.emittercells = @[emittercell];
複製**
需要解釋的是emittercells屬性。我們將emittercells屬性設定為乙個存放著caemittercell型別資料的陣列。同乙個發射器是可以發射不同型別的粒子的。
這回執行程式,我們將看到這樣的效果
我們發現雖然產生了粒子,但是他們並不會運動。所以,繼續努力 新增**
//設定粒子建立速率,也就是每秒產生的個數
emittercell.birthrate = 200;
//設定粒子的生命週期,也就是在螢幕上存在的時間
emittercell.lifetime = 3.5;
//設定粒子宣告週期範圍
emittercell.lifetimerange = 1.0;
//將粒子賦給發射器
emitter.emittercells = @[emittercell];
//設定y軸上的加速度
emittercell.yacceleration = 70.0f;
//設定x軸上的加速度
emittercell.xacceleration = 10.0f;
//設定粒子的初始速度
emittercell.velocity = 20;
//設定粒子的初始角度 如果不設定這個值,我們發現粒子都是水平發射的
emittercell.emissionlongitude = -m_pi_2;
//設定粒子的初始速度範圍 在此例子中範圍是 -180~220
emittercell.velocityrange = 200.0f;
//設定粒子的初始角度範圍 此例子的範圍為 m_pi~0
emittercell.emissionrange = m_pi_2;
//設定粒子的顏色
emittercell.color = [uicolor colorwithred:0.9 green:1.0 blue:1.0 alpha:1.0].cgcolor;
//我們也可以設定隨機顏色,並且限定範圍。因為rgb的值最大為1.0,那red來說,範圍並不會變為0.6~1.3,而是0.6~1.0。相似的,如果是負值,則最小為0
emittercell.redrange = 0.3;
emittercell.greenrange = 0.3;
emittercell.bluerange = 0.3;
//設定粒子的大小及其大小範圍
emittercell.scale = 0.8;
emittercell.scalerange = 0.8;
//設定讓粒子隨著時間推移每秒減小15%,如果設定為正值則每秒增加
emittercell.scalespeed = -0.15;
//設定粒子透明度的變化範圍
emittercell.alpharange = 0.75;
//設定粒子變化速度
emittercell.alphaspeed = -0.15;
複製**
github位址
使用storyboard實現粒子效果
之前沒看過粒子相關實現的方法,只是根據看到的效果,根據自己的想法做的,結果,雖然實現了簡單的效果,但是效果不理想,不夠流暢,也很死板,沒什麼絢麗感。寫此文章,只算是一點總結。具體 和實現過程就不寫了,免得誤導他人,哈哈哈 好了,就看一下簡單的實現思路和最終的效果吧 實現思路 定義乙個粒子類,及其各種...
iOS開發核心動畫之粒子效果
一.示意圖 繪畫出一條線,點選開始有很多粒子繞著線運動,點選重繪消除粒子和線 二.實現 設計思路 自定義乙個view來描述控制器的view,在view載入過程中進行初始化,給view新增手勢 uipangesturerecognizer 將自定義view轉成複製層,建立乙個粒子層,新增到複製層上,並...
jQuery動畫效果總結
jquery動畫效果總結 開發工具與關鍵技術 visualstudio2015 jqueryjquery中的動畫效果 show 顯示 把隱藏起來的元素顯示出來。列 button first on click function at position 45 顯示引數裡的 hide 隱藏 把顯 butt...