文章目录
  1. 1. CADisplayLink是什么
  2. 2. Demo

CADisplayLink是什么

根据Apple的doc:

A CADisplayLink object is a timer object that allows your application to synchronize its drawing to the refresh rate of the display.

比起NSTimer,CADisplayLink可以确保系统渲染每一帧的时候我们的方法都被调用,从而保证了动画的流畅性。

Demo

我们希望在animate一个view的时候给它加上果冻效果:

1

我们会把所有的逻辑都封装到一个BlockView里,在这个view里首先申明一个property:

@property (strong, nonatomic) CADisplayLink *displayLink;

在动画开始的时候,初始化displayLink,指定tick方法:

- (void)startAnimation
{
    if (self.displayLink == nil) {
        self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(tick:)];

        [self.displayLink addToRunLoop:[NSRunLoop currentRunLoop]
                               forMode:NSDefaultRunLoopMode];
    }
}

动画结束的时候invalidate displayLink:

- (void)completeAnimation
{
    [self.displayLink invalidate];
    self.displayLink = nil;
}

每个tick中,我们需要根据当前的位置重绘边缘,所以只需调用setNeedsDisplay即可:

- (void)tick:(CADisplayLink *)displayLink
{
    [self setNeedsDisplay];
}

在drawRect中,我们计算当前动画的progress,然后进行绘制。需要注意的是,我们需要通过self.layer.presentationLayer来获取动画过程中的位置信息。

- (void)drawRect:(CGRect)rect
{
    CALayer *layer = self.layer.presentationLayer;

    CGFloat progress = 1 - (layer.position.y - self.to) / (self.from - self.to);

    CGFloat height = CGRectGetHeight(rect);
    CGFloat deltaHeight = height / 2 * (0.5 - fabs(progress - 0.5));

    CGPoint topLeft = CGPointMake(0, deltaHeight);
    CGPoint topRight = CGPointMake(CGRectGetWidth(rect), deltaHeight);
    CGPoint bottomLeft = CGPointMake(0, height);
    CGPoint bottomRight = CGPointMake(CGRectGetWidth(rect), height);

    UIBezierPath* path = [UIBezierPath bezierPath];
    [[UIColor blueColor] setFill];
    [path moveToPoint:topLeft];
    [path addQuadCurveToPoint:topRight controlPoint:CGPointMake(CGRectGetMidX(rect), 0)];
    [path addLineToPoint:bottomRight];
    [path addQuadCurveToPoint:bottomLeft controlPoint:CGPointMake(CGRectGetMidX(rect), height - deltaHeight)];
    [path closePath];
    [path fill];
}

最后,我们只需要这样animate这个BlockView:

[self.blockView startAnimationFrom:from to:to];
[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.85 initialSpringVelocity:0 options:0 animations:^{
    self.blockView.center = CGPointMake(self.blockView.center.x, to);
} completion:^(BOOL finished) {
    [self.blockView completeAnimation];
}];

Demo Project:https://github.com/Glow-Inc/CADisplayLinkDemo

原文:使用CADisplayLink实现果冻效果动画


本文出处程序员头条:http://www.iswifting.com/2015/07/30/using-cadisplaylink-animation/
转载请在开头注明本文出处。

欢迎关注本站微信公众号:为程序员提供最优质的博文、最精彩的讨论、最实用的开发资源;提供最新最全的编程学习资料:PHP、Objective-C、Java、Swift、C/C++函数库、.NET Framework类库、J2SE API等等.并不定期奉送各种福利.
微信公众号猿圈:CodePush

文章目录
  1. 1. CADisplayLink是什么
  2. 2. Demo