iOS 战斗机&跑车效果

原文地址::https://blog.csdn.net/qq_30513483/article/details/73650193

 

近来看到QQ音乐里面有一些酷酷的礼物效果，手痒，从网上找到一些素材，尝试做一下，效果有点粗糙，但是还是学到了一些东西，故和大家一起探讨分析一下。

先上跑车效果：

跑车.gif

然后是战斗机效果：

飞机.gif

先说说这个跑车效果怎么做。
第一步：分析
跑车图片和轮子图片是一个整体，无论是放大还是移动，一定是同步的。

第二步：搭建
跑车图片上，放置前后轮子，轮子需要滚动，这里使用序列帧动画来无限循环播放轮子的图片，给用户一种滚动的效果。

车体原图.png

第三步：动画
这里使用关键帧动画来控制跑车的移动和大小。
我们需要注意的是跑车尽可能的在屏幕中间停留，所以要控制不同关键帧的动画时间。

动画操作：

1. - (void)startAnimation

2. {

3. CAAnimationGroup *animationGroup = [CAAnimationGroup animation];

4.  

5. //大小动画

6. CAKeyframeAnimation *scaleAnimation = [self scaleKeyAnimation];

7.  

8. //平移动画

9. CAKeyframeAnimation *transAnmation = [self translationAnimation];

10.  

11. animationGroup.animations = @[scaleAnimation,transAnmation];

12.  
13.  

14. animationGroup.duration = self.animateDuration;

15. [self.layer addAnimation:animationGroup forKey:nil];

16.  

17. }

接下来是战斗机的效果分析：

第一步：分析
等同于跑车的思路，战斗机为整体，平移操作即可。

第二步：搭建
战斗机的五个螺旋桨需要不停地旋转，所以这五个小部件都需要不停地做旋转动画。

战斗机主体.png

第三步：动画
这里的动画分为4个部分
1、战斗机出场动画
2、投弹动画
3、战斗机离场动画
4、钻石隐藏动画

我们需要理清楚动画的触发时机：
1、战斗机出场动画。
2、战斗机出场动画结束后，开始投弹动画。投弹动画为序列帧动画。
3、投弹动画结束后，战斗机离场动画与钻石隐藏动画同时开始。

动画操作：

1. - (void)startAnimation

2. {

3.  

4. //如果正在爆炸，也就意味之前的动画没结束

5. if (self.isBooming) {

6.  

7. //把动画移除了

8. [self.boomImageView.layer removeAnimationForKey:@"boomAnimation"];

9.  

10. [self.boomImageView.layer removeAnimationForKey:@"boomOpacityAnimation"];

11.  

12. //把爆炸视图隐藏了

13. [self hideBoomImageView];

14. }

15.  

16. //不在爆炸状态

17. self.isBooming = NO;

18. self.boomImageView.hidden = YES;

19. //把未完成的动画移除掉

20. [self.planeImageView.layer removeAnimationForKey:@"planeAnimation"];

21. [self.boomImageView.layer removeAnimationForKey:@"boomOpacityAnimation"];

22. [self.planeShadowImageView.layer removeAnimationForKey:@"shadowAnimation"];

23.  
24.  

25. //构建新的动画

26. CAKeyframeAnimation *transAnmation = [self planeTranslationAnimation];

27. CAKeyframeAnimation *shadowAnimation = [self shadowTranslationAnimation];

28.  

29. //配置动画属性

30. transAnmation.duration = self.showDuration;

31. transAnmation.delegate = self;

32. transAnmation.removedOnCompletion = NO;

33. transAnmation.fillMode = kCAFillModeForwards;

34.  

35. shadowAnimation.duration = self.showDuration;

36. shadowAnimation.delegate = self;

37. shadowAnimation.removedOnCompletion = NO;

38. shadowAnimation.fillMode = kCAFillModeForwards;

39.  

40. //添加动画

41. [self.planeImageView.layer addAnimation:transAnmation forKey:@"planeAnimation"];

42. [self.planeShadowImageView.layer addAnimation:shadowAnimation forKey:@"shadowAnimation"];

43.  
44.  

45. }

