Core Animation

Core Anitmation 是什麼??

•Core Animation是一組很是強大的動畫處理API，使用它能作出很是炫麗的動畫效果，並且每每是事半功倍！

(使用以前要導入框架哦)添加QuartzCore.framework和引入對應的框架<QuartzCore/QuartzCore.h>

 

 

那使用Core Animation的基本步驟是什麼??

1.初始化一個動畫對象(CAAnimation)並設置一些動畫相關屬性

2.CALayer中不少屬性均可以經過CAAnimation實現動畫效果，包括：opacity、position、transform、bounds、contents等（能夠在API文檔中搜索：CALayer Animatable Properties）

3.添加動畫對象到層（CALayer）中，開始執行動畫

4.經過調用CALayer的addAnimation:forKey增長動畫到層（CALayer）中，這樣就能觸發動畫了。經過調用removeAnimationForKey能夠中止層中的動畫

5.Core Animation的動畫執行過程都是在後臺操做的，不會阻塞主線程

 

下面咱們如今來介紹一下動畫類的祖宗類----CAAnimation

•CAAnimation是全部動畫對象的父類，負責控制動畫的持續時間和速度，是個抽象類，不能直接使用，應該使用它具體的子類

他都有那些屬性呢?(紅色表明來自CAMediaTiming協議的屬性)

– duration：動畫的持續時間

– repeatCount：重複次數，無限循環能夠設置HUGE_VALF或者MAXFLOAT

– repeatDuration：重複時間

–removedOnCompletion：默認爲YES，表明動畫執行完畢後就從圖層上移除，圖形會恢復到動畫執行前的狀態。若是想讓圖層保持顯示動畫執行後的狀態，那就設置爲NO，同時還要設置fillMode爲kCAFillModeForwards

– fillMode：決定當前對象在非active時間段的行爲。好比動畫開始以前或者動畫結束以後

– beginTime：能夠用來設置動畫延遲執行時間，若想延遲2s，就設置爲CACurrentMediaTime()+2，CACurrentMediaTime()爲圖層的當前時間

–timingFunction：速度控制函數，控制動畫運行的節奏

–delegate：動畫代理

 

下面來看一個demo~

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    
    CGPoint point = [touch locationInView:self.view];
    [self moveToPoint:point];
    
}

-(void)moveToPoint:(CGPoint)point{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"] ;
    // 1.設置目的點
    animation.toValue =[NSValue valueWithCGPoint:point];
    // 2.設置動畫時長
    animation.duration =0.5;
    // 3.設置完成後刪除動畫
    animation.removedOnCompletion = NO;
    // 4.設置模式爲向前填充
    animation.fillMode = kCAFillModeBoth;
    // 5.設置速度模式爲先慢後快
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    // 6.設置開始時長延後1秒
    animation.beginTime  =CACurrentMediaTime() + 1;
    // 7.將動畫添加到Layer上開始執行
    [_redview.layer addAnimation:animation forKey:nil];

}

將上述代碼插入到一視圖控制器中,點屏幕上點擊一下看看效果~

下面看一下fillMode是幹啥的

•fillMode屬性值（要想fillMode有效，最好設置removedOnCompletion = NO）

kCAFillModeRemoved 這個是默認值，也就是說當動畫開始前和動畫結束後，動畫對layer都沒有影響，動畫結束後，layer會恢復到以前的狀態

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

kCAFillModeBackwards 在動畫開始前，只須要將動畫加入了一個layer，layer便當即進入動畫的初始狀態並等待動畫開始。

kCAFillModeBoth 這個其實就是上面兩個的合成，動畫加入以後在開始以前，layer便處於動畫初始狀態，動畫結束後layer保持動畫最後的狀態

 

•速度控制函數(CAMediaTimingFunction)

1.kCAMediaTimingFunctionLinear（線性）：勻速

2.kCAMediaTimingFunctionEaseIn（漸進）：動畫緩慢進入，而後加速離開

3.kCAMediaTimingFunctionEaseOut（漸出）：動畫全速進入，而後減速的到達目的地

4.kCAMediaTimingFunctionEaseInEaseOut（漸進漸出）：動畫緩慢的進入，中間加速，而後減速的到達目的地。這個是默認的動畫行爲。

 

 艹剛纔寫了一個小時的博客不當心讓我給點沒了😢😢

蛋疼屎

算了粘一下代碼把,有時間再寫😢😢

#pragma mark 暫停動畫
- (void)pause
{
    // 記錄中止瞬間的時間偏移量，取出當前動畫定格對應的事件
    CFTimeInterval time = [_redView.layer convertTime:CACurrentMediaTime() fromLayer:nil];
    // 利用圖層的timeOffset記錄暫停的時間偏移量
    _redView.layer.timeOffset = time;
    
    NSLog(@"%f", time);
    
    // 將速度設置爲0，能夠中止動畫
    _redView.layer.speed = 0.0;
}

#pragma mark 繼續動畫
- (void)resume
{
    // 恢復時間量
    CFTimeInterval pauseTime = _redView.layer.timeOffset;
    // 取當前媒體時間
    CFTimeInterval time = CACurrentMediaTime();
    // 計算時間差值
    CFTimeInterval offset = time - pauseTime;
    NSLog(@"%f", offset);
   
    // 設置圖層動畫的起始時間
    _redView.layer.beginTime = offset;
    _redView.layer.timeOffset = 0;
    
    // 恢復速度爲1
    _redView.layer.speed = 1.0;
}

// 用戶擡起手指，纔會執行，一般會針對touchesMove中的處理，作一些收尾工做
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    
}

#pragma mark - 動畫代理方法
- (void)animationDidStart:(CAAnimation *)anim
{
    NSLog(@"動畫開始 %@", NSStringFromCGPoint(_redView.center));
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    CABasicAnimation *animation = (CABasicAnimation *)anim;
    
    // 動畫結束後，修正視圖的位置
    CGPoint point = [animation.toValue CGPointValue];
    _redView.center = point;

    NSLog(@"動畫結束 %@ %@", NSStringFromCGPoint(_redView.center), animation.toValue);
}

#pragma mark - 動畫方法
#pragma mark 旋轉動畫
- (void)rotation
{
    
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    
    _redView.layer.anchorPoint = CGPointMake(1, 1);
    
    // 設置旋轉角度，轉360
    anim.toValue = @(2 * M_PI);
    // 要無限循環轉動，指定一個很是大的數值
    // 對於無限循環的動畫，須要處理動畫累加的問題
    anim.repeatCount = HUGE_VALF;
//    anim.repeatCount = MAXFLOAT;
    
    // 若是要退出到後臺，再次回覆的時候繼續執行動畫，須要設置removedOnCompletion = NO
    anim.removedOnCompletion = NO;
    
    anim.duration = 1.0f;
    
    [_redView.layer addAnimation:anim forKey:@"myRotation"];
}

#pragma mark 縮放動畫
- (void)scale
{
    // 1. 實例化
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    
    // 2. toValue
    anim.toValue = @(2.0);
    anim.repeatCount = 3;
    // 自動反向執行動畫
    anim.autoreverses = YES;
    
    anim.duration = 0.3f;
    
    [_redView.layer addAnimation:anim forKey:nil];
}