开机动画,水滴波纹

效果图:

今天做了一个水滴的开机动画,分享给大家,主要用到了CALayer动画,和贝塞尔曲线画水波纹;

代码有详细注释,欢迎大家改进:

#import "ViewController.h"

@interface ViewController ()
@property (strong, nonatomic) UIImageView *image1;
@property (strong, nonatomic) UIImageView *image2;
@property (strong, nonatomic) UIImageView *image3;
@property (strong, nonatomic) UIView *myView;
@property (strong, nonatomic) UIImageView *bgView;
@property (strong, nonatomic) UIImageView *lineView;
@property (strong, nonatomic) UIImageView *textView;
@end

@implementation ViewController

- (IBAction)add:(id)sender {
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    animation.toValue = [NSNumber numberWithFloat:M_PI * 2.0];
    animation.duration = 3;
    animation.cumulative = YES;
    animation.repeatCount = 2;
    [self.image1.layer addAnimation:animation forKey:@"transform.rotation.z"];
    
    
    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    animation2.toValue = [NSNumber numberWithFloat:-M_PI * 2.0];
    animation2.duration = 3;
    animation2.cumulative = YES;
    animation2.repeatCount = 2;
    [self.image2.layer addAnimation:animation2 forKey:@"transform.rotation.z"];
    
    
    //水滴功能
    [self performSelector:@selector(waterAnimation) withObject:nil afterDelay:0];
    [self performSelector:@selector(waterAnimation) withObject:nil afterDelay:0.5];
    [self performSelector:@selector(waterAnimation) withObject:nil afterDelay:1];
    [self performSelector:@selector(waterAnimation) withObject:nil afterDelay:1.5];
    [self performSelector:@selector(waterAnimation) withObject:nil afterDelay:2];
    [self performSelector:@selector(waterAnimation) withObject:nil afterDelay:2.5];
    [self performSelector:@selector(waterAnimation) withObject:nil afterDelay:3];
    [self performSelector:@selector(waterAnimation) withObject:nil afterDelay:3.5];
    [self performSelector:@selector(waterAnimation) withObject:nil afterDelay:4];
    [self performSelector:@selector(waterAnimation) withObject:nil afterDelay:4.5];
    [self performSelector:@selector(waterAnimation) withObject:nil afterDelay:5];
    [self performSelector:@selector(waterAnimation) withObject:nil afterDelay:5.5];
    [self performSelector:@selector(waterAnimation) withObject:nil afterDelay:6];

    [self performSelector:@selector(waterRound) withObject:nil afterDelay:0.5];
    [self performSelector:@selector(waterRound) withObject:nil afterDelay:1];
    [self performSelector:@selector(waterRound) withObject:nil afterDelay:1.5];
    [self performSelector:@selector(waterRound) withObject:nil afterDelay:2];
    [self performSelector:@selector(waterRound) withObject:nil afterDelay:2.5];
    [self performSelector:@selector(waterRound) withObject:nil afterDelay:3];
    [self performSelector:@selector(waterRound) withObject:nil afterDelay:3.5];
    [self performSelector:@selector(waterRound) withObject:nil afterDelay:4];
    [self performSelector:@selector(waterRound) withObject:nil afterDelay:4.5];
    [self performSelector:@selector(waterRound) withObject:nil afterDelay:5];
    [self performSelector:@selector(waterRound) withObject:nil afterDelay:5.5];
    [self performSelector:@selector(waterRound) withObject:nil afterDelay:6];
    [self performSelector:@selector(waterRound) withObject:nil afterDelay:6.5];
    
    
    //线条出现
    [self moveBackground];
    
    //文字出现
    [self performSelector:@selector(showTheWorld) withObject:nil afterDelay:3.8];

}



//水滴
- (void)waterAnimation {
    [UIView animateWithDuration:0.4 animations:^{
        [self.view addSubview:self.image3];
        self.image3.frame = CGRectMake(105, 290, 8, 16);
    } completion:^(BOOL finished) {
        [self.image3 removeFromSuperview];
        self.image3.frame = CGRectMake(105, 250, 5, 10);
    }];
}

