CADisplayLink結(jié)合UIBezierPath的神奇妙用

ccccshq 2017-05-23

展開全文

做過iOS動畫的朋友都知道，動畫中一大頭疼之處就是彈性、形變之類扭曲的效果。iOS7開始，我們開始可以直接使用UiView的渲染動畫API實(shí)現(xiàn)簡單的彈性效果。

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);

dampingRatio是阻尼系數(shù)，取值范圍0～1，決定彈性效果的明顯程度；

velocity是初速度。

除此之外，iOS7又出現(xiàn)了一個重量級的家伙：UIKit Dynamics ，可以用很簡單的代碼實(shí)現(xiàn)非常逼真的物理效果。

當(dāng)然，更強(qiáng)大的是Facebook開源的Pop這個介于CAAnimation 和 UIDynamics之間的動畫引擎，使用習(xí)慣和CAAnimation基本別無二致，很方便上手，而且動畫效果非常出色，幀頻非常高，所以看上去的動畫會很連貫順滑。

但是以上要實(shí)現(xiàn)那種很Q彈、形變的效果還是有點(diǎn)困難。知道我同時遇到了CADisplayLink和貝塞爾曲線UIBezierPath。下面就是一些結(jié)合CADisplayLink和UIBezierPath 的案例，并附上了源代碼地址。

Github地址

Github地址
 博文

Github地址

1、什么是CADisplayLink

簡單地說，它就是一個定時器，每隔幾毫秒刷新一次屏幕。

CADisplayLink是一個能讓我們以和屏幕刷新率相同的頻率將內(nèi)容畫到屏幕上的定時器。我們在應(yīng)用中創(chuàng)建一個新的 CADisplayLink 對象，把它添加到一個runloop中，并給它提供一個 target 和 selector 在屏幕刷新的時候調(diào)用。

一但 CADisplayLink 以特定的模式注冊到runloop之后，每當(dāng)屏幕需要刷新的時候，runloop就會調(diào)用CADisplayLink綁定的target上的selector，這時target可以讀到 CADisplayLink 的每次調(diào)用的時間戳，用來準(zhǔn)備下一幀顯示需要的數(shù)據(jù)。例如一個視頻應(yīng)用使用時間戳來計(jì)算下一幀要顯示的視頻數(shù)據(jù)。在UI做動畫的過程中，需要通過時間戳來計(jì)算UI對象在動畫的下一幀要更新的大小等等。

在添加進(jìn)runloop的時候我們應(yīng)該選用高一些的優(yōu)先級，來保證動畫的平滑?？梢栽O(shè)想一下，我們在動畫的過程中，runloop被添加進(jìn)來了一個高優(yōu)先級的任務(wù)，那么，下一次的調(diào)用就會被暫停轉(zhuǎn)而先去執(zhí)行高優(yōu)先級的任務(wù)，然后在接著執(zhí)行CADisplayLink的調(diào)用，從而造成動畫過程的卡頓，使動畫不流暢。

duration屬性:提供了每幀之間的時間，也就是屏幕每次刷新之間的的時間。我們可以使用這個時間來計(jì)算出下一幀要顯示的UI的數(shù)值。但是 duration只是個大概的時間，如果CPU忙于其它計(jì)算，就沒法保證以相同的頻率執(zhí)行屏幕的繪制操作，這樣會跳過幾次調(diào)用回調(diào)方法的機(jī)會。

frameInterval屬性:是可讀可寫的NSInteger型值，標(biāo)識間隔多少幀調(diào)用一次selector 方法，默認(rèn)值是1，即每幀都調(diào)用一次。如果每幀都調(diào)用一次的話，對于iOS設(shè)備來說那刷新頻率就是60HZ也就是每秒60次，如果將 frameInterval 設(shè)為2 那么就會兩幀調(diào)用一次，也就是變成了每秒刷新30次。

pause屬性:控制CADisplayLink的運(yùn)行。當(dāng)我們想結(jié)束一個CADisplayLink的時候，應(yīng)該調(diào)用-(void)invalidate 從runloop中刪除并刪除之前綁定的 target 跟 selector

另外 CADisplayLink 不能被繼承。

CADisplayLink 與 NSTimer 有什么不同?

iOS設(shè)備的屏幕刷新頻率是固定的，CADisplayLink在正常情況下會在每次刷新結(jié)束都被調(diào)用，精確度相當(dāng)高。

