IOS: animation de la transformación de una línea a una curva de bezier

Me gustaría animar una línea recta que curva en una curva de bezier (de "_" a "n"), ¿hay alguna biblioteca en algún lugar que pueda ayudarme a hacerlo?

Sé cómo dibujar una curva Bezier con UIBezierPath, podría volver a dibujar rápidamente y hacer la transformación progresivamente, pero si algo ya lo hace, sería genial 🙂

Podría hacer algo con CADisplayLink . Por ejemplo, podría hacer esto en su controller de vista utilizando un CAShapeLayer , por ejemplo:

 #import "ViewController.h" #import <QuartzCore/QuartzCore.h> @interface ViewController () @property (nonatomic) CFTimeInterval firstTimestamp; @property (nonatomic, strong) CAShapeLayer *shapeLayer; @property (nonatomic, strong) CADisplayLink *displayLink; @property (nonatomic) NSUInteger loopCount; @end static CGFloat const kSeconds = 5.0; @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; [self addShapeLayer]; [self startDisplayLink]; } - (void)addShapeLayer { self.shapeLayer = [CAShapeLayer layer]; self.shapeLayer.path = [[self pathAtInterval:0.0] CGPath]; self.shapeLayer.fillColor = [[UIColor clearColor] CGColor]; self.shapeLayer.lineWidth = 3.0; self.shapeLayer.strokeColor = [[UIColor networkingColor] CGColor]; [self.view.layer addSublayer:self.shapeLayer]; } - (void)startDisplayLink { self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(handleDisplayLink:)]; [self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode]; } - (void)stopDisplayLink { [self.displayLink invalidate]; self.displayLink = nil; } - (void)handleDisplayLink:(CADisplayLink *)displayLink { if (!self.firstTimestamp) self.firstTimestamp = displayLink.timestamp; self.loopCount++; NSTimeInterval elapsed = (displayLink.timestamp - self.firstTimestamp); self.shapeLayer.path = [[self pathAtInterval:elapsed] CGPath]; if (elapsed >= kSeconds) { [self stopDisplayLink]; self.shapeLayer.path = [[self pathAtInterval:0] CGPath]; self.statusLabel.text = [NSString stringWithFormat:@"loopCount = %.1f frames/sec", self.loopCount / kSeconds]; } } - (UIBezierPath *)pathAtInterval:(NSTimeInterval) interval { UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(0, self.view.bounds.size.height / 2.0)]; CGFloat fractionOfSecond = interval - floor(interval); CGFloat yOffset = self.view.bounds.size.height * sin(fractionOfSecond * M_PI * 2.0); [path addCurveToPoint:CGPointMake(self.view.bounds.size.width, self.view.bounds.size.height / 2.0) controlPoint1:CGPointMake(self.view.bounds.size.width / 2.0, self.view.bounds.size.height / 2.0 - yOffset) controlPoint2:CGPointMake(self.view.bounds.size.width / 2.0, self.view.bounds.size.height / 2.0 + yOffset)]; return path; } @end 

imagen animada


Alternativamente, si desea hacerlo UIView , puede hacerlo de la siguiente manera:

 #import "View.h" #import <QuartzCore/QuartzCore.h> @interface View () @property (nonatomic, strong) CADisplayLink *displayLink; @property (nonatomic) CFTimeInterval firstTimestamp; @property (nonatomic) CFTimeInterval displayLinkTimestamp; @property (nonatomic) NSUInteger loopCount; @end static CGFloat const kSeconds = 5.25; @implementation View - (id)initWithCoder:(NSCoder *)aDecoder { self = [super initWithCoder:aDecoder]; if (self) { [self startDisplayLink]; } return self; } - (void)startDisplayLink { _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(handleDisplayLink:)]; [_displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode]; } - (void)stopDisplayLink { [self.displayLink invalidate]; self.displayLink = nil; } - (void)handleDisplayLink:(CADisplayLink *)displayLink { if (!self.firstTimestamp) self.firstTimestamp = displayLink.timestamp; self.displayLinkTimestamp = displayLink.timestamp; self.loopCount++; [self setNeedsDisplayInRect:self.bounds]; NSTimeInterval elapsed = (displayLink.timestamp - self.firstTimestamp); if (elapsed >= kSeconds) { [self stopDisplayLink]; self.displayLinkTimestamp = self.firstTimestamp + kSeconds; [self setNeedsDisplayInRect:self.bounds]; self.statusLabel.text = [NSString stringWithFormat:@"loopCount = %.1f frames/sec", self.loopCount / kSeconds]; } } - (UIBezierPath *)pathAtInterval:(NSTimeInterval) interval { UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(0, self.bounds.size.height / 2.0)]; CGFloat fractionOfSecond = interval - floor(interval); CGFloat yOffset = self.bounds.size.height * sin(fractionOfSecond * M_PI * 2.0); [path addCurveToPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height / 2.0) controlPoint1:CGPointMake(self.bounds.size.width / 2.0, self.bounds.size.height / 2.0 - yOffset) controlPoint2:CGPointMake(self.bounds.size.width / 2.0, self.bounds.size.height / 2.0 + yOffset)]; return path; } - (void)drawRect:(CGRect)rect { NSTimeInterval elapsed = (self.displayLinkTimestamp - self.firstTimestamp); UIBezierPath *path = [self pathAtInterval:elapsed]; [[UIColor networkingColor] setStroke]; path.lineWidth = 3.0; [path stroke]; } @end 

UIView tanto la UIView subclasificada como el controller de vista, y ambos resultaron en aproximadamente 60 fotogtwigs por segundo.