swift2.0 CASpringAnimation 和 UIView.animateWithDuration 分别实现弹性动画

最新推荐文章于 2022-08-23 14:22:15 发布

原创最新推荐文章于 2022-08-23 14:22:15 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#swift #界面

swift 同时被 2 个专栏收录

20 篇文章

订阅专栏

ios 动画特效

6 篇文章

订阅专栏

本文介绍在iOS应用中实现弹性动画的方法。使用UIView.animateWithDuration及CASpringAnimation两种方式，前者适用于iOS 7及以上版本，后者则从iOS 9开始提供且向下兼容。文中详细解释了如何设置阻尼系数、质量等参数以获得不同的弹性效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我创建了两个view 一个红色的一个黄色的分别代表两个方法要实现动画的界面

    var readView:UIView!
    var yellowView:UIView!

    override func viewDidLoad() {

        super.viewDidLoad()
        readView = UIView(frame: CGRectMake(0, 60, 60, 60))
        readView.backgroundColor = UIColor.redColor()
        self.view.addSubview(readView)


        yellowView = UIView(frame: CGRectMake(0, 140, 60, 60))
        yellowView.backgroundColor = UIColor.yellowColor()
        self.view.addSubview(yellowView)


        // Do any additional setup after loading the view, typically from a nib.
    }

我们将在 override func viewDidAppear(animated: Bool）方法里实现两个动画
首先我们实现UIView 动画用 UIView Animate 来实现动画
但是这个方法是ios7 的方法如何(ˇˍˇ）想～兼容ios6 就没有办法用这个函数了

 SpringDamping 阻尼系数 0~1 系数越小 弹性越明显
  SpringVelocity 速度
  i

        UIView.animateWithDuration(1, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 10, options: .CurveEaseOut , animations: { () -> Void in

            self.readView.center.x = 200

            }) { (Bool) -> Void in

        }

ios9 后苹果推出了CASpringAnimation 方法来实现弹性动画
它继承了 CABasicAnimation 通过layer来实现弹性动画的
好处是向下兼容的
下面是黄色View实现的动画代码

        let springAnimation = CASpringAnimation(keyPath: "position.x")
        springAnimation.damping = 5         //阻尼系数 0 ~ 10
        springAnimation.mass    = 1         //弹簧末端的质量 大于 0 质量越大弹性就越大
        springAnimation.initialVelocity = 5 //速度
        springAnimation.stiffness = 80;      //弹簧刚度系数 0 到 100 系数越大力就越大
        springAnimation.fromValue =  yellowView.layer.position.x //起始的位置
        springAnimation.toValue   =  yellowView.layer.position.x + CGFloat(200) //结束位置
        springAnimation.duration  =  springAnimation.settlingDuration //结束时间

        yellowView.layer.addAnimation(springAnimation, forKey:  springAnimation.keyPath)

这时候我们的简单的弹性动画就实现
动画结束后我们发现位置又恢复了以前的位置
加上下面两行代码就停止在我们改变的地方了

springAnimation.removedOnCompletion = false
springAnimation.fillMode = kCAFillModeForwards