效果圖:

今天做了一個水滴的開機動畫,分享給大家,主要用到了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

總結

以上是生活随笔為你收集整理的开机动画,水滴波纹的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。