Layer Animation(二)

Tuesday, March 20, 2018

Layer Animation2

[WPGP gif_id="122” width="400”]

  • 上图中,主要讲几个关键的动画,一个是点击按钮后,热气球的飞行轨迹,另一个是标题的左右摆动,还有一个点击输入框后,字数不符的抖动提醒动画

Layer Springs

  • 首先讲解下输入框的抖动动画,这里用到了 Layer Springs 动画,在之前,我们已经尝试过用 UIView 的 Springs 动画,通过改变 Damping 和 Velocity 两个参数,然后 UIKit 根据给的 duration 来调整动画效果。

  • 那为什么要用Layer Springs 呢,因为上面说到,UIKit 的 Spring 动画效果,很多细节是由系统自动调节,而且看起来略微有点不自然。而 Layer Springs 所有的细节都由自己来调整,能达到更精确的效果。

  • CASpringAnimation 关于弹性动画有如下几个参数可调整

    • damping: 附着在layer 的阻尼,也可理解为空气摩擦力
    • mass:layer 的质量,也就是重量,越大,摆动的时间越长
    • stiffness: 弹簧的刚度,越大的时候越难摆动
    • initialVelocity: 推动的初始重量
  • 代码实现

    let pulse = CASPringAnimation(keyPath: “transform.scale”) pulse.damping = 2.0 pulse.fromValue = 1.25 pulse.toValue = 1.0 pulse.duration = 0.25 layer?.addAnimation(pulse, forKey: nil)

    //如果按照上述代码运行,动画效果将会极其僵硬 //因为设定了0.25的时间,动画将会到0.25时直接停止,而跳过了过渡效果。 //应该设为 settlingDuration pulse.duration = pulse.settlingDuration

    //此时弹性动画即可展现出来,但是幅度过大,可以增加 damping 值,比如设为7.5

  • 刚刚我们说了好几个属性,实际才用到其中 damping 属性,但是这几个属性其实都有默认值了。

    • damping: 10.0
    • mass: 1.0
    • stiffness: 100.0
    • initialVelocity: 0.0
  • 接下来我们实现 textfield 的抖动

    let jump = CASpringAnimation(keyPath: “position.y”) jump.initialVelocity = 100.0 jump.mass = 10.0 jump.stiffness = 1500.0 jump.damping = 50.0

    jump.fromValue = textField.layer.position.y + 1.0 jump.toValue = textField.layer.position.y jump.duration = jump.settlingDuration textField.layer.add(jump, forKey: nil)

  • 还有一个 textField 边框颜色的动画效果,通过设置 layer 属性来实现

    textField.layer.borderWidth = 3.0 textField.layer.borderColor = UIColor.clear.cgColor

    let flash = CASpringAnimation(keyPath: “borderColor”) flash.damping = 7.0 flash.stiffness = 200.0 flash.fromValue = UIColor(red: 1.0, green: 0.27, blue: 0.0, alpha: 1.0).cgColor flash.toValue = UIColor.white.cgColor flash.duration = flash.settlingDuration textField.layer.add(flash, forKey: nil)

Layer Keyframe

  • 同样,我们在 UIView 动画里,也实现过 keyframe 动画,但是,在 layer keyframe 里,可以控制的更精确。

  • 我们先来看看GIF 里标题的左右摆动的动画

    //左右摆动45度,时间点平均分布 let wobble = CAKeyframeAnimation(keyPath: “transform.rotation”) wobble.duration = 0.25 wobble.repeateCount = 4 wobble.values = [0.0, -.pi/4.0, 0.0, .pi/4.0] wobble.keyTimes = [0.0, 0.25, 0.5, 0.75, 1.0] heading.layer.add(wobble, forKey: nil)

  • 当我们修改一些结构体的变量时,需要用 NSValue 封装来修改,比如说位移,下面我们给出热气球的移动动画。

    let flight = CAKeyframeAnimation(keyPath: “position”) flight.duration = 12.0

    //数据组 flight.values = [ CGPoint(x: -50.0, y:0.0), CGPoint(x: view.frame.width + 50.0, y: 160.0) CGPoint(x: -50.0, y: loginButon.center.y) ].map {NSValue(cgPoint: $0)} flight.keyTimes = [0.0, 0.5, 1.0] balloon.add(flight, forKey: nil)

iOS动画

Layer Animation(三)

Layer Animation(一)