实现脉冲雷达以及动态增减元素Swift

最终效果:

这效果是从MOV文件转成GIF的,而且CSDN不支持大于2M的图片上传, 优酷地址

创建基本动画


这效果是从MOV文件转成GIF的,而且CSDN不支持大于2M的图片上传,优酷地址

创建一个Single View Application工程,再创建一个Swift文件,我创建的叫“PulsingRadarView”,目前结构为:


在ViewController里面持有一个Optional的PulsingRadarView的属性,表示可以为nil,然后在viewDidLoad里做一个简单的初始化工作:

classViewController:UIViewController{

varradarView:PulsingRadarView!

overridefuncviewDidLoad() {

super.viewDidLoad()

letradarSize =CGSizeMake(self.view.bounds.size.width,)

radarView=PulsingRadarView(frame:CGRectMake(0,(self.view.bounds.size.height-radarSize.height)/2,

radarSize.width,radarSize.height))

view.addSubview(radarView)

}

funcdidReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

// Dispose of any resources that can be recreated.

}

}

雷达是圆形的,所以宽高都是self.view.bounds.size.width。

PulsingRadarView里面现在应该是空的,我们首先导入QuartzCore,因为后面动画部分会用到CALayer,然后重写drawRect方法:

funcdrawRect(rect:CGRect) {

UIColor.whiteColor().setFill()

UIRectFill(rect)

letpulsingCount =6

letanimationDuration:Double=4

varanimationLayer =CALayer()

forvari =0; i < pulsingCount; i++ {

varpulsingLayer =CALayer()

pulsingLayer.frame=height)

pulsingLayer.borderColor=UIColor.grayColor().CGColor

pulsingLayer.borderWidth=1

pulsingLayer.cornerRadius= rect.2

defaultCurve =CAMediaTimingFunction(name:kCAMediaTimingFunctionDefault)

varanimationGroup =CAAnimationGroup()

animationGroup.fillMode=kCAFillModeBackwards

animationGroup.beginTime=CACurrentMediaTime() +Double(i) * animationDuration /Double(pulsingCount)

animationGroup.duration= animationDuration

animationGroup.repeatCount=HUGE

animationGroup.timingFunction= defaultCurve

varscaleAnimation =CABasicAnimation(keyPath:"transform.scale")

scaleAnimation.autoreverses=false

scaleAnimation.fromValue=Double(0)

scaleAnimation.toValue=1.5)

varopacityAnimation =CAKeyframeAnimation(keyPath:"opacity")

opacityAnimation.values= [1),0.7),216)">0)]

opacityAnimation.keyTimes= [0),216)">0.5),216)">1)]

animationGroup.animations= [scaleAnimation,opacityAnimation]

pulsingLayer.addAnimation(animationGroup,forKey:"pulsing")

animationLayer.addSublayer(pulsingLayer)

}

layer.addSublayer(animationLayer)

}

先设置画布的背影色为白色,pulsingCount表示波形的条数,animationDuration表示动画的时长,然后我创建了一个animationLayer来存放所有的动画Layer------pulsingLayer,这样layer的结构看起来就像:

每个pulsingLayer代表一个圆形,循环里面先对pulsingLayer进行一些初始化工作:设置frame、边框颜色、边框大小以及radius(半径),radius自然就是自身的宽或高的一半。

CAMediaTimingFunction稍后再说。

接下来创建一个AnimationGroup,因为我们需要用到的动画将有两个:scale(缩放)、opacity(透明),而且需要控制动画开始的时间。

我们借用Controlling Animation Timing这篇文章中的几张图来说明fillMode、beginTime这两个属性:

以下每个方格代表1秒钟,下面这张图也就代表4秒钟,动画时间为1.5秒,黄色为动画开始,蓝色为动画结束,黄色到蓝色也就是动画的过程。从图中可以看到,蓝色部分结束后就是白色了,也就代表整个动画结束并且从layer上移除。

下面这张图开始动画时间偏移了1秒,其余不变。

默认情况下,所有的Layer无论创建的先后顺序有何不同,它们的时间线都是一致的,beginTime为0,表示加入Layer之后就立即开始动画(或者说在当前时间播放动画),而如果要偏移1秒(如上图),则要CACurrentMediaTime()+1,获取当前系统的绝对时间(秒数)并+1。我们要实现脉冲效果,就要使每一个animationGroup的动画以不同的beginTime来进行,所以要设置beginTime =CACurrentMediaTime() + Double(i) * animationDuration / Double(pulsingCount),Swift不支持隐式类型转换,用Double()显式的强转一下。

