频道导航

Swift实现UIKit Dynamic动画

2020-05-20 Swift 前端之家

前端之家收集整理的这篇文章主要介绍了Swift实现UIKit Dynamic动画，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

iOS7引入了UIKit Dynamics，可以帮助开发者开发出更接近真实世界的动画效果。之前，用户如果要做出这样的效果，需要话很多的时间在物理计算和Core Animation上。现在，所有的一切都变得非常简单，只要简单的几行就可以实现真实世界的效果。比如，重力、碰撞等。 @H_502_2@

@H_502_2@ UI Dynamics中得类包括：

@H_502_2@ UIGravityBehavior -给你的view添加重力效果。

@H_502_2@ UICollisionBehavior -添加碰撞效果。

@H_502_2@ UISnapBehavior -添加瞬间移位到某个位置，就好像这个物体是被橡皮经栓在那里的一样。

@H_502_2@ UIAttachmentBehavior -添加两个物体间的或者一个物体和一个锚点之间的吸附关系的效果。

@H_502_2@ UIPushBehavior -表明突然或者持续的被推动而改变位置的效果。

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