我试图动画通过以下方式线的绘制:
。H
CAShapeLayer *rootLayer;
CAShapeLayer *lineLayer;
CGMutablePathRef path;
.M
path = CGPathCreateMutable();
CGPathMoveToPoint(path, nil, self.frame.size.width/2-100, 260);
CGPathAddLineToPoint(path, nil, self.frame.size.width/2+100.0, 260);
CGPathCloseSubpath(path);
self.rootLayer = [CALayer layer];
rootLayer.frame = self.bounds;
[self.layer addSublayer:rootLayer];
self.lineLayer = [CAShapeLayer layer];
[lineLayer setPath:path];
[lineLayer setFillColor:[UIColor redColor].CGColor];
[lineLayer setStrokeColor:[UIColor blueColor].CGColor];
[lineLayer setLineWidth:1.5];
[lineLayer setFillRule:kCAFillRuleNonZero];
[rootLayer addSublayer:lineLayer];
[self performSelector:@selector(startTotalLine) withObject:nil afterDelay:1.5];
- (void)startTotalLine
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"animatePath"];
[animation setDuration:3.5];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[animation setAutoreverses:NO];
[animation setFromValue:(id)path];
[animation setToValue:(id)path];
[lineLayer addAnimation:animation forKey:@"animatePath"];
}
该行已提请之前startTotalLine
方法被调用。 此外, startTotalLine
方法不影响线。
我希望它动画线从右到左绘制。
我想,做你想要什么,最简单的方法,就是介绍一些UIView的是1.5像素高度和动画它的宽度。 问我,如果我不清楚。
我觉得你的代码不工作,因为你的变量path
不是一个图层属性。 阅读手册 :
CABasicAnimation提供了一种用于层属性基本的单关键帧动画功能。
和你做一些奇怪的位置:
[animation setFromValue:(id)path];
[animation setToValue:(id)path];
编辑:我偶然发现的文章 ,并明白你是努力实现! 现在,我想你失败的原因是,你可以动画不改变点数路径。 现在,我想你可以创建一个路径线连得两分。 起初,他们是在同一个地方和另一个路径是您要使用落得线。 现在从第一路径转移到第二动画。 我认为它应该工作,但我不知道。
编辑:当然! 你需要这个家伙的代码。 Git的链接 。
我将与动画属性做到这一点。
要做到这一点我想创建一个自定义CALayer
类-让我们把它LineLayer
。 定义startPoint
特性,以及length
属性。 那么我的配置length
属性为“动画”。
造成这种情况的代码看起来像下面这样:
// LineLayer.h
@interface LineLayer: CALayer
@property (nonatomic, assign) int length;
// This was omitted from the SO code snippet.
@property (nonatomic, assign) CGPoint startPoint;
@end
// LineLayer.m
@implementation LineLayer
@synthesize length = _length;
// This was omitted from the SO code snippet.
@synthesize startPoint= _startPoint;
- (id) initWithLayer:(id)layer
{
if(self = [super initWithLayer:layer])
{
if([layer isKindOfClass:[LineLayer class]])
{
// This bit is required for when we CA is interpolating the values.
LineLayer *other = (LineLayer*)layer;
self.length = other.length;
self.startPoint = other.startPoint; // This was omitted.
}
}
return self;
}
+ (BOOL)needsDisplayForKey:(NSString *)key
{
if ([key isEqualToString:@"length"]) {
return YES;
}
return [super needsDisplayForKey:key];
}
- (void) setLength:(int)newLength
{
if (newLength < 0) {
return; // Fail early.
}
_length = newLength;
[self setNeedsDisplay];
}
/*
This should have been drawInContext:(CGContextRef)context
- (void) drawRect:(CGRect) rect
*/
- (void) drawInContext:(CGContextRef)context
{
//...Do your regular drawing here.
// This was omitted from the SO code snippet.
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetLineWidth(context, 2);
CGContextMoveToPoint(context, _startPoint.x, _startPoint.y);
CGContextAddLineToPoint(context, _startPoint.x + _length, _startPoint.y);
CGContextStrokePath(context);
}
@end
然后在您的视图控制器,你可以使用LineLayer
这样的:
- (void)viewDidLoad
{
[super viewDidLoad];
LineLayer *lineLayer = [LineLayer new];
// This was omitted from the SO code snippet.
lineLayer.frame = CGRectMake(0, 0, 320, 480);
[lineLayer setNeedsDisplay];
// ---
lineLayer.startPoint = CGPointMake(0, 100);
lineLayer.length = 0;
[self.view.layer addSublayer:lineLayer];
// Now animate the changes to the length property
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"length"];
anim.duration = 5; // Change should table about 5 mins.
anim.fromValue = [NSNumber numberWithInt:0];
anim.toValue = [NSNumber numberWithInt:200];
[lineLayer addAnimation:anim forKey:@"animateLength"];
lineLayer.length = 200;
//Do clean up below...
}
编码愉快:)
这是我使用“UIBezierPath”,“CAShapeLayer”和属性“strokeEnd”你的情况的解决方案:
.m文件
@synthesize shapeLayer;
[self drawLine];
-(void)drawLine {
CGFloat X1 = self.frame.size.width/2-100;
CGFloat Y1 = 260;
CGFloat X2 = self.frame.size.width/2+100.0;
CGFloat Y2 = 260;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(X1, Y1)];
[path addLineToPoint:CGPointMake(X2, Y2)];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = [[UIColor blueColor] CGColor];
shapeLayer.lineWidth = 1.5;
shapeLayer.fillColor = [[UIColor redColor] CGColor];
shapeLayer.strokeEnd =0;
[self.layer addSublayer:shapeLayer];
[self performSelector:@selector(startTotalLine) withObject:nil afterDelay:1.5];
}
- (void)startTotalLine {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 3.5f;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[animation setAutoreverses:NO];
[animation setFromValue:[NSNumber numberWithInt:0]];
[animation setToValue:[NSNumber numberWithInt:1]];
[shapeLayer addAnimation:animation forKey:@"animatePath"];
}
默认的“strokeEnd”值是1,所以,使其0开头(没有行会出现)。 顺便说一句,这里是有用的例子前提: http://jamesonquave.com/blog/fun-with-cashapelayer/