Swift实现UIKit Dynamic动画

iOS7引入了UIKit Dynamics,可以帮助开发者开发出更接近真实世界的动画效果。之前,用户如果要做出这样的效果,需要话很多的时间在物理计算和Core Animation上。现在,所有的一切都变得非常简单,只要简单的几行就可以实现真实世界的效果。比如,重力、碰撞等。
UI Dynamics中得类包括:
UIGravityBehavior -给你的view添加重力效果。
UICollisionBehavior -添加碰撞效果。
UISnapBehavior -添加瞬间移位到某个位置,就好像这个物体是被橡皮经栓在那里的一样。
UIAttachmentBehavior -添加两个物体间的或者一个物体和一个锚点之间的吸附关系的效果。
UIPushBehavior -表明突然或者持续的被推动而改变位置的效果。
要实现一个或者一组动画,只有这些描述某一种物理规则的类是不够的。还需要一个容器,可以添加以上某种物理行为的view和某种物理行为以及这个物理行为的参考物体都放在这个容器中。这个容器就是UIDynamicAnimator,这个view就是UIDynamicItem。UIDynamicItem是可以抽象为有面积可以旋转的质点。物理行为都是继承自UIDynamicBehavior的。参考物体叫做ReferenceView。
先准备好容器UIDynamicAnimator,同时指定参照物referenceView:UIDynamicAnimator(referenceView: self.view)。初始化一个物理行为同时指定物理行为作用的view,这里以重力行为为例:UIGravityBehavior(items: [self.dynamicView])。这时我们说得要素在上面的步骤中就全部完成了,有了容器container和reference view,有了物理行为和具有这个物理行为的view。最后把该放的材料都放在容器中:animator.addBehavior(gravityBeahvior)。
重力和碰撞
首先准备一个view,@IBOutlet weak var dynamicView: UIView!。我用了storyboard,你不用的话就直接初始化一个。指定背景色为self.dynamicView.backgroundColor = UIColor.blueColor(),然后放在某个合适的位置,比如:self.dynamicView.frame = CGRectMake(60,60,80,80)。
下面按照前述的方法顺序:
Animator容器和参照物reference view:var animator = UIDynamicAnimator(referenceView: self.view)。
物理行为和要添加这个无理行为的view:var gravityBeahvior = UIGravityBehavior(items: [self.dynamicView])
把放到容器中:animator.addBehavior(gravityBeahvior)
运行代码,你就可以看到一个方块以重力加速度的方式下落。就像真实的物体重力加速度下落一样,这个蓝色的方框就这样掉落了。gravity behavior可以设定下落的角度和重力加速度的g值。
下面让这个蓝色的方框落地,落在self.view的边界内。落地就会发生碰撞,所以西面要介绍的就是collision behavior。
var collisionBehavior = UICollisionBehavior(items: [self.dynamicView])
collisionBehavior.translatesReferenceBoundsIntoBoundary = true
animator.addBehavior(collisionBehavior)
首先创建collision behavior和这个添加这个行为的view。然后第二句代码指定具有collision behavior的view活动的边界boundary。这里的边界就是在初始化animator容器的时候指定的reference view的边界。view接触到指定的这个边界的时候发生“碰撞”,开始执行碰撞动画。最后把collision behavior添加给animator容器。运行代码,你会发现这个蓝色方框终于落地了。落在了self.view的水平线上。
也可以通过方法:addBoundaryWithIdentifier(identitifer,fromPoint,toPoint)自行指定碰撞发生的边界。
collisionBehavior.addBoundaryWithIdentifier("boundary",fromPoint: CGPointMake(0,300),toPoint: CGPointMake(UIScreen.mainScreen().bounds.width,300))
蓝色的方框这样正正的掉落似乎不能体现重力和碰撞behavior的全部,在蓝色的方框初始化之后添加代码,让他斜古来。然后让我们指定的boundary也斜过来,看看会发生什么。
完整代码:
复制代码
override func viewDidLoad() {
super.viewDidLoad()
self.dynamicView.backgroundColor = UIColor.blueColor()
self.dynamicView.transform = CGAffineTransformRotate(self.dynamicView.transform,45)
var animator = UIDynamicAnimator(referenceView: self.view)
var gravityBeahvior = UIGravityBehavior(items: [self.dynamicView])
animator.addBehavior(gravityBeahvior)
var collisionBehavior = UICollisionBehavior(items: [self.dynamicView])
// collisionBehavior.translatesReferenceBoundsIntoBoundary = true
collisionBehavior.addBoundaryWithIdentifier("boundary",51); font-family:宋体; font-size:14px; line-height:28px"> animator.addBehavior(collisionBehavior)
collisionBehavior.collisionDelegate = self
self.animator = animator
}
Snap
下面开始snap behavior。指定屏幕的某个地方为锚点展示这个snap效果。这个锚点就有tap手势来指定。tap手势会捕捉用户点击在屏幕的点的位置,就用这个用户点击的位置作为锚点。确定锚点之后,把蓝色框框snap到那个锚点上。给self.view添加tap gesture:
var tap = UITapGestureRecognizer(target: self,action: "tapAction:")
self.view.addGestureRecognizer(tap)
处理tap gesture的方法。
func tapAction(tap: UITapGestureRecognizer){
var archorPoint: CGPoint = tap.locationInView(self.view)
if let snap = snapBehavior {
self.animator.removeBehavior(snap)
}
self.snapBehavior = UISnapBehavior(item: self.dynamicView,snapToPoint: archorPoint)
self.animator.addBehavior(self.snapBehavior)
首先,在tap发生之后即换算出tap所在的点对于self.view的坐标系内的x值和y值是多少。这个点就是我们需要的snap发生的时候的锚点。判断snap behavior是否存在,如果存在在animator容器中删去。初始化一个新的snap behavior,指定好这个behavior作用的view和snap的锚点。给animator添加上这个behavior。
有一点需要注意。每次在tap手势发生的时候初始化一个新的snap behavior并删除旧的。一个snap behavior只有一个对应的锚点!如果一个snap behavior有多个锚点的时候,behavior就不知道先去执行哪一个,从而不会执行。你可以把if判断语句注释掉看看效果。
Attach
如前文所述,这个behavior是作用于两个物体或者一个物体与一个锚点的。下面就是用一个物体和一个锚点的方式讲述attach behavior。先设定锚点,然后给这个锚点设定attach的物体。最后让这个锚点可以在屏幕内任意拖动。同时,和这个锚点attach的物体跟着锚点运行。一步一步的来:
先在屏幕的正中间创建锚点,高度和之前是用的蓝框框一样:
self.anchorView = UIView(frame: CGRectMake(UIScreen.mainScreen().bounds.width / 2,20,20))
self.anchorView.backgroundColor = UIColor.redColor()
self.view.addSubview(self.anchorView)
然后给蓝色框框和锚点(红色框框)添加attach behavior让他们关联起来。
self.attachBehavior = UIAttachmentBehavior(item: self.dynamicView,attachedToAnchor: self.anchorView.center)
self.animator.addBehavior(self.attachBehavior)
给蓝框框加个重力behavior,让代码运行起来的时候可以看到蓝框框绕着红框框做钟摆的运动。
var gravityBeahvior = UIGravityBehavior(items: [self.dynamicView])
animator.addBehavior(gravityBeahvior)
慢慢的,钟摆运动会因为阻力而逐步停止。
给锚点添加pan手势,用户可以把锚点移动到屏幕的任何一个地放。
var anchorPan = UIPanGestureRecognizer(target: self,action: "archPanAction:")
self.anchorView.addGestureRecognizer(anchorPan)
处理pan手势:
func archPanAction(pan: UIPanGestureRecognizer){
var currentPoint = pan.locationInView(self.view)
self.anchorView.center = currentPoint
self.attachBehavior!.anchorPoint = currentPoint
这里其实给你蓝框框加了两个behavior,一个是attach(附着在锚点上),一个是重力。有重力,让蓝色框框可以在初始的时候乡下运动,并最后围绕着锚点做钟摆运动。拖动锚点之后,蓝框框也会跟着锚点动,并维持钟摆运动。在处理锚点(anchorView的center点)的pan手势的时候,不断的给anchorView的center赋值,同时不断更新attach behavior的锚点位置。这样就实现了拖动锚点的效果。为了清楚的表面锚点的位置,使用了anchorView。也就是锚点可以 编程的时候指定,而anchor view完全可以不存在。
Push
推力:UIPushBehavior分为两种:一种是持续的推力,一种是瞬时推力。持续的推力会产生一个恒定的加速度,所以物体的速度会越来越快。瞬时推力只是一瞬间的推力,物体会由于摩擦力越来越慢。
下面来一个龟兔赛跑。设定两个框框,分别设定持续推力和顺势推力。看看哪个快。
self.continuousPush = UIPushBehavior(items:[self.dynamicView],mode: UIPushBehaviorMode.Continuous)
self.instantaneousPush = UIPushBehavior(items: [self.anchorView],mode: UIPushBehaviorMode.Instantaneous)
self.continuousPush?.setAngle(CGFloat(M_PI_2),magnitude: 0.2)
self.instantaneousPush?.setAngle(CGFloat(M_PI_2),51); font-family:宋体; font-size:14px; line-height:28px"> self.animator.addBehavior(self.continuousPush)
self.animator.addBehavior(self.instantaneousPush)
运行app。明显的由于蓝框框是持续的(continuous)的,所以更快。
要让push behavior运行起来,必须设定angle和magnitude两个属性值。angle是设定力的方向的,magnitude是用来计算加速度的。对于continuous的push behavior来说,magnitude为1.0的力作用于一个100point * 100point的view上,并且这个view的密度为1.0时,在力的方向上产生的加速度是100 points / second²。这个值也就是UIKit牛顿。
设置Dynamic Behavior
UIKit给的默认值已经够用了。但是如果你想更多的控制这些Dyanmaic Behavior的值得话可以使用dynamic behavior设置。使用dynamic behavior设定的主要是一些在物理条件下的物体本身的属性,如密度、摩擦力等。具体的属性如下:
friction -两个物体之间的线性滑动摩擦力。浮点值,范围0~1。
elasticity -两个物体之间发生碰撞后的弹性。浮点值,范围0~1。
density -物体的密度。这个主要影响在惯性上。也就是力改变这个物体运动的难易程度。浮点值,范围0~1。
allowsRotation -是否允许物体旋转。
resistance -物体运动的阻力。浮点值,范围0~CGFLOAT_MAX。
angularResistance -旋转运动的时候物体的阻力。
设置一个看看效果如何。就用gravity和collision behavior来试试。
var itemBehavior = UIDynamicItemBehavior(items: [self.dynamicView])
itemBehavior.elasticity = 0.7
self.animator.addBehavior(itemBehavior)
运行app。这个时候从屏幕上方掉落的蓝框框会弹起来更好,而且还有弹上落下的几个来回。
来点真的
集以上所讲,来做一个app里能用到的东西。实现一个调皮的alert view。效果是这样的:在点击弹出alert view的时候屏幕出现一个黑色的半透明遮罩,然后alert view 从顶端自由落体落下,到正中的时候挺住。用户点击了ok按钮以后自由落体下落。从屏幕消失。
把整个的过程分解以后就知道都需要些什么动画,这些动画都需要在什么时候起作用了。抛开最基本的UIView动画不谈。单说与上述相关的作用在alert view的动画。首先自由落体也就是gravity behavior,然后再中间停住也就是需要snap behavior,最后ok按钮按下的时候alert view自由落体落下。
来看代码。准备工作:
self.overlay = UIView(frame: self.view.bounds)
overlay.backgroundColor = UIColor.blackColor()
overlay.alpha = 0
self.animator = UIDynamicAnimator(referenceView: self.view)
var pan = UIPanGestureRecognizer(target: self,action: "panAction:")
self.view.addGestureRecognizer(pan)
func createAlertView(){
var x = UIScreen.mainScreen().bounds.width - 200
self.alertView = UIView(frame: CGRectMake(x / 2.0,200,150))
alertView.backgroundColor = UIColor.whiteColor()
var okButton = UIButton(frame: CGRectMake(0,30))
okButton.addTarget(self,action: "okAction:",forControlEvents: UIControlEvents.TouchUpInside)
okButton.setTitle("OK",forState: UIControlState.Normal)
okButton.setTitleColor(UIColor.blueColor(),51); font-family:宋体; font-size:14px; line-height:28px"> alertView.addSubview(okButton)
在alert view出现的时候:
@IBAction func showAlertAction(sender: UIButton){
self.view.addSubview(self.overlay)
self.createAlertView()
self.view.addSubview(self.alertView)
self.animator.removeAllBehaviors()
var gravity = UIGravityBehavior(items: [self.alertView])
self.animator.addBehavior(gravity)
var snap = UISnapBehavior(item: self.alertView,
snapToPoint: CGPointMake(UIScreen.mainScreen().bounds.width / 2,UIScreen.mainScreen().bounds.height / 2))
self.animator.addBehavior(snap)
UIView.animateWithDuration(0.5,animations: {
self.overlay.alpha = 0.6
})
alert view消失的时候:
func okAction(sender: UIButton?){
gravity.gravityDirection = CGVectorMake(0.0,10.0)
var itemBehavior = UIDynamicItemBehavior(items: [self.alertView])
itemBehavior.addAngularVelocity(CGFloat(-M_PI_2),forItem: self.alertView)
self.overlay.alpha = 0.0
},51); font-family:宋体; font-size:14px; line-height:28px"> completion: {finished in
if !finished {
return
}
self.overlay.removeFromSuperview()
self.alertView.removeFromSuperview()
self.alertView = nil
看到viewDidLoad里最后的这句UIPanGestureRecognizer了么?这个是为了给alert view增加调皮的部分的。用户可以拖动alert view的时候,拖往哪一边alert view就往哪一边倾斜并执行attachment behavior跟随用户的拖动。当用户松开的时候执行snap behavior弹回到中心的位置。
func panAction(sender: UIPanGestureRecognizer){
if self.alertView == nil {
return
let locationInView = sender.locationInView(self.view)
let locationInAlertView = sender.locationInView(self.alertView)
if sender.state == UIGestureRecognizerState.Began {
self.animator.removeAllBehaviors()
let offset = UIOffsetMake(locationInAlertView.x - CGRectGetMidX(self.alertView.bounds)
,locationInAlertView.y - CGRectGetMidY(self.alertView.bounds))
self.attachmentBehavior = UIAttachmentBehavior(item: self.alertView,offsetFromCenter: offset,attachedToAnchor: locationInView)
self.animator.addBehavior(attachmentBehavior)
else if sender.state == UIGestureRecognizerState.Changed{
self.attachmentBehavior.anchorPoint = locationInView
else if sender.state == UIGestureRecognizerState.Ended{
self.snapBehavior = UISnapBehavior(item: self.alertView,snapToPoint: self.view.center)
self.animator.addBehavior(self.snapBehavior)
if sender.translationInView(self.view).y > 100 {
okAction(nil)
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 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)的前世今生,并由浅及深用简明的示例向大家讲解了它们之间的奥秘玄机。