iOS核心動畫學習整理


  最近利用業余時間終於把iOS核心動畫高級技巧(https://zsisme.gitbooks.io/ios-/content/chapter1/the-layer-tree.html)看完,對應其中一些知識做了相應的整理,整理為demo(https://github.com/PurpleSweetPotatoes/Layer_learn)。此demo中都是基於教程書籍中的編程示例,並加上了注解以方便各位iOS愛好者學習使用。

  在這里利用此教程中的基礎知識做了2個小demo,活動指示器效果和火焰效果。先讓我們看看效果圖

  

  在這里我需要使用到CALayer的兩個子類CAReplicatorLayerCAEmitterLayer

  1.CAReplicatorLayer的目的是為了高效生成許多相似的圖層。它會繪制一個或多個圖層的子圖層,並在每個復制體上應用不同的變換。此處直接搬出運行代碼

 1 //需要實例化的個數
 2         int numofInstance = 10;
 3         //動畫時長
 4         CGFloat duration = 1.0f;
 5         //創建repelicator對象
 6         CAReplicatorLayer *repelicator = [CAReplicatorLayer layer];
 7         //設置其位置
 8         repelicator.frame = self.view.bounds;
 9         //需要生成多少個相同實例
10         repelicator.instanceCount = numofInstance;
11         //代表實例生成的延時時間;
12         repelicator.instanceDelay = duration / numofInstance;
13         //設置每個實例的變換樣式
14         repelicator.instanceTransform = CATransform3DMakeRotation(M_PI * 2.0 / 10.0, 0, 0, 1);
15         
16         //創建repelicator對象的子圖層,repelicator會利用此子圖層進行高效復制。並繪制到自身圖層上
17         CALayer *layer = [CALayer layer];
18         //設置子圖層的大小位置
19         layer.frame = CGRectMake(0, 0, 10, 10);
20         //子圖層的仿射變換是基於repelicator圖層的錨點,因此這里將子圖層的位置擺放到此錨點附近。
21         CGPoint point = [repelicator convertPoint:repelicator.position fromLayer:self.view.layer];
22         layer.position = CGPointMake(point.x, point.y - 20);
23         //設置子圖層的背景色
24         layer.backgroundColor = [UIColor whiteColor].CGColor;
25         //將子圖層切圓
26         layer.cornerRadius = 5;
27         //將子圖層添加到repelicator上
28         [repelicator addSublayer:layer];
29         //對layer進行動畫設置
30         CABasicAnimation *animaiton = [CABasicAnimation animation];
31         //設置動畫所關聯的路徑屬性
32         animaiton.keyPath = @"transform.scale";
33         //設置動畫起始和終結的動畫值
34         animaiton.fromValue = @(1);
35         animaiton.toValue = @(0.1);
36         //設置動畫時間
37         animaiton.duration = duration;
38         //設置動畫次數
39         animaiton.repeatCount = INT_MAX;
40         //添加動畫
41         [layer addAnimation:animaiton forKey:nil];

  2.CAEmitterLayer是一個高性能的粒子引擎,被用來創建實時例子動畫如:煙霧,火,雨等等這些效果。CAEmitterLayer看上去像是許多CAEmitterCell的容器,這些CAEmitterCell定義了一個粒子效果。下面直接上代碼

 1 - (CAEmitterLayer *)emitter {
 2     if (_emitter == nil) {
 3         //創建粒子圖層容器
 4         CAEmitterLayer *layer = [CAEmitterLayer layer];
 5         //設置發射器位置
 6         layer.emitterPosition = self.view.center;
 7         //設置發射器范圍
 8         layer.emitterSize = CGSizeMake(50, 30);
 9         //設置發射器形狀
10         layer.emitterShape = kCAEmitterLayerLine;
11         //設置發射器發射模式
12         layer.emitterMode = kCAEmitterLayerSurface;
13         //設置發射器的渲染模式
14         layer.renderMode = kCAEmitterLayerAdditive;
15     
16         _emitter = layer;
17     }
18     return _emitter;
19 }

接着創建CAEmitterCell粒子圖層並放入CAEmitterLayer容器中

 1 //創建粒子
 2     CAEmitterCell *cell = [CAEmitterCell emitterCell];
 3     //配置粒子圖像
 4     cell.contents = (__bridge id)[UIImage imageNamed:@"火焰"].CGImage;
 5     //粒子每秒發射個數
 6     cell.birthRate = 400;
 7     //粒子生命周期
 8     cell.lifetime = 3.0;
 9     //粒子旋轉角度
10     cell.spin = M_PI / 2;
11     //粒子顏色
12     cell.color = [UIColor colorWithRed:1.000 green:0.681 blue:0.178 alpha:1.000].CGColor;
13     //粒子衰減過程
14     cell.alphaSpeed -= 1;
15     //粒子發射速度
16     cell.velocity = 40;
17     //粒子發射速度可變范圍,如果此處設置為10 則速度值在30 - 50 之類變動
18     cell.velocityRange = 10;
19     //粒子縮放比例
20     cell.scaleSpeed -= 1;
21     //cell發射角度范圍
22     cell.emissionLongitude =  0;
23     //cell發射偏轉角度
24     cell.emissionRange = M_PI / 4;
25     //將配置好的粒子放入容器中
26     self.emitter.emitterCells = @[cell];

  此處編寫這兩種效果圖旨在引起各位iOS愛好者的對動畫和layer層學習的興趣,如想深入學習請點擊上面鏈接自行學習。另外歡迎大家與筆者一起學習交流,對於只求代碼者一律不回,謝謝!上述有任何錯誤歡迎指正!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM