使用CALayer中的mask属性绘图和动画

1. CALaye主要是了为了内容展示和动画操作,但CALayer无法响应事件

  • mask:图层蒙版,决定了父图层的部分可见区域

    @property(strong) CALayer *mask

    mask图层的范围为父图层的可见区域

  • 使用mask属性练习绘制圆后整个圆旋转

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.perAngle = M_PI/60;
        self.centerPoint = CGPointMake(150, 150);
        self.cirleLayer = [CAShapeLayer layer];
        self.cirleLayer.frame = CGRectMake(50, 50, 300, 300);
        self.cirleLayer.fillColor = [UIColor redColor].CGColor;
        self.cirleLayer.strokeColor = [UIColor whiteColor].CGColor;

        self.path = [[UIBezierPath alloc] init];
        [self calculatePoints:self.path];
        self.cirleLayer.path = self.path.CGPath;

        //绘制mask图层,为cirleLayer要显示的区域
        self.mask = [CAShapeLayer layer];
        self.mask.fillColor = nil; //nil代表画圆环,设置了color就是画圆
        self.mask.lineWidth = 10;
        self.mask.strokeColor = [UIColor blackColor].CGColor;
        self.cirleLayer.mask = self.mask;
        [self.layer addSublayer:self.cirleLayer];
        self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(updateCurrent) userInfo:nil repeats:YES];
    }
    return self;
}

//画圆的半径
- (void)calculatePoints:(UIBezierPath *)path {

    CGFloat height = 0;
    CGFloat width = 0;
    CGPoint point;
    for (int i= 1; i <= 120; i++) {
        height = 150 * sin(self.perAngle * i);
        width = 150 * cos(self.perAngle * i);
        point = CGPointMake(self.centerPoint.x - width, self.centerPoint.y - height);
        [path moveToPoint:self.centerPoint];
        [path addLineToPoint:point];
    }
}

- (void)updateCurrent
{

    static CGFloat endAngle = 0;
    endAngle += self.perAngle;
    if (endAngle >= M_PI*2) {
        [self.timer invalidate];
        [self startAnimation];
    }else {
        self.maskPath = [UIBezierPath bezierPathWithArcCenter:self.centerPoint radius:150 startAngle:0 endAngle:endAngle clockwise:true];
        self.mask.path = self.maskPath.CGPath;
    }
}

- (void)startAnimation
{
    CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotateAnimation.fromValue = [NSNumber numberWithFloat:0.0];
    rotateAnimation.toValue = [NSNumber numberWithFloat:2 * M_PI];
    rotateAnimation.repeatCount = MAXFLOAT;
    rotateAnimation.duration = 80;
    [self.cirleLayer addAnimation:rotateAnimation forKey:@"rotate"];
}


  • 效果展示(gif展示效果有点奇怪,具体效果可在模拟器上看)
circle.gif

2. 属性动画结束之后的delegate方法里获取做动画的对象

1.
  groupAnnimation.delegate = self;
  [groupAnnimation setValue:groupLayer forKey:@"animationName"];

2.在animationDidStop获取
    - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    //获取到调用动画的layer
    CATextLayer *groupLayer = [anim valueForKey:@"animationName"];
    [groupLayer removeFromSuperlayer];
    //另外一个动画的开始
    [self updateCurrentString];
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,578评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,147评论 5 13
  • 转载:http://www.cnblogs.com/jingdizhiwa/p/5601240.html 1.ge...
    F麦子阅读 1,597评论 0 1
  • Core Animation其实是一个令人误解的命名。你可能认为它只是用来做动画的,但实际上它是从一个叫做Laye...
    小猫仔阅读 3,809评论 1 4
  • 目录: 主要绘图框架介绍 CALayer 绘图 贝塞尔曲线-UIBezierPath CALayer子类 补充:i...
    Ryan___阅读 1,713评论 1 9