iOS 动画初步

Posted 2020-07-21

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     }];