Swift实现UIKit Dynamic动画

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

UI Dynamics中得类包括:

  • UIGravityBehavior -给你的view添加重力效果。
  • UICollisionBehavior -添加碰撞效果。
  • UISnapBehavior -添加瞬间移位到某个位置,就好像这个物体是被橡皮经栓在那里的一样。
  • UIAttachmentBehavior -添加两个物体间的或者一个物体和一个锚点之间的吸附关系的效果。
  • UIPushBehavior -表明突然或者持续的被推动而改变位置的效果。

要实现一个或者一组动画,只有这些描述某一种物理规则的类是不够的。还需要一个容器,可以添加以上某种物理行为的view和某种物理行为以及这个物理行为的参考物体都放在这个容器中。这个容器就是UIDynamicAnimator,这个view就是UIDynamicItemUIDynamicItem是可以抽象为有面积可以旋转的质点。物理行为都是继承自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)

下面按照前述的方法顺序:

  1.  Animator容器和参照物reference view:var animator = UIDynamicAnimator(referenceView: self.view)
  2.  物理行为和要添加这个无理行为的view:var gravityBeahvior = UIGravityBehavior(items: [self.dynamicView])
  3.  把放到容器中: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", fromPoint: CGPointMake(0, 300), toPoint: CGPointMake(UIScreen.mainScreen().bounds.width, 300))
        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, 60, 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), magnitude: 0.2)
        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自由落体落下。

来看代码。准备工作:

    override func viewDidLoad() {
        super.viewDidLoad()

        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, 0, 200, 150))
        alertView.backgroundColor = UIColor.whiteColor()
        var okButton = UIButton(frame: CGRectMake(0, 0, 200, 30))
        okButton.addTarget(self, action: "okAction:", forControlEvents: UIControlEvents.TouchUpInside)
        okButton.setTitle("OK", forState: UIControlState.Normal)
        okButton.setTitleColor(UIColor.blueColor(), forState: UIControlState.Normal)
        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?){
        self.animator.removeAllBehaviors()

        var gravity = UIGravityBehavior(items: [self.alertView])
        gravity.gravityDirection = CGVectorMake(0.0, 10.0)
        self.animator.addBehavior(gravity)

        var itemBehavior = UIDynamicItemBehavior(items: [self.alertView])
        itemBehavior.addAngularVelocity(CGFloat(-M_PI_2), forItem: self.alertView)
        self.animator.addBehavior(itemBehavior)

        UIView.animateWithDuration(0.5, animations: {
                self.overlay.alpha = 0.0
        },
        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.animator.removeAllBehaviors()

            self.snapBehavior = UISnapBehavior(item: self.alertView, snapToPoint: self.view.center)
            self.animator.addBehavior(self.snapBehavior)

            if sender.translationInView(self.view).y > 100 {
                okAction(nil)
            }
        }
    }

 

就本身UIKit Dynamic动画的组合就可以实现非常丰富的动画效果了。如果再结合本身已有的core animation,动画的变化就更加丰富。不要再等了,动手实践一下吧!

 

欢迎加群互相学习,共同进步。QQ群:iOS: 58099570 | Android: 330987132 | Go:217696290 | Python:336880185 | 做人要厚道,转载请注明出处!http://www.cnblogs.com/sunshine-anycall/p/4166243.html

时间: 2024-11-03 21:07:06

Swift实现UIKit Dynamic动画的相关文章

Swift 制作一个带动画效果的环形进度条例子

