自定义启动界面--带动画的

最近做项目,设计做出了一个很好看的动画..开始用的是加载gif图片来实现的...后来测试下来发现内存有点儿高,而且在部分机型上gif图片不能完全加载..作为一个技术屌丝..不能忍..就想着自己写.

先看下效果图

启动页动画.gif

思路

分两步..第一步是通过代码获取到启动页的图片

- (UIImage *)getLaunchImage
{
    UIImage *lauchImage = nil;
    NSString *viewOrientation = nil;
    CGSize viewSize = [UIScreen mainScreen].bounds.size;
    UIInterfaceOrientation orientation = [[UIApplication sharedApplication] statusBarOrientation];
    
    if (orientation == UIInterfaceOrientationLandscapeLeft || orientation == UIInterfaceOrientationLandscapeRight) {
        
        viewOrientation = @"Landscape";
        
    } else {
        
        viewOrientation = @"Portrait";
    }
    
    NSArray *imagesDictionary = [[[NSBundle mainBundle] infoDictionary] valueForKey:@"UILaunchImages"];
    for (NSDictionary *dict in imagesDictionary) {
        
        CGSize imageSize = CGSizeFromString(dict[@"UILaunchImageSize"]);
        if (CGSizeEqualToSize(imageSize, viewSize) && [viewOrientation isEqualToString:dict[@"UILaunchImageOrientation"]]) {
            
            lauchImage = [UIImage imageNamed:dict[@"UILaunchImageName"]];
        }
    }
    return lauchImage;
}

第二步..获取到图片之后,新建一个imageview..在imageview上写动画

- (void)customLaunchImageView
{
    UIImageView *launchImageView = [[UIImageView alloc] initWithFrame:self.window.bounds];
    launchImageView.image = [self getLaunchImage];;
    
    [self.window addSubview:launchImageView];
    [self.window bringSubviewToFront:launchImageView];
    
    myTest1 = [[UILabel alloc]initWithFrame:CGRectMake(5,kHeight-250, 50, 50)];
    myTest1.backgroundColor = [UIColor whiteColor];
    myTest1.textAlignment = NSTextAlignmentCenter;
    myTest1.text = @"程昆仑";
    myTest1.layer.masksToBounds = YES;
    myTest1.layer.cornerRadius = 25;
    myTest1.textColor = [UIColor whiteColor];
    [launchImageView addSubview:myTest1];
    
    logoimageV = [[UIImageView alloc]initWithFrame:CGRectMake((kWidth-300)/2, (kHeight-150)/2, 300, 150)];
    logoimageV.image = [UIImage imageNamed:@"splash_logo"];
    logoimageV.alpha  = 0;
    [launchImageView addSubview:logoimageV];
    
    //路径动画。
    CGMutablePathRef myPah = CGPathCreateMutable();
    //CGPathGetCurrentPoint(myPah);
    // CGPathMoveToPoint(myPah, nil,kWidth/2, kHeight/2);
    CGPathMoveToPoint(myPah, nil,30, kHeight-250);//最后的点的位置
    CGPathAddLineToPoint(myPah, nil, kWidth/6, kHeight-100);
    CGPathAddLineToPoint(myPah, nil, kWidth/3, kHeight-200);
    CGPathAddLineToPoint(myPah, nil, kWidth/2, kHeight-100);
    CGPathAddLineToPoint(myPah, nil, kWidth/2, kHeight/2);
    // CGPathRelease(myPah);
    //CGPathCloseSubpath(myPah);

    [myTest1.layer addAnimation:[self keyframeAnimation:myPah durTimes:1.4f Rep:MAXFLOAT] forKey:nil];
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.f * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        myTest1.alpha = 0;
        [UIView animateWithDuration:0.3 animations:^{
            logoimageV.alpha = 1;

        } completion:^(BOOL finished) {
            
        }];
        
        [UIView animateWithDuration:0.8 animations:^{
            launchImageView.alpha = 0.0;
            logoimageV.alpha = 1;
            launchImageView.transform = CGAffineTransformMakeScale(1.2, 1.2);
        } completion:^(BOOL finished) {
            [launchImageView removeFromSuperview];
        }];
    });
}

动画又分成两种--路径动画和扩散动画
一.路劲动画..先找几个关键点...然后把点连成线..让小球沿着线运动

#pragma mark =====路径动画-=============
-(CAKeyframeAnimation *)keyframeAnimation:(CGMutablePathRef)path durTimes:(float)time Rep:(float)repeatTimes
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.path = path;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    ///animation.autoreverses = NO;//是否原路返回
    animation.duration = time;
    animation.delegate = self;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.repeatCount = 1;
    //CGPathCloseSubpath(path);
    // CGPathRelease(path);
    //CGPathCloseSubpath(path);
    return animation;
}

说一下遇到的坑...
1.这两个属性连用可以让动画结束后停留在最后的位置..

图片.png
但是我设置了,小球在第一个动画结束后一直会返回到起始点..很诡异..后来我发现,在路径动画结束时,手欠多加了一个属性.. 图片.png

二.扩散动画.
在第一个动画结束的代理方法里面添加扩散动画

-(void)addlat {
    
    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.fromValue = [NSNumber numberWithFloat:1.0];
    opacityAnimation.toValue = [NSNumber numberWithFloat:0.0];
    opacityAnimation.duration = 1.5f;
    opacityAnimation.autoreverses= NO;
    // opacityAnimation.delegate = self;
    opacityAnimation.repeatCount = 1;
    //    opacityAnimation.speed = 1.0f;
    
    CABasicAnimation * animation2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation2.fromValue = [NSNumber numberWithDouble:0.9];
    animation2.toValue = [NSNumber numberWithDouble:10];
    animation2.duration= 1.5;
    animation2.autoreverses= NO;
    animation2.repeatCount= 1;  //"forever"
    //    animation2.removedOnCompletion= YES;
    [myTest1.layer addAnimation:animation2 forKey:@"scale"];
    [myTest1.layer addAnimation:animation2 forKey:@"scale"];
    [myTest1.layer addAnimation:opacityAnimation forKey:nil];
    [myTest1.layer addAnimation:opacityAnimation forKey:nil];
    
}

这样就搞定了!

代码已上传到github,有需要的小伙伴可以下载下来瞅瞅!

demo地址 :https://github.com/chengkunlun/LunchImageTest