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

Posted 2023-03-13

【中文标题】如何使用 CAShapeLayer 使我的 UIBezierPath 动画？

【英文标题】：How to make my UIBezierPath animated with CAShapeLayer?

【发布时间】：2013-03-10 04:30:45

【问题描述】：

我正在尝试为 UIBezierPath 设置动画，并且我已经安装了 CAShapeLayer 来尝试执行此操作。不幸的是，动画不起作用，我不确定任何图层是否有任何影响（因为代码正在做与我拥有图层之前相同的事情）。

这是实际的代码 - 希望能提供任何帮助。 Draw2D 是嵌入在 UIViewController 中的 UIView 的实现。所有的绘图都发生在 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 和一般动画的基本入门，我将不胜感激。还没有发现任何足够好的。

提前致谢。

【问题讨论】：

关于动画，我推荐我自己的解释：apeth.com/iosBook/ch17.html。它解释了我在其他任何地方都没有看到的解释。

谢谢！会去看看

【参考方案1】：

您似乎正在尝试在drawRect 内制作动画（至少是间接的）。这不太合理。您不在drawRect 内设置动画。 drawRect 用于绘制单帧。某些动画是使用计时器或CADisplayLink 完成的，它重复调用setNeedsDisplay（这将导致iOS 调用您的drawRect），在此期间您可能会绘制显示该点动画进度的单帧。但是您根本没有 drawRect 自己启动任何动画。

但是，由于您使用的是 Core Animation 的 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 行为。肯定有很多时候，您使用自定义的 drawRect 实现子类化 UIView，但这里不需要。

您要求提供一些参考资料：

如果您还没有看到，我可能会先回顾一下 Apple 的 Core Animation Programming Guide。 对我来说，当我通过Mike Nachbaur's Core Animation Tutorial Part 4 时，一切都已经到位，实际上是从头开始复制他的演示。显然，您也可以查看第 1 到第 3 部分。

【讨论】：

谢谢。我的应用程序将在场景 1 中制作的绘图类型（线、贝塞尔曲线、分形等）作为输入 - 在场景 2 中将生成所述绘图。 Scene2 视图控制器顶部有 2 个按钮 - 一个用于刷新 - 将在页面上生成相同类型的新绘图 - 或后退按钮 - 以返回场景 1 并输入新参数。它还具有包含底部实际绘图的 UIView - 代码包含在原始帖子中。了解了这一切，您是否仍然建议我使用 View 而不是 UIView？

@marina 我的View 类实际上是UIView 子类，所以我不明白你的“查看而不是UIView”的问题。我的主要观点是，在使用 Core Animation 的 CAShapeLayer 时，您不需要自定义 drawRect 代码。您可以使用 drawRect 与计时器或 CADisplayLink 在 UIView 子类（这有点复杂）中使用动画，或者使用核心动画。当我使用CAShapeLayer 时，我会在UIViewController 子类中使用它（所以它不会与drawRect 替代方案混淆），但这是个人偏好，因为它适用于UIView 和UIViewController 子类。

简而言之，在您的 UIView 子类中执行 CAShapeLayer 代码绝对没有错（如我的示例所示）。我的主要观点是使用CAShapeLayer 时不需要自定义drawRect 代码。

我想我开始明白了......当我需要创建一个新的时，你建议我如何清除底层绘图的图层？他们只是继续在另一个之上绘制一个......

@marina 如果您保留对旧CAShapeLayer 的引用，您可以将其path 设置为新路径（并根据需要重新启动动画）。或者您可以在添加新的CAShapeLayer 之前使用旧的CAShapeLayer 并致电removeFromSuperlayer。两种技术都可以正常工作，但前者的效率略高。