但是通过上图可以看到,偏移后动画开始前有一个空档,这是由fillMode决定的:

  • kCAFillModeRemoved默认值,在动画开始前和动画结束后,动画对layer都没有影响,layer原本是什么样就是什么样
  • kCAFillModeForwards当动画结束后,layer会一直保持着动画最后的状态
  • kCAFillModeBackwards和kCAFillModeForwards相对,具体参考上面的
  • kCAFillModeBothkCAFillModeForwards和kCAFillModeBackwards在一起的效果
在我们现在的这种情况下,pulsingLayer是设置过frame和border的,所以在动画的空档期,pulsingLayer会直接显示出一个带边框的圆形(动画还没有开始),当然,在动画播放过一次之后,这个边框就不会显示了,因为进入了正常的动画播放循环,不会出现空档期。我们只需要避免在动画播放前不出现空档期就行了,即设置fillMode =kCAFillModeBackwards(提前进入动画状态)。
repeatCount = HUGE就是字面意思,表示动画无限循环(HUGE可以认为是无限,如果是ObjC,用HUGE_VAL)。
CAMediaTimingFunction由系统预置了几个值:
  • kCAMediaTimingFunctionLinear线性,即匀速
  • kCAMediaTimingFunctionEaseIn先慢后快
  • kCAMediaTimingFunctionEaseOut先快后慢
  • kCAMediaTimingFunctionEaseInEaseOut先慢后快再慢
  • kCAMediaTimingFunctionDefault实际效果是在动画开始时和动画播放时比较快,将结束时会变慢
CAMediaTimingFunction支持被定制。我们把timingFunction设置为kCAMediaTimingFunctionDefault,可以使动画播放的更加动感。
接下来的Scale动画就很简单了,从0(0倍)到1.5(放大1.5倍)变换即可。
Opacity透明动画只用设置values和与其对应的keyTimes就行了,需要注意的是keyTimes表示的是时间比例,取值0到1之间,如values的第一个元素为1,keyTimes第一个元素为0,表示动画开始时,opacity为1;values的第二个元素为0.7,keyTimes第二个元素为0.5,表示动画播放到一半的时候,opacity为0.7;依次类推,可自由定制。
然后将单独的scale动画与opacity动画封装到animationGroup里,在把包含了两个动画的animationGroup给pulsingLayer,animationLayer添加pulsingLayer,最后添加这个包含了所有动画Layer的animationLayer即可。

动态增减元素

动画部分已经完成了,接下来我们给PulsingRadarView增加接口,使其支持增减元素。
首先给PulsingRadarView添加两个属性:

classPulsingRadarView:UIView{

letitemSize =CGSizeMake(44,216)">44)

varitems =NSMutableArray()

第一个是每个item的尺寸,第二个用来存储所有的item。
添加addOrReplaceItem公共接口:
funcaddOrReplaceItem() {

letmaxCount =10

varradarButton =UIButton(frame:itemSize.height))

radarButton.setImage(UIImage(named:"UK"),forState:UIControlState.Normal)

center =generateCenterPointInRadar()

radarButton.center=CGPointMake(center.x,center.y)

self.addSubview(radarButton)

items.addObject(radarButton)

ifitems.count> maxCount {

varview =objectAtIndex(0)asUIView

view.removeFromSuperview()

removeObject(view)

}

}

maxCount是圆内显示item的最大值,这里简单的写死,你可以把它开放出去成为一个公共的属性。这里的每个item都是UIButton,初始化后设置一张图片即可,generateCenterPointInRadar方法返回一个圆内的中心坐标,这个坐标只会在圆的直径以内生成,稍后放出。最后判断一下有没有超出maxCount,如果超出了,就把最先添加的item移除掉。
在放出generateCenterPointInRadar这个方法之前,我们首先要了解,哪个范围是我们的坐标生成范围:
大家都知道,View的基本形状是矩形(红色区域),drawRect是以Rect为基础的,但是我们这个雷达是圆形,也就是蓝色区域才是我们的目标范围,所以生成的坐标要围绕中心的绿点(圆心),让我们重新翻开数学课本,看看高中数学对三角函数的定义:
在一个平面直角坐标系中,以原点为圆心,1 为半径画一个圆,这个圆交 x 轴于 A 点。以 O 为旋转中心,将 A 点逆时针旋转一定的角度α至 B 点,设此时 B 点的坐标是(x,y),那么此时 y 的值就叫做α的正弦,记作 sinα;此时 x 的值就叫做α的余弦,记作 cosα;y 与 x 的比值 y/x 就叫做α的正切,记作 tanα。
还有一个很重要的公式: 圆的参数方程:以点O(a,b)为圆心,以r为半径的圆的参数方程是 x=a+r*cosθ,y=b+r*sinθ,(其中θ为参数)
到这里为止,思路就清晰了,以下是generateCenterPointInRadar的方法实现:
privatefuncgenerateCenterPointInRadar() ->CGPoint{

varangle =Double(arc4random()) %360

varradius =arc4random()) % (Double)((width-width)2)