NSTimer的精確度就顯得低了點(diǎn)，比如NSTimer的觸發(fā)時間到的時候，runloop如果在阻塞狀態(tài)，觸發(fā)時間就會推遲到下一個runloop周期。并且 NSTimer新增了tolerance屬性，讓用戶可以設(shè)置可以容忍的觸發(fā)的時間的延遲范圍。

CADisplayLink使用場合相對專一，適合做UI的不停重繪，比如自定義動畫引擎或者視頻播放的渲染。

NSTimer的使用范圍要廣泛的多，各種需要單次或者循環(huán)定時處理的任務(wù)都可以使用。

CADisplayLink使用的例子

self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateTextColor)];  
self.displayLink.paused = YES;  
[self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
-(void)updateTextColor{}
- (void)startAnimation{
   self.beginTime = CACurrentMediaTime();
   self.displayLink.paused = NO;
}
- (void)stopAnimation{
  self.displayLink.paused = YES;
  [self.displayLink invalidate];
  self.displayLink = nil;
}

給非UI對象添加動畫效果

我們知道動畫效果就是一個屬性的線性變化，比如 UIView 動畫的 EasyIn EasyOut 。通過數(shù)值按照不同速率的變化我們能生成更接近真實(shí)世界的動畫效果。我們也可以利用這個特性來使一些其他屬性按照我們期望的曲線變化。比如當(dāng)播放視頻時關(guān)掉視頻的聲音我可以通過 CADisplayLink 來實(shí)現(xiàn)一個 EasyOut 的漸出效果：先快速的降低音量，在慢慢的漸變到靜音。

注意

通常來講：iOS設(shè)備的刷新頻率事60HZ也就是每秒60次。那么每一次刷新的時間就是1/60秒大概16.7毫秒。當(dāng)我們的frameInterval 值為1的時候我們需要保證的是 CADisplayLink調(diào)用的target的函數(shù)計(jì)算時間不應(yīng)該大于 16.7否則就會出現(xiàn)嚴(yán)重的丟幀現(xiàn)象。在mac應(yīng)用中我們使用的不是CADisplayLink而是 CVDisplayLink它是基于C接口的用起來配置有些麻煩但是用起來還是很簡單的。

2、Demo

實(shí)現(xiàn)這個形變效果的基本思路就是三句話：用CADisplayLink以其自身毫秒級刷新屏幕的特點(diǎn)去不斷調(diào)用一個方法，這個方法里面畫一條貝塞爾曲線，并且貝塞爾曲線的控制點(diǎn)是個動點(diǎn)。

第一個gif的實(shí)現(xiàn)思路：

首先我們需要兩個輔助視圖，并使用UIView的彈性動畫usingSpringWithDamping 實(shí)現(xiàn)類似下面的效果：

新建 @interface JellyView : UIView

JellyView.m:

- (void)drawRect:(CGRect)rect {

    CGFloat yOffset = 30.0;
    CGFloat width   = CGRectGetWidth(rect);
    CGFloat height  = CGRectGetHeight(rect);

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0.0, yOffset)]; //去設(shè)置初始線段的起點(diǎn)
    CGPoint controlPoint = CGPointMake(width / 2, yOffset + self.sideToCenterDelta);
    [path addQuadCurveToPoint:CGPointMake(width, yOffset) controlPoint:controlPoint];
    [path addLineToPoint:CGPointMake(width, height)];
    [path addLineToPoint:CGPointMake(0.0, height)];
    [path closePath];


    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextAddPath(context, path.CGPath);
    [fillColor set];
    CGContextFillPath(context);

}

上面代碼繪制了一個封閉的貝塞爾曲線，初始時刻封閉曲線是一個四方的矩形，因?yàn)?[path addQuadCurveToPoint:CGPointMake(width, yOffset) controlPoint:controlPoint]; 中的 controlPoint 的縱坐標(biāo)和左右兩個定點(diǎn)縱坐標(biāo)相等。但這其實(shí)是個動點(diǎn)。注意到 CGPoint controlPoint = CGPointMake(width / 2, yOffset + self.sideToCenterDelta); ，我們可以看到動點(diǎn)的縱坐標(biāo)是由yOffset + self.sideToCenterDelta決定的。yOffset是固定的值。self.sideToCenterDelta等于兩個輔助視圖的高度差。最后通過 CADisplayLink 的實(shí)時繪制，我們可以就可以看到屏幕上出現(xiàn)的形變效果了。

ViewController.m：

先創(chuàng)建一個實(shí)例 displayLink.

self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLinkAction:)];  
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

實(shí)現(xiàn)刷新器綁定的方法：

