如何使用CAShapeLayer使我的UIBezierPath动画？

Question

我正在尝试为UIBezierPath制作动画,我已经安装了CAShapeLayer来尝试这样做.不幸的是,动画不起作用,我不确定任何层是否有任何影响(因为代码在我拥有图层之前做了同样的事情).

这是实际的代码 - 会喜欢任何帮助.Draw2D是UIView的一个实现,它嵌入在UIViewController中.所有绘图都在Draw2D类中进行.对[_helper createDrawing ...]的调用只是用点填充_uipath变量.

Draw2D.h定义了以下属性:

#define defaultPointCount ((int) 25)

@property Draw2DHelper *helper;
@property drawingTypes drawingType;
@property int graphPoints;
@property UIBezierPath *uipath;

@property CALayer *animationLayer;
@property CAShapeLayer *pathLayer;

- (void)refreshRect:(CGRect)rect;

以下是实际实施:

//
//  Draw2D.m
//  Draw2D
//
//  Created by Marina on 2/19/13.
//  Copyright (c) 2013 Marina. All rights reserved.
//

#import "Draw2D.h"
#import"Draw2DHelper.h"
#include <stdlib.h>
#import "Foundation/Foundation.h"
#import <QuartzCore/QuartzCore.h>

int MAX_WIDTH;
int MAX_HEIGHT;

@implementation Draw2D

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code

        if (self.pathLayer != nil) {
            [self.pathLayer removeFromSuperlayer];
            self.pathLayer = nil;
        }

        self.animationLayer = [CALayer layer];
        self.animationLayer.frame = self.bounds;
        [self.layer addSublayer:self.animationLayer];

        CAShapeLayer *l_pathLayer = [CAShapeLayer layer];
        l_pathLayer.frame = self.frame;
        l_pathLayer.bounds = self.bounds;
        l_pathLayer.geometryFlipped = YES;
        l_pathLayer.path = _uipath.CGPath;
        l_pathLayer.strokeColor = [[UIColor grayColor] CGColor];
        l_pathLayer.fillColor = nil;
        l_pathLayer.lineWidth = 1.5f;
        l_pathLayer.lineJoin = kCALineJoinBevel;

        [self.animationLayer addSublayer:l_pathLayer];
        self.pathLayer = l_pathLayer;
        [self.layer addSublayer:l_pathLayer];
    }
    return self;
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect :(int) points :(drawingTypes) type //:(Boolean) initial
{
    //CGRect bounds = [[UIScreen mainScreen] bounds];
    CGRect appframe= [[UIScreen mainScreen] applicationFrame];
    CGContextRef context = UIGraphicsGetCurrentContext();
    _helper = [[Draw2DHelper alloc ] initWithBounds :appframe.size.width  :appframe.size.height :type];

    CGPoint startPoint = [_helper generatePoint] ;

    [_uipath moveToPoint:startPoint];
    [_uipath setLineWidth: 1.5];

    CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor);

    CGPoint center = CGPointMake(self.center.y, self.center.x) ;
    [_helper createDrawing :type :_uipath :( (points>0) ? points : defaultPointCount) :center];
    self.pathLayer.path = (__bridge CGPathRef)(_uipath);
    [_uipath stroke];

    [self startAnimation]; 
}

- (void) startAnimation {
    [self.pathLayer removeAllAnimations];

    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 3.0;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    [self.pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];

}

- (void)drawRect:(CGRect)rect {
    if (_uipath == NULL)
        _uipath = [[UIBezierPath alloc] init];
    else
        [_uipath removeAllPoints];

    [self drawRect:rect  :self.graphPoints :self.drawingType ];
}

- (void)refreshRect:(CGRect)rect {
    [self setNeedsDisplay];
}

@end

我知道可能有一个明显的原因,为什么路径不是动画,因为它正在绘制(而不是立即显示现在发生的事情),但我一直盯着这个东西,我只是不这样做看见.

此外,如果有人可以推荐CAShapeLayers和动画的基本入门,我会很感激.没有出现任何足够好的东西.

提前致谢.

Answer 1

看起来你正试图在内部drawRect(间接地,至少)进行动画制作.这没有多大意义.你没有在里面制作动画drawRect.该drawRect被用于绘制单个帧.某些动画是通过计时器或CADisplayLink重复调用setNeedsDisplay(这将导致iOS调用您的drawRect)完成的,在此期间您可以绘制显示该点动画进度的单帧.但你根本就没有drawRect发起任何动画.

但是,由于您使用的核心动画的CAShapeLayer和CABasicAnimation,你并不需要一个自定义drawRect的.Quartz的核心动画只为您照顾一切.例如,这是我的动画绘制动画的代码UIBezierPath:

#import <QuartzCore/QuartzCore.h>

@interface View ()
@property (nonatomic, weak) CAShapeLayer *pathLayer;
@end

@implementation View

/*
// I'm not doing anything here, so I can comment this out
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}
*/

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
}
*/

// It doesn't matter what my path is. I could make it anything I wanted.

- (UIBezierPath *)samplePath
{
    UIBezierPath *path = [UIBezierPath bezierPath];

    // build the path here

    return path;
}

- (void)startAnimation
{
    if (self.pathLayer == nil)
    {
        CAShapeLayer *shapeLayer = [CAShapeLayer layer];

        shapeLayer.path = [[self samplePath] CGPath];
        shapeLayer.strokeColor = [[UIColor grayColor] CGColor];
        shapeLayer.fillColor = nil;
        shapeLayer.lineWidth = 1.5f;
        shapeLayer.lineJoin = kCALineJoinBevel;

        [self.layer addSublayer:shapeLayer];

        self.pathLayer = shapeLayer;
    }

    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 3.0;
    pathAnimation.fromValue = @(0.0f);
    pathAnimation.toValue = @(1.0f);
    [self.pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
}

@end

然后,当我想开始绘制动画时,我只是调用我的startAnimation方法.我可能根本不需要一个UIView子类来处理这么简单的事情,因为我实际上并没有改变任何UIView行为.肯定有时候UIView使用自定义drawRect实现进行子类化,但这里不需要它.

你问了一些参考资料:

• 如果你还没有看到,我可能会先回顾一下Apple的核心动画编程指南.
• 对我来说,当我通过Mike Nachbaur的核心动画教程第4部分,实际上从头开始复制他的演示时,这一切都已落实到位.显然,您也可以查看第1部分到第3部分.