varx =cos(angle) * radius

vary =sin(angle) * radius

returnCGPointMake(CGFloat(x)+/2(y).height)

}

我们先在360°以内随机生成一个角度( θ),然后在半径范围内随机生成一个值,就当作是一个新的半径r,利用公式我们得到了x、y的点,有圆心(a,b)为辅助,就能生成一个坐标了,这个坐标在返回时就已经是基于圆心的了,所以在addOrReplaceItem这个接口里我们拿到坐标后就能直接当作center来用了,这实际上也是完全采用的公式的算法。
这样一来,addOrReplaceItem这个接口也完成了,我们把ViewController里的调用也完善一下,具体的,在viewDidLoad方法的最后增加一个Timer,这个Timer每0.5秒调用一次addOrReplaceItem:
  1. NSTimer.scheduledTimerWithTimeInterval(0.5,target:radarView,0); background-color:inherit">selector:Selector("addOrReplaceItem"),0); background-color:inherit">userInfo:nil,0); background-color:inherit">repeats:true)
Timer在不用的时候一定要调用invalidate()方法,并且要在ViewController析构之前,不然ViewController不会被释放,也就永远不会被析构。这里我们就不考虑那么多了,毕竟只有一个页面,而且在真实场景里也不会这么去用,更多的情况是在网络请求回调的时候去处理。
这么一来,动态增减部分也完成了,但是完美了吗?显然没有。

优化

优化一

与其说是优化,不如说是修复Bug。很明显,在上一步中,我们动态生成的元素重叠了,这不能让人接受,而我们只要稍微做些改变就能防止这种情况的发生。
我们现在在生成每个item的center的时候,没有和已有的item进行比较,这是一个比较耗性能的操作,如果你的itemSize过大,maxCount过多,这甚至能导致死循环,如果是那样的话,你可能在对itemSize以及maxCount做出限制的同时,也对循环的数量也进行控制,如果在生成一个item的center的时候,进行了过多的循环,就可以视为进入死循环了,在这种情况下,你只能重新计算已有的center s。这里不考虑这种极端情况,因为目前的itemSize和maxCount的配合,不会出现死循环。
我们添加一个itemFrameIntersectsInOtherItem私有方法来判断是否和之前生成的center有了重叠:
funcitemFrameIntersectsInOtherItem (frame:CGRect) ->Bool{

foriteminitems{

ifCGRectIntersectsRect(item.frame,frame) {

returntrue

}

}

returnfalse

}

接收一个frame,然后和每一个item比较,如果重叠返回true,反之则返回false。
在addOrReplaceItem方法里的改造:
......

do{

varcenter = generateCenterPointInRadar()

radarButton.center = CGPointMake(center.x,center.y)

}while(itemFrameIntersectsInOtherItem(radarButton.frame))

......

把设置center的地方用一个do-while循环包装起来即可。这么一来,生成的元素就不会重叠了。

优化二

我打算给每一个item的显示和移除增加一点动画效果,以免显得太生硬,并且用派生类的方式来实现:
classPRButton:UIButton{

init(frame: CGRect) {

super.init(frame: frame)

self.alpha =0

}

funcdidMoveToWindow() {

super.didMoveToWindow()

if self.window {

UIView.animateWithDuration(1,animations: {

self.alpha = 1

})

}

}

}

把addOrReplaceItem中的UIButton替换为PRButton,这样在item被添加的时候,有一个简单的过渡动画,当我准备重写removeFromSuperview的时候,遇到了一点问题:

在Swift里面,闭包是不能用super的,那只能这样了:
funcremoveFromSuperview() {

UIView.beginAnimations("",context:nil)

UIView.setAnimationDuration(1)

alpha=0

.setAnimationDidStopSelector(Selector("callSuperRemoveFromSuperview"))

.commitAnimations()

}


funccallSuperRemoveFromSuperview() {

.removeFromSuperview()

}

