iOS簡單動畫

標籤：

　　　　　　　　　　　　　　　　　　　　　　知識架構

1. CALayer 圖層類
2. CABasicAnimation 基礎動畫
3. CAKeyFrameAnimation 幀動畫
4. CATransition 轉場動畫
5. CAAnimationGroup 動畫組 

 

• 　　layer的基本概念

　　其實UIView之所以能顯示在螢幕上，完全是因為它內部的一個圖層，在建立UIView對象時，UIView內部會自動建立一個圖層（CALyer對象），通過UIView的layer屬性可以訪問這個層。

 

• 　　基本屬性

　　　 Bounds;position;frame;backgroundColor; opacity;cornerRadius;borderWidth; borderColor;shadowOffset; shadowColor; shadowOpacity;

 

　　　　我寫了一些簡單的demo，大家可以看看.......

 

 

//

 

//  ViewController.m

 

//  簡單的動畫

 

//

 

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

 

    

 

//    旋轉放大的方塊

 

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

 

    

 

//    轉場動畫

 

    CATransition *anim = [CATransition animation];

 

//    過度類型

 

    anim.type = @"pageUnCurl";

 

//    動畫過渡方向

 

    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<UITouch *> *)touches withEvent:(UIEvent *)event{

 

    

 

#pragma mark ---- 旋轉放大的動畫

 

    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 = [NSValue valueWithCATransform3D: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<UITouch *> *)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];

 

    // 設定動畫的執行節奏

 

    // kCAMediaTimingFunctionEaseInEaseOut:開始較慢，中間會加速，結束會減速

 

    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

 

    [self.subLayer addAnimation:anim forKey:nil];

 

    

 

#pragma mark ---- 慢慢放大的方塊

 

    CABasicAnimation *anim1 = [CABasicAnimation animation];

 

//   動畫執行是我時候修改屬性

 

    anim1.keyPath = @"bounds";

 

//    起始值

 

//    anim1.fromValue = [NSValue valueWithCGRect:CGRectMake(50, 250, 50, 50)];

 

//    目標值

 

    anim1.toValue = [NSValue valueWithCGRect:CGRectMake(50, 250, 100, 100)];

 

    anim1.delegate = self;

 

    anim1.duration = 5;

 

    [_subLayer2 addAnimation:anim1 forKey:@"animation"];

 

    

 

    /**不刪除動畫，同時儲存動畫最終效果**/

 

    // 動畫結束後自動刪除動畫

 

    anim.removedOnCompletion = NO;

 

    // 預設儲存原來的樣式:設定為使用最新的樣式

 

    anim.fillMode = kCAFillModeForwards;

 

}

 

 

 

- (IBAction)removeAnim:(UIButton *)sender {

 

    [_subLayer2 removeAnimationForKey:@"animation"];

 

}

 

 

 

 

 

 

 

#pragma mark ---- 動畫的代理

 

-(void)animationDidStart:(CAAnimation *)anim{

 

    NSLog(@"%s",__func__);

 

}

 

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

 

    NSLog(@"%s",__func__);

 

}

 

@end

 

 

效果如下：

 

iOS簡單動畫