开机动画,水滴波纹

效果图:

今天做了一个水滴的开机动画,分享给大家,主要用到了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