核心動畫——動畫組

之前介紹了核心動畫之彈簧動畫，有關於核心動畫的結構圖大家都還記得吧

所以說動畫組屬於核心動畫，它的初始化和核心動畫初始化的方法一樣。那麼我就簡單的介紹一下動畫組

動畫組:CAAnimationGroup 可以讓動畫同時執行

動畫組中設置的時間控制類屬性會影響到動畫組內部動畫的時間控制類屬性

在動畫組中去統一設置媒體時間控制類

 媒體控制時間的屬性

     1.CAMediaTiming媒體時間類協議

     核心動畫關於時間類的控制 是遵守了CAMediaTiming中的協議內容

     1.beginTime 動畫開始的時間 預設為0

     2.duration 動畫的持續時間 預設為0 持續時間 受速度的影響 實際的動畫完成時間 = 持續時間/速度

     3.speed 動畫播放的速度 預設為1 速度設置成0 可以暫停動畫

     speed 2秒  duration 60秒 動畫真正播放完成的時間 30秒

     4.timeOffset 動畫播放時間的偏移量

     5.repeatCount 動畫的迴圈次數 預設是0 只播放一次

     6.repeatDuration 動畫迴圈的持續時間  只能設置其中的一個屬性  repeatCount/repeatDuration

     7.autoreverses  是否以動畫的形式 返回到播放之前的狀態

     8.fillMode 設置當前對象在非活動時間段的狀態

     要想fillMode有效 需設置removedOnCompletion = NO

     kCAFillModeForwards 當動畫結束後，layer會一直保持著動畫最後的狀態

     kCAFillModeBackwards 立即進入動畫的初始狀態並等待動畫開始

     kCAFillModeBoth 動畫加入後開始之前 layer處於動畫初始狀態 動畫結束後layer保持動畫最後的狀態

     kCAFillModeRemoved 預設值 動畫結束後 layer會恢復到之前的狀態

 動畫組主要的屬性介紹:

    animations 動畫的數組 各種動畫

具體操作如下:

#import "ViewController.h"

@interface ViewController ()

//花瓣
@property (nonatomic, strong) CALayer *petalLayer;
//背景
@property (nonatomic, strong) CALayer *layer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];
    [self.view.layer addSublayer:self.layer];
    [self.view.layer addSublayer:self.petalLayer];
    
}

//點擊掉落 讓圖層移動的動畫  返回的是:移動的動畫 endPoint:終點
- (CAKeyframeAnimation *)move:(CGPoint)endPoint{
    CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    UIBezierPath *path = [UIBezierPath bezierPath];
    //設置起始點
    [path moveToPoint:self.petalLayer.position];
    //畫曲線的方法addCurveToPoint:終點 controlPoint1:<#(CGPoint)#> controlPoint2:<#(CGPoint)#>
    [path addCurveToPoint:endPoint controlPoint1:CGPointMake(50, 150) controlPoint2:CGPointMake(300, 250)];
    keyFrame.path = path.CGPath;
    //節奏動畫不是勻速 kCAAnimationPaced
    keyFrame.calculationMode = kCAAnimationCubicPaced;
    return keyFrame;
}
/*
 旋轉動畫
 1.使用基礎動畫，其中的一個變化
 2.選擇哪一個屬性transform.rotation.z
 可以通過改變animationWithKeyPath來改變動畫的屬性：
     transform.scale = 比例轉換
     transform.scale.x
     transform.scale.y
     transform.rotation.z
     opacity = 透明度
     zPosition
     backgroundColor 背景顏色
     cornerRadius 柺角
     borderWidth 邊框的寬度
     bounds
     contents 內容
     contentsRect
     frame
     hidden
     masksToBounds
     position
     shadowColor
     shadowOffset
     shadowOpacity
     shadowRadius
 */

//旋轉動畫 讓花版掉落的時候自動旋轉
- (CABasicAnimation *)rotation{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    //M_PI = 3.1415926....
    //M_PI_2 = 一半    M_PI_4就是四分之一
    animation.fromValue = @(M_PI_4);
    animation.toValue = @(M_PI_4*4);
    //一直在旋轉
    //animation.repeatCount = HUGE;
    //以動畫的形式讓他回去
    //animation.autoreverses = YES;
    return animation;
}


//花瓣掉落的時候讓它慢慢放大 放大動畫
- (CABasicAnimation *)moveToBig{
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds"];
    animation.fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, self.petalLayer.bounds.size.width, self.petalLayer.bounds.size.height)];
    animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, self.petalLayer.bounds.size.width*1.3, self.petalLayer.bounds.size.height*1.3)];
    return animation;
}


- (void)animationGroup:(CGPoint)endPoint{
    //初始化
    CAAnimationGroup *group = [CAAnimationGroup animation];
    //把想要同時運行的動畫添加到動畫組中
    group.animations = @[[self rotation],[self move:endPoint],[self moveToBig]];
    //動畫組完成的整體時間
    group.duration = 5;
    //不想讓花瓣掉落停止時回到原來的位置 設置它的fillMode
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeBoth;
    [self.petalLayer addAnimation:group forKey:@""];
    
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    [self animationGroup:[[touches anyObject] locationInView:self.view]];
}

- (CALayer *)petalLayer{
    if (_petalLayer) {
        return _petalLayer;
    }
    _petalLayer = [CALayer layer];
    _petalLayer.position = CGPointMake(self.view.center.x, 50);
    UIImage *image =[UIImage imageNamed:@"2"];
    _petalLayer.bounds = CGRectMake(0, 0, image.size.width, image.size.height);
    _petalLayer.contents = (id)image.CGImage;
    
    return _petalLayer;
}

- (CALayer *)layer{
    if (_layer) {
        return _layer;
    }
    _layer = [CALayer layer];
    _layer.position = CGPointMake(self.view.center.x, self.view.center.y+100);
    UIImage *image =[UIImage imageNamed:@"4"];
    _layer.bounds = CGRectMake(0, 0, image.size.width/2, image.size.height/2);
    _layer.contents = (id)image.CGImage;
    
    return _layer;
}

@end

效果如下: