核心動畫——動畫組，核心動畫

核心動畫——動畫組，核心動畫

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

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

動畫組: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

效果如下: