CAShapeLayer

来源：互联网发布：宾得wifi软件编辑：程序博客网时间：2024/04/30 15:46

之前讲过CALayer动画相关知识,再来看看更加复杂的CAShapeLayer相关的动画知识.

普通CALayer在被初始化时是需要给一个frame值的,这个frame值一般都与给定view的bounds值一致,它本身是有形状的,而且是矩形.

CAShapeLayer在初始化时也需要给一个frame值,但是,它本身没有形状,它的形状来源于你给定的一个path,然后它去取CGPath值,它与CALayer有着很大的区别

CAShapeLayer有着几点很重要:

1. 它依附于一个给定的path,必须给与path,而且,即使path不完整也会自动首尾相接

2. strokeStart以及strokeEnd代表着在这个path中所占用的百分比

3. CAShapeLayer动画仅仅限于沿着边缘的动画效果,它实现不了填充效果

以下给出如何使用CAShapeLayer

    // 创建一个view
    UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    [self.view addSubview:showView];
    showView.backgroundColor = [UIColor redColor];
    showView.alpha = 0.5;

    // 贝塞尔曲线(创建一个圆)
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100 / 2.f, 100 / 2.f)
                                                        radius:100 / 2.f
                                                    startAngle:0
                                                      endAngle:M_PI * 2
                                                     clockwise:YES];

    // 创建一个shapeLayer
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.frame         = showView.bounds;                // 与showView的frame一致
    layer.strokeColor   = [UIColor greenColor].CGColor;   // 边缘线的颜色
    layer.fillColor     = [UIColor clearColor].CGColor;   // 闭环填充的颜色
    layer.lineCap       = kCALineCapSquare;               // 边缘线的类型
    layer.path          = path.CGPath;                    // 从贝塞尔曲线获取到形状
    layer.lineWidth     = 4.0f;                           // 线条宽度
    layer.strokeStart   = 0.0f;
    layer.strokeEnd     = 0.1f;

// 将layer添加进图层
[showView.layer addSublayer:layer];

    // 3s后执行动画操作(直接赋值就能产生动画效果)
    [[GCDQueue mainQueue] execute:^{
        layer.speed       = 0.1;
        layer.strokeStart = 0.5;
        layer.strokeEnd   = 0.9f;
        layer.lineWidth   = 1.0f;
    } afterDelay:NSEC_PER_SEC * 3];

    // 给这个layer添加动画效果
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 1.0;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.5f];
    pathAnimation.toValue = [NSNumber numberWithFloat:0.8f];
    [layer addAnimation:pathAnimation forKey:nil];

    // 创建一个gradientLayer
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = showView.bounds;
    [gradientLayer setColors:[NSArray arrayWithObjects:
                               (id)[[UIColor redColor] CGColor],
                               (id)[[UIColor yellowColor] CGColor], nil]];
    [gradientLayer setLocations:@[@0.5,@0.9,@1]];
    [gradientLayer setStartPoint:CGPointMake(0.5, 1)];
    [gradientLayer setEndPoint:CGPointMake(0.5, 0)];

附录:

TestView.h

#import <UIKit/UIKit.h>@interface TestView : UIView{        CAShapeLayer *layer;    }- (void)strokeStart:(CGFloat)value;- (void)strokeEnd:(CGFloat)value;@end

TestView.m

#import "TestView.h"@implementation TestView- (id)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self)    {        layer = [CAShapeLayer layer];        layer.frame = self.bounds;                UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.height / 2.0f,                                                                               self.frame.size.height / 2.0f)                                                            radius:self.frame.size.height / 2.f                                                        startAngle:0                                                          endAngle:M_PI * 2                                                         clockwise:YES];                layer.strokeColor   = [UIColor greenColor].CGColor;   // 边缘线的颜色        layer.fillColor     = [UIColor clearColor].CGColor;   // 闭环填充的颜色        layer.lineCap       = kCALineCapSquare;               // 边缘线的类型        layer.path          = path.CGPath;                    // 从贝塞尔曲线获取到形状        layer.lineWidth     = 1.0f;                           // 线条宽度        layer.strokeStart   = 0.0f;        layer.strokeEnd     = 0.0f;                [self.layer addSublayer:layer];    }    return self;}- (void)strokeStart:(CGFloat)value{    layer.speed = 1;    layer.strokeStart = value;}- (void)strokeEnd:(CGFloat)value{    layer.speed = 1;    layer.strokeEnd = value;}@end转载自：http://blog.csdn.net/yongyinmg/article/details/38755955

0 0