最近利用業余時間終於把iOS核心動畫高級技巧(https://zsisme.gitbooks.io/ios-/content/chapter1/the-layer-tree.html)看完,對應其中一些知識做了相應的整理,整理為demo(https://github.com/PurpleSweetPotatoes/Layer_learn)。此demo中都是基於教程書籍中的編程示例,並加上了注解以方便各位iOS愛好者學習使用。
在這里利用此教程中的基礎知識做了2個小demo,活動指示器效果和火焰效果。先讓我們看看效果圖
在這里我需要使用到CALayer的兩個子類CAReplicatorLayer和CAEmitterLayer。
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層學習的興趣,如想深入學習請點擊上面鏈接自行學習。另外歡迎大家與筆者一起學習交流,對於只求代碼者一律不回,謝謝!上述有任何錯誤歡迎指正!