iOS 動畫初步

iOS 動畫初步

1. CALayer的使用 (圖層) 屬於QuartzCore.framework 框架 跨平臺

咱們在開發中使用的UIKit.framework裏面的控件之因此能夠看見，主要是因爲他擁有了CALayer。

 1   //-------------------------------------------------------------------------
 2     // 圖層 部分屬性
 3     
 4     // shadow 是否透明
 5     self.myView.layer.shadowOpacity = 1.0f;
 6     
 7     // shadow 顏色
 8     self.myView.layer.shadowColor = [UIColor redColor].CGColor;
 9     
10     // shadow 半徑
11     self.myView.layer.shadowRadius = 10.0f;
12     
13     // layer 的圓角半徑
14     self.myView.layer.cornerRadius = 5;
15     
16     // layer 邊框顏色
17     _myView.layer.borderColor = [UIColor whiteColor].CGColor;
18     
19     // layer 邊框半徑
20     _myView.layer.borderWidth = 10;
21     //-------------------------------------------------------------------------

CALayer在設置部分屬性時，有動畫效果，（隱試動畫）有  Animatable 相關的註釋便自帶了隱試動畫

如：

1 /* The shadow offset. Defaults to (0, -3). Animatable. */
2 
3 @property CGSize shadowOffset;
4 
5 /* The blur radius used to create the shadow. Defaults to 3. Animatable. */
6 
7 @property CGFloat shadowRadius;

CALayer的使用

 1     CALayer *lay = [CALayer layer];
 2     lay.backgroundColor = [UIColor redColor].CGColor;
 3     lay.shadowOpacity = 1.0;
 4     lay.shadowColor = [UIColor whiteColor].CGColor;
 5     lay.shadowRadius = 10;
 6     lay.cornerRadius = 5;
 7     lay.masksToBounds = YES;
 8     [self.view.layer addSublayer:lay];
 9     
10     // 設置image
11     lay.contents = (__bridge id _Nullable)([UIImage imageNamed:@"111"].CGImage);

CALayerd的動畫 （使用CATransform3D，通常不用此方法作動畫）

 1     // 旋轉 rotation
 2     [UIView animateWithDuration:0.3 animations:^{
 3         _layer.transform = CATransform3DMakeRotation(M_PI_4, 0, 0, 0);
 4         
 5         // KVC
 6         [_layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 0, 0, 0)] forKeyPath:@"transform"];
 7 
 8         // KVC transform.rotation
 9         [_layer setValue:@M_PI forKeyPath:@"transform.rotation"];
10 
11     }];
12     
13     // 放大 縮小 Scale
14     [UIView animateWithDuration:0.3 animations:^{
15         
16         _layer.transform = CATransform3DMakeScale(0, 0, 0);
17         
18         // KVC
19         [_layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0, 0, 0)] forKeyPath:@"transform"];
20     }];
21     
22     // 平移 Translation
23     [UIView animateWithDuration:0.3 animations:^{
24 
25         _layer.transform = CATransform3DMakeTranslation(0, 0, 0);
26 
27         // KVC
28         [_layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 0, 0)] forKeyPath:@"transform"];
29         
30         [_layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 0, 0)] forKeyPath:@"transform.x"];
31 
32     }];
33     
34     // ... CATransform3DMakeAffineTransform
35     [UIView animateWithDuration:0.3 animations:^{
36         
37         _layer.transform = CATransform3DMakeAffineTransform(CGAffineTransformMake(0, 0, 0, 0, 0, 0));
38         
39         // KVC
40         [_layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeAffineTransform(CGAffineTransformMake(0, 0, 0, 0, 0, 0))] forKeyPath:@"transform"];
41     }];