运行起来应该可以看到完整的效果了。

优化三

这个同样也是修复Bug。如果在动画播放的时候你按下Home键(模拟器按下command+shift+h),就会出现下面这种情况:
这是因为在按下Home键的时候,所有的动画被移除了,具体的,每个Layer都调用了removeAllAnimations方法。我们如果想要在回到应用程序的时候继续动画,需要监听系统的 UIApplicationDidBecomeActiveNotification通知:
weakvaranimationLayer:CALayer?


init(frame:CGRect) {

init(frame: frame)

NSNotificationCenter.defaultCenter().addObserver selector:Selector("resume"),

name:UIApplicationDidBecomeActiveNotification,

object:nil)

}


requiredinit(coder aDecoder:NSCoder) {

fatalError("init(coder:) has not been implemented")

}


funcresume() {

ifletanimationLayer =self.animationLayer{

animationLayer.removeFromSuperlayer()

.setNeedsDisplay()

}

}


deinit{

().removeObserver 这样一来,动画就可以在回到应用程序的时候重新开始了,我把animationLaye以weak的方式引用到了属性里面,这是为了在resume里好方便判断。

GitHub下载地址

如果本文有任何问题,请及时指出,以免对后来者产生不必要的困扰,不胜感激!

UPDATED:

GitHub上的版本已更新至Xcode6 Beta6,在之前下载,然后更新Xcode的朋友,如果编译出现__TFSs26_forceBridgeFromObjectiveCU__FTPSs9AnyObject_MQ__Q_之类的问题,请看 这里
------------------------------------------------------------------------------------------------------
GitHub上已更新至Xcode 6。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


软件简介:蓝湖辅助工具,减少移动端开发中控件属性的复制和粘贴.待开发的功能:1.支持自动生成约束2.开发设置页面3.做一个浏览器插件,支持不需要下载整个工程,可即时操作当前蓝湖浏览页面4.支持Flutter语言模板生成5.支持更多平台,如Sketch等6.支持用户自定义语言模板
现实生活中,我们听到的声音都是时间连续的,我们称为这种信号叫模拟信号。模拟信号需要进行数字化以后才能在计算机中使用。目前我们在计算机上进行音频播放都需要依赖于音频文件。那么音频文件如何生成的呢?音频文件的生成过程是将声音信息采样、量化和编码产生的数字信号的过程,我们人耳所能听到的声音频率范围为(20Hz~20KHz),因此音频文件格式的最大带宽是20KHZ。根据奈奎斯特的理论,音频文件的采样率一般在40~50KHZ之间。奈奎斯特采样定律,又称香农采样定律。...............
前言最近在B站上看到一个漂亮的仙女姐姐跳舞视频,循环看了亿遍又亿遍,久久不能离开!看着小仙紫姐姐的蹦迪视频,除了一键三连还能做什么?突发奇想,能不能把舞蹈视频转成代码舞呢?说干就干,今天就手把手教大家如何把跳舞视频转成代码舞,跟着仙女姐姐一起蹦起来~视频来源:【紫颜】见过仙女蹦迪吗 【千盏】一、核心功能设计总体来说,我们需要分为以下几步完成:从B站上把小姐姐的视频下载下来对视频进行截取GIF,把截取的GIF通过ASCII Animator进行ASCII字符转换把转换的字符gif根据每
【Android App】实战项目之仿抖音的短视频分享App(附源码和演示视频 超详细必看)
前言这一篇博客应该是我花时间最多的一次了,从2022年1月底至2022年4月底。我已经将这篇博客的内容写为论文,上传至arxiv:https://arxiv.org/pdf/2204.10160.pdf欢迎大家指出我论文中的问题,特别是语法与用词问题在github上,我也上传了完整的项目:https://github.com/Whiffe/Custom-ava-dataset_Custom-Spatio-Temporally-Action-Video-Dataset关于自定义ava数据集,也是后台
因为我既对接过session、cookie,也对接过JWT,今年因为工作需要也对接了gtoken的2个版本,对这方面的理解还算深入。尤其是看到官方文档评论区又小伙伴表示看不懂,所以做了这期视频内容出来:视频在这里:本期内容对应B站的开源视频因为涉及的知识点比较多,视频内容比较长。如果你觉得看视频浪费时间,可以直接阅读源码:goframe v2版本集成gtokengoframe v1版本集成gtokengoframe v2版本集成jwtgoframe v2版本session登录官方调用示例文档jwt和sess
【Android App】实战项目之仿微信的私信和群聊App(附源码和演示视频 超详细必看)
用Android Studio的VideoView组件实现简单的本地视频播放器。本文将讲解如何使用Android视频播放器VideoView组件来播放本地视频和网络视频,实现起来还是比较简单的。VideoView组件的作用与ImageView类似,只是ImageView用于显示图片,VideoView用于播放视频。...
采用MATLAB对正弦信号,语音信号进行生成、采样和内插恢复,利用MATLAB工具箱对混杂噪声的音频信号进行滤波
随着移动互联网、云端存储等技术的快速发展,包含丰富信息的音频数据呈现几何级速率增长。这些海量数据在为人工分析带来困难的同时,也为音频认知、创新学习研究提供了数据基础。在本节中,我们通过构建生成模型来生成音频序列文件,从而进一步加深对序列数据处理问题的了解。
基于yolov5+deepsort+slowfast算法的视频实时行为检测。1. yolov5实现目标检测,确定目标坐标 2. deepsort实现目标跟踪,持续标注目标坐标 3. slowfast实现动作识别,并给出置信率 4. 用框持续框住目标,并将动作类别以及置信度显示在框上
数字电子钟设计本文主要完成数字电子钟的以下功能1、计时功能(24小时)2、秒表功能(一个按键实现开始暂停,另一个按键实现清零功能)3、闹钟功能(设置闹钟以及到时响10秒)4、校时功能5、其他功能(清零、加速、星期、八位数码管显示等)前排提示:前面几篇文章介绍过的内容就不详细介绍了,可以看我专栏的前几篇文章。PS.工程文件放在最后面总体设计本次设计主要是在前一篇文章 数字电子钟基本功能的实现 的基础上改编而成的,主要结构不变,分频器将50MHz分为较低的频率备用;dig_select
1.进入官网下载OBS stdioOpen Broadcaster Software | OBS (obsproject.com)2.下载一个插件,拓展OBS的虚拟摄像头功能链接:OBS 虚拟摄像头插件.zip_免费高速下载|百度网盘-分享无限制 (baidu.com)提取码:6656--来自百度网盘超级会员V1的分享**注意**该插件必须下载但OBS的根目录(应该是自动匹配了的)3.打开OBS,选中虚拟摄像头选择启用在底部添加一段视频录制选择下面,进行录制.
Meta公司在9月29日首次推出一款人工智能系统模型:Make-A-Video,可以从给定的文字提示生成短视频。基于**文本到图像生成技术的最新进展**,该技术旨在实现文本到视频的生成,可以仅用几个单词或几行文本生成异想天开、独一无二的视频,将无限的想象力带入生活
音频信号叠加噪声及滤波一、前言二、信号分析及加噪三、滤波去噪四、总结一、前言之前一直对硬件上的内容比较关注,但是可能是因为硬件方面的东西可能真的是比较杂,而且需要渗透的东西太多了,所以学习进展比较缓慢。因为也很少有单纯的硬件学习研究,总是会伴随着各种理论需要硬件做支撑,所以还是想要慢慢接触理论学习。但是之前总找不到切入点,不知道从哪里开始,就一直拖着。最近稍微接触了一点信号处理,就用这个当作切入点,开始接触理论学习。二、信号分析及加噪信号处理选用了matlab做工具,选了一个最简单的语音信号处理方
腾讯云 TRTC 实时音视频服务体验,从认识 TRTC 到 TRTC 的开发实践,Demo 演示& IM 服务搭建。
音乐音频分类技术能够基于音乐内容为音乐添加类别标签,在音乐资源的高效组织、检索和推荐等相关方面的研究和应用具有重要意义。传统的音乐分类方法大量使用了人工设计的声学特征,特征的设计需要音乐领域的知识,不同分类任务的特征往往并不通用。深度学习的出现给更好地解决音乐分类问题提供了新的思路,本文对基于深度学习的音乐音频分类方法进行了研究。首先将音乐的音频信号转换成声谱作为统一表示,避免了手工选取特征存在的问题,然后基于一维卷积构建了一种音乐分类模型。
C++知识精讲16 | 井字棋游戏(配资源+视频)【赋源码,双人对战】
本文主要讲解如何在Java中,使用FFmpeg进行视频的帧读取,并最终合并成Gif动态图。
在本篇博文中,我们谈及了 Swift 中 some、any 关键字以及主关联类型(primary associated types)的前世今生,并由浅及深用简明的示例向大家讲解了它们之间的奥秘玄机。