您的位置: 首页  >  文章  >  iOS 战斗机&跑车效果

iOS 战斗机&跑车效果

分类: 文章 • 2025-03-31 12:14:33

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

 

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

先上跑车效果：

iOS 战斗机&跑车效果

跑车.gif

然后是战斗机效果：

iOS 战斗机&跑车效果

飞机.gif

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

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

iOS 战斗机&跑车效果

车体原图.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. }

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

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

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

iOS 战斗机&跑车效果

战斗机主体.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，需要的小伙伴请到这里下载项目代码

相关推荐