额外的注意事项是：当我动画未结束时，又重新开始了动画，那么需要根据动画的触发时机来处理各个动画。

该视图很多属性都公开了，为了保留足够的外部定制，调用起来会稍微复杂一点，但这样是值得的。

调用跑车：

1. - (void)loadCustomCarImageView

2. {

3. //跑车位置

4. car = [[CarImageView alloc]initCarImageViewWithOriginCenter:CGPointMake(-240, 0)];

5. //跑车开始动画的位置

6. car.startAnimatePoint = CGPointMake(0, 100);

7. //跑车结束动画的位置

8. car.endAnimatePoint = CGPointMake(600, 500);

9. //跑车的尺寸大小

10. car.controlScaleArray = @[@"0.5",@"1",@"1.2"];

11.  

12. //跑车途径的点

13. NSValue *onePoint = [NSValue valueWithCGPoint:CGPointMake(120, 150)];

14. NSValue *twoPoint = [NSValue valueWithCGPoint:CGPointMake(180, 210)];

15. NSValue *threePoint = [NSValue valueWithCGPoint:CGPointMake(240, 260)];

16. car.controlPointArray = @[onePoint,twoPoint,threePoint];

17.  

18. //移动时的帧动画时间

19. car.pointTimeArray = @[@0,@0.15,@0.45,@0.7,@0.85,@1];

20. //尺寸的帧动画时间

21. car.scaleTimeArray = @[@0,@0.15,@0.45,@1];

22. //整个动画的时间

23. car.animateDuration = 5.0;

24. [self.view addSubview:car];

25.  

26. }

调用战斗机：

1. - (void)loadPlaneView

2. {

3. //初始化

4. plane = [[PlaneView alloc]initPlaneView];

5.  

6. //开始位置

7. plane.startPoint = CGPointMake(PhoneScreen_WIDTH , 0);

8.  

9. //展示时的位置，从右向屏幕中间飞，途径的点

10. NSValue *onePoint = [NSValue valueWithCGPoint:CGPointMake(PhoneScreen_WIDTH-30, 50)];

11. NSValue *twoPoint = [NSValue valueWithCGPoint:CGPointMake(PhoneScreen_WIDTH/2+50, PhoneScreen_HEIGHT/2-90)];

12. //展示时的位置

13. plane.showPointArray = @[onePoint,twoPoint];

14. //展示时每一帧的时间，0-1之间

15. plane.showTimeArray = @[@0,@0.15,@0.5,@1.0];

16.  
17.  
18.  

19. //飞机离开时的，从屏幕中部向屏幕左侧飞

20. NSValue *oneLeavePoint = [NSValue valueWithCGPoint:CGPointMake(PhoneScreen_WIDTH/2-150, PhoneScreen_HEIGHT/2)];

21. NSValue *twoLeavePoint =[NSValue valueWithCGPoint:CGPointMake(-200, PhoneScreen_HEIGHT/2+100)];

22. //飞机位置

23. plane.leavePointArray = @[oneLeavePoint,twoLeavePoint];

24. //每一帧的时间

25. plane.leaveTimeArray = @[@0,@0.5,@1.0];

26.  

27. //飞机的初始位置，屏幕右侧

28. plane.startPoint = CGPointMake(PhoneScreen_WIDTH, 0);

29. //飞机

30. plane.stayPoint = CGPointMake(PhoneScreen_WIDTH/2, PhoneScreen_HEIGHT/2-70);

31.  

32. //飞机出场时间（从最右侧到屏幕中央的时间）

33. plane.showDuration = 3.0;

34. //飞机里长时间（从屏幕中央到最左侧的时间）

35. plane.leaveDuration = 2.0;

36. //爆炸的时间，也是飞机在屏幕中央停留的时间

37. plane.boomDuration = 3.0;

38. [self.view addSubview:plane];

39. }

至此，战斗机和跑车动画都实现了～

抛砖引玉，期待能让小伙伴们有所收获，更期待各位大神的指点和建议。
整个项目因为有不少图片，所以有15M，需要的小伙伴请到这里下载项目代码