iOS树叶进度效果

分析图.png

效果：小风车不停的转动，进度增加期间没被填满的地方有树叶飘过

小风车动画

使用基础动画让他无限旋转

    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.fromValue = @1;
    scaleAnimation.toValue = @0;
    scaleAnimation.duration = 0.5;
    scaleAnimation.removedOnCompletion = NO;
    scaleAnimation.fillMode = kCAFillModeForwards;
    [self.flowerView.layer addAnimation:scaleAnimation forKey:nil];
    
    _textLabel.hidden = NO;
    scaleAnimation.fromValue = @0;
    scaleAnimation.toValue = @1;
    [_textLabel.layer addAnimation:scaleAnimation forKey:nil];

树叶移动动画

1.每次事件触发”下一层的视图“在他的layer上面添加子layer

    //树叶效果（用CALayer创建枫叶）
    CALayer *leafLayer = [CALayer layer];
    leafLayer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"leaf"].CGImage);
    leafLayer.bounds = CGRectMake(0, 0, 10, 10);
    leafLayer.position = CGPointMake(_progressBGImageView.frame.origin.x + _progressBGImageView.frame.size.width, 8);
    [self.progressBGImageView.layer addSublayer:leafLayer];

2.使用动画组，将路径和旋转动画结合播放

    //添加路径
    CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *p1 = [NSValue valueWithCGPoint:leafLayer.position];
    NSValue *p2 = [NSValue valueWithCGPoint:CGPointMake(_progressBGImageView.frame.origin.x + _progressBGImageView.frame.size.width*3/4.0 + arc4random()%(int)(_progressBGImageView.frame.size.width/4.0), _progressBGImageView.frame.origin.y + arc4random()%(int)_progressBGImageView.frame.size.height)];
    NSValue *p3 = [NSValue valueWithCGPoint:CGPointMake(_progressBGImageView.frame.origin.x + _progressBGImageView.frame.size.width/2.0 + arc4random()%(int)(_progressBGImageView.frame.size.width/4.0), _progressBGImageView.frame.origin.y + arc4random()%(int)_progressBGImageView.frame.size.height)];
    NSValue *p4 = [NSValue valueWithCGPoint:CGPointMake(_progressBGImageView.frame.origin.x + _progressBGImageView.frame.size.width/4.0 + arc4random()%(int)(_progressBGImageView.frame.size.width/4.0), _progressBGImageView.frame.origin.y + arc4random()%(int)_progressBGImageView.frame.size.height)];
    NSValue *p5 = [NSValue valueWithCGPoint:CGPointMake(_progressBGImageView.frame.origin.x+5, _progressBGImageView.frame.origin.y + arc4random()%(int)_progressBGImageView.frame.size.height)];
    
    keyAnimation.values = @[p1, p2, p3, p4, p5];
    
    //设置旋转动画
    CABasicAnimation *roateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    roateAnimation.fromValue = @0;
    roateAnimation.toValue = @(M_PI/18.0 * (arc4random()%(36*6) ));
    
    
    //动画组（播放旋转动画和路径）
    CAAnimationGroup  *group = [CAAnimationGroup animation];
    group.animations = @[roateAnimation, keyAnimation];
    group.duration = 8;
    group.delegate = self;
    group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
    [group setValue:leafLayer forKey:@"leafLayer"];
    [leafLayer addAnimation:group forKey:nil];

3.通过动画的代理，在动画完成之后删除添加的layer

//动画的代理

#pragma mark - CAAnimationDelegate

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    //移除layer的动画
    CALayer *layer = [anim valueForKey:@"leafLayer"];
    [layer removeFromSuperlayer];
}

下载链接

http://code.cocoachina.com/view/129385