最近做項目,設計做出了一個很好看的動畫..開始用的是加載gif圖片來實現(xiàn)的...后來測試下來發(fā)現(xiàn)內(nèi)存有點兒高,而且在部分機型上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];
}];
});
}
動畫又分成兩種--路徑動畫和擴散動畫
一.路勁動畫..先找?guī)讉€關鍵點...然后把點連成線..讓小球沿著線運動
#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.這兩個屬性連用可以讓動畫結(jié)束后停留在最后的位置..
圖片.png
但是我設置了,小球在第一個動畫結(jié)束后一直會返回到起始點..很詭異..后來我發(fā)現(xiàn),在路徑動畫結(jié)束時,手欠多加了一個屬性..
圖片.png
二.擴散動畫.
在第一個動畫結(jié)束的代理方法里面添加擴散動畫
-(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,有需要的小伙伴可以下載下來瞅瞅!
