iOS 战斗机跑车效果

本文来自简书，原文地址:http://www.jianshu.com/p/f6fdf467b7f0

近来看到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，需要的小伙伴请到这里下载项目代码

iOS 战斗机跑车效果相关推荐

ios APP加密探究几维安全iOS 代码混淆效果参考
几维安全ios代码混淆效果参考: 什么是加密加密是在二进制的程序中植入一段代码,在运行的时候优先取得程序的控制权,做一些额外的工作.大多数病毒就是基于此原理. 加密作用加壳的程序可以有效阻止对程序 ...
防ios的抽屉效果，防qq的抽屉效果
AS中导入GitHub开源项目SlidingMenu总结,我开始AS导入SlidingMenu的时候也百度了很多文章,写的都不是很详细,所以导入成功后,写了这篇文章,希望对想用AndroidStudi ...
移动端阻止ios弹性滑动_移动端iOS阻止橡皮筋效果
一.遇到的问题移动端开发中,iOS的微信浏览器也好.Safari也好在浏览网页的时候会出现橡皮筋效果.就是当页面拉到尽头的时候还能再继续拉动,露出浏览器的底色,松手会回弹回去. 微信浏览器: Saf ...
iOS 转盘动画效果实现
代码地址如下: http://www.demodashi.com/demo/11598.html 近期公司项目告一段落,闲来无事,看到山东中国移动客户端有个转盘动画挺酷的.于是试着实现一下,看似简单, ...
实现ios常见菜单效果的思路
眼下见过的实现边側菜单的效果.比較流行的有下面三种:(效果图) 1.菜单条覆盖在部分主视图上附上实现该效果的一个不错的源代码地址: http://code4app.com/ios/RNFrosted ...
IOS取消“橡皮筋“效果
一个后端转前端的小白,只懂一些基础的html.css,做项目时,本来是用的antd-mobile的NavBar组件,一个会固定在顶部的导航栏,但是IOS滑动会有"橡皮筋"效果,会拉 ...
Android类似IOS的果冻效果
转载:https://github.com/HomHomLin/SlidingLayout SlidingLayout是一种Android平台的View控件,可以帮助你实现类似微信网页浏览的下拉功能, ...
android 仿ios带弹簧效果的ScrollView
说ios的效果确实不错,今天就参照别人的代码,修改bug一箩筐,优化体验一大堆. 废话不多说,上代码: /** * 仿ios弹簧效果 scrollview 带阻尼 * @author sunxia ...
iOS 双声道效果实现方式
iOS 无法直接采集双声道,用户如果想实现播放的音频具有双声道效果,可以参考本文.本文为即构科技音视频SDK(ZegoLiveRoom SDK )高级功能系列第九篇--双声道. 双声道效果实现的主流程 ...

iOS 战斗机跑车效果

iOS 战斗机跑车效果相关推荐

最新文章

热门文章