1,带动画效果的环形进度条 下面我们演示如何制作一个环状进度条组件,当进度改变时,进度条长度变化时是有动画效果的(我们还可以设置动画时间,或者关闭动画),效果图如下: (1)动画实现原理 使用 Core Animation 动画根据进度改变进度条(CAShapeLayer)的 strokeEnd. (2)组件代码(OProgressView.swift) import UIKit   @IBDesignable class OProgressView: UIView {          str

IOS实战之自定义转场动画详解_IOS

转场动画这事,说简单也简单,可以通过presentViewController:animated:completion:和dismissViewControllerAnimated:completion:这一组函数以模态视图的方式展现.隐藏视图.如果用到了navigationController,还可以调用pushViewController:animated:和popViewController这一组函数将新的视图控制器压栈.弹栈. 下图中所有转场动画都是自定义的动画,这些效果如果不用自定义动

iOS UITableView展开缩放动画实例代码_Swift

Swift - UITableView展开缩放动画  效果 源码:https://github.com/YouXianMing/Swift-Animations  // // HeaderViewTapAnimationController.swift // Swift-Animations // // Created by YouXianMing on 16/8/9. // Copyright 2016年 YouXianMing. All rights reserved. // import

在Swift中使用Objective-C编写类、继承Objective-C类_Swift

互用性(互操作性)使开发者可以定义融合了 Objective-C 语言特性的Swift类.编写 Swift 类时,不仅可以继承 Objective-C 语言编写的父类,采用 Objective-C 的协议,还可以利用 Objective-C 的一些其它功能.这意味着,开发者可以基于 Objective-C 中已有的熟悉.可靠的类.方法和框架来创建 Swift 类,并结合 Swift 提供的现代化和更有效的语言特点对其进行优化. 继承Objective-C的类 在 Swift 中,开发者可以定义一

iOS之UI--辉光动画

前言:学习来自YouXianMing老师的博客:<辉光UIView的category >以及YouXianMing老师的github源码:< GlowView>    而我个人考虑到分类的二次拓展性(或者是再一次拓展)不是特别好,所以将YouXianMing老师的用分类拓展的辉光动画,改写成一个继承CALayer的可拓展的普通类. 一方面,也是作为自我训练编码,对辉光UIView的实现所使用到的上下文绘制.核心动画.GCD中的定时器以及Runtime动态添加属性等知识进一步的熟练运

Swift中利用AppDelegate实现调用指定ViewController中的函数

接着上一篇的Blog讲,在我们自定义了TableViewCell之后,我们可能需要点击cell里面的button等操作,比如点击了以后跳转到别的页面,这个时候,因为跳转动作是在tableview所在的viewcontroller(假设为A类)实现的,所以,我们需要在tablewViewCell类里面调用A类的一个实例,这个实例一般是通过AppDelegate类实现的. 具体来看一下实现过程. 我们先来看一下整体的需求: 在"基站列表"这个ViewController里面,我们的Tabl

CAAnimation四种动画

在上一篇专题中我们提到,CAAnimation可分为以下四种: 1 2 3 4 5 6 7 8 1.CABasicAnimation 通过设定起始点,终点,时间,动画会沿着你这设定点进行移动.可以看做特殊的CAKeyFrameAnimation 2.CAKeyframeAnimation Keyframe顾名思义就是关键点的frame,你可以通过设定CALayer的始点.中间关键点.终点的frame,时间,动画会沿你设定的轨迹进行移动 3.CAAnimationGroup Group也就是组合的

iOS 开发之动画篇 - 从 UIView 动画说起

毋庸置疑的:在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 -- 这对于app而言是非常重要的. 本文作为动画文集的第一篇,最开始是想做个qq下拉刷新的水滴动画的制作讲解,但这几天研读<iOS Animations by Tutorials>一书,对iOS动画开发有了更为深刻的了解,于是决定动画篇将从UIView动画开始讲起,以后还会有Layer.Transitioning等在内的动画,希望本文能抛砖引玉,带给大家不一

Swift教程_零基础学习Swift完整实例(九)_总结

五.总结 加上写博文的时间,用了前前后后一周左右的时间,每晚2小时左右,完成了这个改造,由于我是第一次碰swift,有些东西还用不顺手,用时比较长.期间还简单学习了一下swift基本语法和部分用法.下面主要说一下我对swift语言的看法以及这次改造中对swift的理解. 1.个人对swift语言的看法 Swift作为苹果公司重推的开发语言,从苹果角度已经声称要取缔objC,估计未来可能会做更大的调整.该语言在我来看有以下特点(是不是优点不同的人不同的看法). 1.弱化了接口这个概念,大家不用再去