绘制动画 [英] Drawing animation

问题描述

我正在创建一个简单的应用程序，当用户按下按钮时，屏幕上将绘制一系列线条，用户将能够看到实时绘制的这些线条（几乎就像动画一样）。

I'm creating a simple app where when the user presses a button, a series of lines will be drawn on the screen and the user will be able to see these lines drawn in real time (almost like an animation).

我的代码看起来像这样（已简化）：

My code looks something like this (has been simplified):

UIGraphicsBeginImageContext(CGSizeMake(300,300));
CGContextRef context = UIGraphicsGetCurrentContext();

for (int i = 0; i < 100; i++ ) {
    CGContextMoveToPoint(context, i, i);
    CGContextAddLineToPoint(context, i+20, i+20);
    CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
    CGContextStrokePath(context);
}

UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

我的问题是：

1 ）一旦用户按下按钮，UIThread就会阻塞，直到绘图完成。

1) As soon as the user presses the button, the UIThread blocks until the drawing is done.

2）我无法在屏幕上绘制线条一次 - 我尝试直接在循环内设置UIImage，并尝试在循环内设置图层内容。

2) I can't get the lines to be drawn on the screen one at a time - I've tried setting the UIImage directly inside the loop and also tried setting a layer content inside the loop.

如何解决这些问题？

推荐答案

你说就像动画一样。为什么不做一个真正的动画，一个核心图形' CABasicAnimation ？你真的需要将它显示为一系列线条，或者是一个合适的动画吗？

You say "just like an animation". Why not do an actual animation, a la Core Graphics' CABasicAnimation? Do you really need to show it as a series of lines, or is a proper animation ok?

如果你想为线条的实际绘制设置动画，你可以做类似于：

If you want to animate the actual drawing of the line, you could do something like:

#import <QuartzCore/QuartzCore.h>

- (void)drawBezierAnimate:(BOOL)animate
{
    UIBezierPath *bezierPath = [self bezierPath];

    CAShapeLayer *bezier = [[CAShapeLayer alloc] init];

    bezier.path          = bezierPath.CGPath;
    bezier.strokeColor   = [UIColor blueColor].CGColor;
    bezier.fillColor     = [UIColor clearColor].CGColor;
    bezier.lineWidth     = 5.0;
    bezier.strokeStart   = 0.0;
    bezier.strokeEnd     = 1.0;
    [self.view.layer addSublayer:bezier];

    if (animate)
    {
        CABasicAnimation *animateStrokeEnd = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        animateStrokeEnd.duration  = 10.0;
        animateStrokeEnd.fromValue = [NSNumber numberWithFloat:0.0f];
        animateStrokeEnd.toValue   = [NSNumber numberWithFloat:1.0f];
        [bezier addAnimation:animateStrokeEnd forKey:@"strokeEndAnimation"];
    }
}

然后你所要做的就是创建<$你的线路的c $ c> UIBezierPath ，例如：

Then all you have to do is create the UIBezierPath for your line, e.g.:

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

    [path moveToPoint:CGPointMake(0.0, 0.0)];

    [path addLineToPoint:CGPointMake(200.0, 200.0)];

    return path;
}

如果需要，可以将一堆线路拼接成一条路径，例如这是一个大致正弦曲线形状的系列：

If you want, you can patch a bunch of lines together into a single path, e.g. here is a roughly sine curve shaped series of lines:

- (UIBezierPath *)bezierPath
{
    UIBezierPath *path = [UIBezierPath bezierPath];
    CGPoint point = self.view.center;

    [path moveToPoint:CGPointMake(0, self.view.frame.size.height / 2.0)];

    for (CGFloat f = 0.0; f < M_PI * 2; f += 0.75)
    {
        point = CGPointMake(f / (M_PI * 2) * self.view.frame.size.width, sinf(f) * 200.0 + self.view.frame.size.height / 2.0);
        [path addLineToPoint:point];
    }

    return path;
}

这些不会阻止主线程。

And these don't block the main thread.

顺便说一句，您显然必须将 CoreGraphics.framework 添加到目标的构建设置 链接二进制文件库。

By the way, you'll obviously have to add the CoreGraphics.framework to your target's Build Settings under Link Binary With Libraries.

这篇关于绘制动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！