-(void)displayLinkAction:(CADisplayLink *)dis{
    CALayer *sideHelperPresentationLayer   =  (CALayer *)[self.sideHelperView.layer presentationLayer];
    CALayer *centerHelperPresentationLayer =  (CALayer *)[self.centerHelperView.layer presentationLayer];

    CGPoint position = [[centerHelperPresentationLayer valueForKeyPath:@"position"]CGPointValue];

    CGRect centerRect = [[centerHelperPresentationLayer valueForKeyPath:@"frame"]CGRectValue];
    CGRect sideRect = [[sideHelperPresentationLayer valueForKeyPath:@"frame"]CGRectValue];

    NSLog(@"Center:%@",NSStringFromCGRect(centerRect));
    NSLog(@"Side:%@",NSStringFromCGRect(sideRect));

    CGFloat newJellyViewTopConstraint      =  position.y - CGRectGetMaxY(self.view.frame);

    self.jellyViewTopConstraint.constant = newJellyViewTopConstraint;
    [self.jellyView layoutIfNeeded];

    self.jellyView.sideToCenterDelta = centerRect.origin.y - sideRect.origin.y;

}

這里有個地方花了我好長時間，就是我們不能直接通過 self.sideHelperView.layer 和 self.centerHelperView.layer 獲取兩個輔助視圖動畫過程中的變化的坐標(biāo)，得到的是一個恒定的終點(diǎn)狀態(tài)的坐標(biāo)。要想獲得動畫過程中的每個狀態(tài)的坐標(biāo)，我們需要使用layer的 presentationLayer ，并且通過 valueForKeyPath:@"position"的方式實(shí)時獲取動態(tài)坐標(biāo)。

??！最后千萬別忘了調(diào)用 [self.jellyView setNeedsDisplay]; ,否則- (void)drawRect:(CGRect)rect不會called.

第二個gif的實(shí)現(xiàn)思路：

接下來的思路完全大同小異，只不過實(shí)時刷新的定時器從CADisplayLink換成了同樣具有實(shí)時調(diào)用功能的手勢：UIGestureRecognizerStateChanged。

新建 @interface BounceView : UIView

BounceView.m:
先準(zhǔn)備好一個CAShapeLayer,并且填充顏色用來顯示形變的圖形。

- (void) createLine {
    self.verticalLineLayer = [CAShapeLayer layer];
    self.verticalLineLayer.strokeColor = [[UIColor whiteColor] CGColor];
    self.verticalLineLayer.lineWidth = 1.0;
    self.verticalLineLayer.fillColor = [[UIColor whiteColor] CGColor];

    [self.layer addSublayer:self.verticalLineLayer];
}

當(dāng)手勢開始變化的時候，我們讓 self.verticalLineLayer.path 等于變化中的貝塞爾曲線的CGPath,并且把手指的偏移程度的變量CGFloat amountX = [gr translationInView:self].x傳過去;

self.verticalLineLayer.path = [self getLeftLinePathWithAmount:amountX];

貝塞爾曲線的變化代碼如下：

//左邊曲線
- (CGPathRef) getLeftLinePathWithAmount:(CGFloat)amount {
    UIBezierPath *verticalLine = [UIBezierPath bezierPath];
    CGPoint topPoint = CGPointMake(0, 0);
    CGPoint midControlPoint = CGPointMake(amount, self.bounds.size.height/2);
    CGPoint bottomPoint = CGPointMake(0, self.bounds.size.height);

    [verticalLine moveToPoint:topPoint];
    [verticalLine addQuadCurveToPoint:bottomPoint controlPoint:midControlPoint];
    [verticalLine closePath];

    return [verticalLine CGPath];
}

代碼還是大同小異，無非就是改變控制點(diǎn)midControlPoint,只不過這里是改變它的橫坐標(biāo)而已。

3、總結(jié)

歸根結(jié)底，要實(shí)現(xiàn)這個形變的Q彈效果無非就是一個實(shí)時調(diào)用一個繪制貝塞爾曲線的方法，并且這個貝塞爾曲線的控制點(diǎn)是一個動點(diǎn)。那個實(shí)時調(diào)用就有很多實(shí)現(xiàn)的辦法了。各種原生的代理方法，當(dāng)然還包括文中提到了毫秒級刷新器CADisplayLink。期待你能做出更加動感的動畫:)

資料參考：

CADisplayLink http://www.jianshu.com/p/c35a81c3b9eb

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報。

电竞比分网-中国电竞赛事及体育赛事平台