知識(shí)架構(gòu)
1、CALayer 圖層類
2、CABasicAnimation 基礎(chǔ)動(dòng)畫
3、CAKeyFrameAnimation 幀動(dòng)畫
4、CATransition 轉(zhuǎn)場(chǎng)動(dòng)畫
5、CAAnimationGroup 動(dòng)畫組?
layer的基本概念
其實(shí)UIView之所以能顯示在屏幕上，完全是因?yàn)樗鼉?nèi)部的一個(gè)圖層，在創(chuàng)建UIView對(duì)象時(shí)，UIView內(nèi)部會(huì)自動(dòng)創(chuàng)建一個(gè)圖層（CALyer對(duì)象），通過UIView的layer屬性可以訪問這個(gè)層。
基本屬性
Bounds;position;frame;backgroundColor; opacity;cornerRadius;borderWidth; borderColor;shadowOffset; shadowColor; shadowOpacity;
我寫了一些簡(jiǎn)單的demo，大家可以看看.......??
// //? ViewController.m
?//? 簡(jiǎn)單的動(dòng)畫//?
//? Created by 李盼盼 on 16/5/16.?
//? Copyright ? 2016年 李盼盼. All rights reserved.?
//? #import "ViewController.h"??
?@interface ViewController ()?
?@property (strong, nonatomic) CALayer *subLayer;
?@property (strong, nonatomic) UIView *redView;
?@property (strong, nonatomic) CALayer *subLayer2;??
?@property (weak, nonatomic) IBOutlet UIImageView *imageView;?
?@property (assign, nonatomic) NSInteger currentIndex;
?@end?
?@implementation ViewController?
?- (void)viewDidLoad {??
? self.view.backgroundColor = [UIColor colorWithRed:234/255.0f green:234/255.0f blue:234/255.0f alpha:1];??
? [super viewDidLoad];?
//? ? 行走的方塊? ? _subLayer = [[CALayer alloc]init];? ??
?_subLayer.frame = CGRectMake(50, 50, 50, 50);?
?? _subLayer.backgroundColor = [UIColor redColor].CGColor;? ? [self.view.layer addSublayer:_subLayer];? ? ?
?//? ? 旋轉(zhuǎn)放大的方塊??
? _redView = [[UIView alloc]initWithFrame:CGRectMake(200, 100, 50, 50)];? ? _redView.backgroundColor = [UIColor yellowColor];??
? [self.view addSubview:_redView];?
? ?//? ? 慢慢放大的方塊? ?
?_subLayer2 = [[CALayer alloc]init];?
?_subLayer2.frame = CGRectMake(50, 250, 50, 50); ? ? ? ? ? _subLayer2.backgroundColor = [UIColor grayColor].CGColor; ? ? [self.view.layer addSublayer:_subLayer2];? ?
?? //? ? 仿真翻頁??
? _imageView.image = [UIImage imageNamed:@"a0.jpg"];? ?
?_currentIndex = 0;? ? ?
?}?
#pragma mark ---- 上一張?
- (IBAction)Last:(UIButton *)sender {? ?
?if (_currentIndex == 0) {? ??
? ? _currentIndex = 12;? ?
?}else{? ? ? ? _currentIndex--;? ?
?}? ? ? ?
?? _imageView.image = [UIImage imageNamed:[NSString? stringWithFormat:@"a%ld.jpg",_currentIndex]];? ?
?? //? ? 轉(zhuǎn)場(chǎng)動(dòng)畫??
? CATransition *anim = [CATransition animation];?
//? ? 過度類型?
?? anim.type = @"pageUnCurl";?
//? ? 動(dòng)畫過渡方向? ?
?anim.subtype = @"fromTop";? ?
?anim.duration = 0.8;? ??
?[_imageView.layer addAnimation:anim forKey:nil]; }
? #pragma mark ---- 下一張?
- (IBAction)next:(UIButton *)sender {
? ? if (_currentIndex == 12) {? ?
?? ? _currentIndex = 0;? ?
?}else{? ? ? ? _currentIndex++;?
?? }? ??
_imageView.image = [UIImage imageNamed:[NSString? stringWithFormat:@"a%ld.jpg",_currentIndex]];??
CATransition *anim = [CATransition animation];? ?
anim.type = @"pageCurl";?
?anim.subtype = kCATransitionFromBottom;? ??
?anim.duration = 0.8;? ??
?[_imageView.layer addAnimation:anim forKey:nil];? ??
? ? ? }
-(void)touchesBegan:(NSSet*)touches withEvent:(UIEvent *)event
{? ??
?#pragma mark ---- 旋轉(zhuǎn)放大的動(dòng)畫 ? ?
CABasicAnimation *rotationAnim = [CABasicAnimation animation];??
//? ? rotationAnim.duration = 2;??
rotationAnim.keyPath = @"transform.rotation.z";??
rotationAnim.toValue = @(3.14);??
rotationAnim.repeatCount = MAXFLOAT;?
CABasicAnimation *scaleAnim = [CABasicAnimation animation];? ? scaleAnim.duration = 2;?
scaleAnim.keyPath = @"transform";? ?
scaleAnim.toValue = [NSValuevalueWithCATransform3D:CATransform3DMakeScale(2, 2, 0)];? ? scaleAnim.repeatCount = MAXFLOAT;?
CAAnimationGroup *group = [CAAnimationGroup animation];? ? group.animations = @[rotationAnim,scaleAnim]; ?
group.duration = 5; ? ?
?group.fillMode = kCAFillModeForwards;?
?group.removedOnCompletion = NO;?
? [_redView.layer addAnimation:group forKey:nil];?
}??
-(void)touchesEnded:(NSSet*)touches withEvent:(UIEvent *)event{
#pragma mark ---- 行走的方塊
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
anim.keyPath = @"position";
anim.duration = 5.0;
NSValue *value = [NSValue valueWithCGPoint:CGPointMake(50, 50)];
NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(50, 100)];
NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(100, 150)];
NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(100, 150)];
NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(50, 50)];
anim.values = @[value,value1,value2,value3,value4,value5];
// 設(shè)置動(dòng)畫的執(zhí)行節(jié)奏
// kCAMediaTimingFunctionEaseInEaseOut:開始較慢，中間會(huì)加速，結(jié)束會(huì)減速
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[self.subLayer addAnimation:anim forKey:nil];
#pragma mark ---- 慢慢放大的方塊
CABasicAnimation *anim1 = [CABasicAnimation animation];
//? 動(dòng)畫執(zhí)行是我時(shí)候修改屬性
anim1.keyPath = @"bounds";
//? ? 起始值
//? ? anim1.fromValue = [NSValue valueWithCGRect:CGRectMake(50, 250, 50, 50)];
//? ? 目標(biāo)值
anim1.toValue = [NSValue valueWithCGRect:CGRectMake(50, 250, 100, 100)];
anim1.delegate = self;
anim1.duration = 5;
[_subLayer2 addAnimation:anim1 forKey:@"animation"];
/**不刪除動(dòng)畫，同時(shí)保存動(dòng)畫最終效果**/
// 動(dòng)畫結(jié)束后自動(dòng)刪除動(dòng)畫
anim.removedOnCompletion = NO;
// 默認(rèn)保存原來的樣式:設(shè)置為使用最新的樣式
anim.fillMode = kCAFillModeForwards;
}
- (IBAction)removeAnim:(UIButton *)sender {
[_subLayer2 removeAnimationForKey:@"animation"];
}
#pragma mark ---- 動(dòng)畫的代理
-(void)animationDidStart:(CAAnimation *)anim{
NSLog(@"%s",__func__);
}
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
NSLog(@"%s",__func__);
}
@end
效果如下：
