期待这样的特效.jpg
近来看到QQ音乐里面有一些酷酷的礼物效果，手痒，从网上找到一些素材，尝试做一下，效果有点粗糙，但是还是学到了一些东西，故和大家一起探讨分析一下。
先上跑车效果：
跑车.gif
然后是战斗机效果：
飞机.gif
先说说这个跑车效果怎么做。
第一步：分析
跑车图片和轮子图片是一个整体，无论是放大还是移动，一定是同步的。
第二步：搭建
跑车图片上，放置前后轮子，轮子需要滚动，这里使用序列帧动画来无限循环播放轮子的图片，给用户一种滚动的效果。
车体原图.png
第三步：动画
这里使用关键帧动画来控制跑车的移动和大小。
我们需要注意的是跑车尽可能的在屏幕中间停留，所以要控制不同关键帧的动画时间。
动画操作：
- (void)startAnimation
{
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
//大小动画
CAKeyframeAnimation *scaleAnimation = [self scaleKeyAnimation];
//平移动画
CAKeyframeAnimation *transAnmation = [self translationAnimation];
animationGroup.animations = @[scaleAnimation,transAnmation];
animationGroup.duration = self.animateDuration;
[self.layer addAnimation:animationGroup forKey:nil];
}
接下来是战斗机的效果分析：
第一步：分析
等同于跑车的思路，战斗机为整体，平移操作即可。
第二步：搭建
战斗机的五个螺旋桨需要不停地旋转，所以这五个小部件都需要不停地做旋转动画。
战斗机主体.png
第三步：动画
这里的动画分为4个部分
1、战斗机出场动画
2、投弹动画
3、战斗机离场动画
4、钻石隐藏动画
我们需要理清楚动画的触发时机：
1、战斗机出场动画。
2、战斗机出场动画结束后，开始投弹动画。投弹动画为序列帧动画。
3、投弹动画结束后，战斗机离场动画与钻石隐藏动画同时开始。
动画操作：
- (void)startAnimation
{
//如果正在爆炸，也就意味之前的动画没结束
if (self.isBooming) {
//把动画移除了
[self.boomImageView.layer removeAnimationForKey:@"boomAnimation"];
[self.boomImageView.layer removeAnimationForKey:@"boomOpacityAnimation"];
//把爆炸视图隐藏了
[self hideBoomImageView];
}
//不在爆炸状态
self.isBooming = NO;
self.boomImageView.hidden = YES;
//把未完成的动画移除掉
[self.planeImageView.layer removeAnimationForKey:@"planeAnimation"];
[self.boomImageView.layer removeAnimationForKey:@"boomOpacityAnimation"];
[self.planeShadowImageView.layer removeAnimationForKey:@"shadowAnimation"];
//构建新的动画
CAKeyframeAnimation *transAnmation = [self planeTranslationAnimation];
CAKeyframeAnimation *shadowAnimation = [self shadowTranslationAnimation];
//配置动画属性
transAnmation.duration = self.showDuration;
transAnmation.delegate = self;
transAnmation.removedOnCompletion = NO;
transAnmation.fillMode = kCAFillModeForwards;
shadowAnimation.duration = self.showDuration;
shadowAnimation.delegate = self;
shadowAnimation.removedOnCompletion = NO;
shadowAnimation.fillMode = kCAFillModeForwards;
//添加动画
[self.planeImageView.layer addAnimation:transAnmation forKey:@"planeAnimation"];
[self.planeShadowImageView.layer addAnimation:shadowAnimation forKey:@"shadowAnimation"];
}
额外的注意事项是：当我动画未结束时，又重新开始了动画，那么需要根据动画的触发时机来处理各个动画。
该视图很多属性都公开了，为了保留足够的外部定制，调用起来会稍微复杂一点，但这样是值得的。
调用跑车：
- (void)loadCustomCarImageView
{
//跑车位置
car = [[CarImageView alloc]initCarImageViewWithOriginCenter:CGPointMake(-240, 0)];
//跑车开始动画的位置
car.startAnimatePoint = CGPointMake(0, 100);
//跑车结束动画的位置
car.endAnimatePoint = CGPointMake(600, 500);
//跑车的尺寸大小
car.controlScaleArray = @[@"0.5",@"1",@"1.2"];
//跑车途径的点
NSValue *onePoint = [NSValue valueWithCGPoint:CGPointMake(120, 150)];
NSValue *twoPoint = [NSValue valueWithCGPoint:CGPointMake(180, 210)];
NSValue *threePoint = [NSValue valueWithCGPoint:CGPointMake(240, 260)];
car.controlPointArray = @[onePoint,twoPoint,threePoint];
//移动时的帧动画时间
car.pointTimeArray = @[@0,@0.15,@0.45,@0.7,@0.85,@1];
//尺寸的帧动画时间
car.scaleTimeArray = @[@0,@0.15,@0.45,@1];
//整个动画的时间
car.animateDuration = 5.0;
[self.view addSubview:car];
}
调用战斗机：
- (void)loadPlaneView
{
//初始化
plane = [[PlaneView alloc]initPlaneView];
//开始位置
plane.startPoint = CGPointMake(PhoneScreen_WIDTH , 0);
//展示时的位置，从右向屏幕中间飞，途径的点
NSValue *onePoint = [NSValue valueWithCGPoint:CGPointMake(PhoneScreen_WIDTH-30, 50)];
NSValue *twoPoint = [NSValue valueWithCGPoint:CGPointMake(PhoneScreen_WIDTH/2+50, PhoneScreen_HEIGHT/2-90)];
//展示时的位置
plane.showPointArray = @[onePoint,twoPoint];
//展示时每一帧的时间，0-1之间
plane.showTimeArray = @[@0,@0.15,@0.5,@1.0];
//飞机离开时的，从屏幕中部向屏幕左侧飞
NSValue *oneLeavePoint = [NSValue valueWithCGPoint:CGPointMake(PhoneScreen_WIDTH/2-150, PhoneScreen_HEIGHT/2)];
NSValue *twoLeavePoint =[NSValue valueWithCGPoint:CGPointMake(-200, PhoneScreen_HEIGHT/2+100)];
//飞机位置
plane.leavePointArray = @[oneLeavePoint,twoLeavePoint];
//每一帧的时间
plane.leaveTimeArray = @[@0,@0.5,@1.0];
//飞机的初始位置，屏幕右侧
plane.startPoint = CGPointMake(PhoneScreen_WIDTH, 0);
//飞机
plane.stayPoint = CGPointMake(PhoneScreen_WIDTH/2, PhoneScreen_HEIGHT/2-70);
//飞机出场时间（从最右侧到屏幕中央的时间）
plane.showDuration = 3.0;
//飞机里长时间（从屏幕中央到最左侧的时间）
plane.leaveDuration = 2.0;
//爆炸的时间，也是飞机在屏幕中央停留的时间
plane.boomDuration = 3.0;
[self.view addSubview:plane];
}
至此，战斗机和跑车动画都实现了～
抛砖引玉，期待能让小伙伴们有所收获，更期待各位大神的指点和建议。
整个项目因为有不少图片，所以有15M，需要的小伙伴请到这里下载项目代码
