最近做项目,设计做出了一个很好看的动画..开始用的是加载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