//水波纹
- (void)waterRound {
    
    //椭圆路径,贝塞尔
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(-10, -4.5, 20, 10)];
    
    //画图指针
    CAShapeLayer *circleShap = [CAShapeLayer layer];
    //给定路径
    circleShap.path = bezierPath.CGPath;
    //定位点
    circleShap.position = CGPointMake(self.myView.bounds.size.width , self.myView.bounds.size.height);
    
    circleShap.fillColor = [UIColor clearColor].CGColor;//填充透明色
    circleShap.strokeColor = [UIColor colorWithRed:61 / 255.0 green:202 / 255.0 blue:251 / 255.0f alpha:1].CGColor;//路径颜色
    
    circleShap.opacity = 1; //透明度
    circleShap.lineWidth = 1;//线宽
    
    
    //加载画线
    [self.myView.layer addSublayer:circleShap];
    //创建CALayer动画
    //形变,比例
    CGFloat scale = 5;
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];//默认
    scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(scale, scale, 1)];
    
    //透明度
    CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    alphaAnimation.fromValue = @1;
    alphaAnimation.toValue = @0;
    
    //group动画
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.animations = @[scaleAnimation, alphaAnimation];
    animationGroup.delegate = self;
    animationGroup.duration = 1.5;
    
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    
    [animationGroup setValue:circleShap forKey:@"lalala"];
    circleShap.delegate = self;
    //添加动画
    [circleShap addAnimation:animationGroup forKey:nil];
}

//背景移动动画
- (void)moveBackground {
    
    [UIView animateWithDuration:4 delay:0.4 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        CGFloat y = 500;
        self.bgView.frame = CGRectMake(105, y, 200, 160);
    } completion:^(BOOL finished) {
        [self.bgView removeFromSuperview];
    }];
}


//文字显示动画
- (void)showTheWorld {
    [UIView animateWithDuration:1.0 animations:^{
        self.textView.alpha = 1.0;
    }];
}

//停止时,移除layer
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    CALayer *layer = [anim valueForKey:@"lalala"];
    if (layer) {
        [layer removeFromSuperlayer];
    }
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"080"]];
    //齿轮
    self.image1 = [[UIImageView alloc] initWithFrame:CGRectMake(40, 200, 70, 70)];
    self.image1.image = [UIImage imageNamed:@"pic1"];
    [self.view addSubview:self.image1];
    
    self.image2 = [[UIImageView alloc] initWithFrame:CGRectMake(105, 200, 70, 70)];
    self.image2.image = [UIImage imageNamed:@"pic1"];
    [self.view addSubview:self.image2];

    //水滴
    self.image3 = [[UIImageView alloc] initWithFrame:CGRectMake(105, 250, 4, 8)];
    self.image3.image = [UIImage imageNamed:@"water"];
    
    
    
    //水波纹定位点
    self.myView = [[UIView alloc] initWithFrame:CGRectMake(105, 300, 1, 1)];
    self.myView.backgroundColor = [UIColor clearColor];
    [self.view addSubview:self.myView];
    

    //线条
    self.lineView = [[UIImageView alloc] initWithFrame:CGRectMake(105, 300, 200, 160)];
    self.lineView.image = [UIImage imageNamed:@"line"];
    [self.view insertSubview:self.lineView atIndex:0];
    
    //线条蒙板
    self.bgView = [[UIImageView alloc] initWithFrame:CGRectMake(105, 300, 200, 160)];
    self.bgView.image = [UIImage imageNamed:@"080"];
    [self.view insertSubview:self.bgView aboveSubview:self.lineView];
    
    //文字
    self.textView = [[UIImageView alloc] initWithFrame:CGRectMake(220, 390, 120, 60)];
    self.textView.image = [UIImage imageNamed:@"感动"];
    self.textView.alpha = 0.0;
    [self.view addSubview:self.textView];

    
}

@end

下载地址:

http://download.csdn.net/download/et295394330/9125579