iOS动画——Layer Animations(二)



上一篇我们初步了解了一下Layer Animations,并且做了一个还算看的过去的动画,这一篇继续介绍一些Layer Animations的一些使用。
这是上一篇的地址: iOS动画——Layer Animations(一) (感觉不错的话请关注我哦~)
Core Animation相对于UIView Animation的优势在哪呢,其一就是你能够操作动画的过程,对动画的操作更加详细。


既然我们需要监控整个动画过程,很显然我们需要继承一个协议。然而,我们并不需要去写代码去继承一个协议,每一个NSObject都早已经继承了这么两个方法:

override func animationDidStop(anim: CAAnimation!, finished flag: Bool) {}
override func animationDidStart(anim: CAAnimation!) {}

当很多个CABasicAnimation都设置了.delegate = self的时候,我们如何再上述两个函数中区分呢?我们可以给 CABasicAnimation设置value,像这样:

caBasic.setValue("Value", forKey: "key")

然后你就能这么识别:

if let name = anim.valueForKey("name") as? String {
    if name == "Vaule" {
        println("This is caBasic")
    }
}

那么有什么用呢,这个就要考想象力了~~


前面我们创建了一些CABasicAnimation,在这里我们再介绍一个CAAnimation类——CAAnimationGroup,这个类的作用就是将许多动画放在一起,统一管理。像下面这样:

let groupAnimation = CAAnimationGroup()
    groupAnimation.beginTime = CACurrentMediaTime() + 0.5
    groupAnimation.duration = 0.5
    groupAnimation.fillMode = kCAFillModeBackwards
    groupAnimation.timingFunction = CAMediaTimingFunction(
      name: kCAMediaTimingFunctionEaseIn)

    let scaleDown = CABasicAnimation(keyPath: "transform.scale")
    scaleDown.fromValue = 3.5
    scaleDown.toValue = 1.0

    let rotate = CABasicAnimation(keyPath: "transform.rotation")
    rotate.fromValue = CGFloat(M_PI_4)
    rotate.toValue = 0.0

    let fade = CABasicAnimation(keyPath: "opacity")
    fade.fromValue = 0.0
    fade.toValue = 1.0

    groupAnimation.animations = [scaleDown, rotate, fade]
    loginButton.layer.addAnimation(groupAnimation, forKey: nil)

像上述那样,我们就给一个对象添加了一组动画,注意动画时间并不是一个结束后执行另一个!

CAAnimationGroup还有一个属性:timingFunction,他控制这一组动画的运行状态,他有一下几个值:

kCAMediaTimingFunctionEaseIn:

运行速度开始慢,然后加速.png
运行速度开始慢,然后加速.png

kCAMediaTimingFunctionEaseOut:

1.png
1.png

kCAMediaTimingFunctionEaseInEaseOut:

1.png
1.png

kCAMediaTimingFunctionLinear:
默认的就是这个值,这个值就是速度保持一定。

这里还有几个CABasicAnimation的属性:

  • .repeatCount:重复次数
  • .speed:动画运行速度(.speed = 2,意为以原本两倍速度运行,时间减半,运行次数不变。)
  • view.layer.speed = 2.0:如此操作,将给view上的所有动画加速一倍。

继续介绍一个新的类CAKeyframeAnimation,这个类和前面大不相同,前面的 CABasicAnimation动画是从.fromValue.toValue。而CAKeyframeAnimation类则是更加精确的控制动画,我们可以这样定义一个CAKeyframeAnimation类:

let wobble = CAKeyframeAnimation(keyPath: "transform.rotation") wobble.duration = 0.25
wobble.repeatCount = 4
wobble.values = [0.0, -M_PI_4/4, 0.0, M_PI_4/4, 0.0] 
wobble.keyTimes = [0.0, 0.25, 0.5, 0.75, 1.0] 
heading.layer.addAnimation(wobble, forKey: nil)

我们看到了什么?在这个类当中将value分割成了很多部分,然后对每一个部分都有一个对应的完成时间,和前面的 CABasicAnimation比较,我们可以将它理解为,将froemValue*toValueduration分割成n个部分,那么这样做的好处就是对动画的控制更加精确。

我们来看这样一个动画:

9.gif
9.gif
  • 当我们点击Log In按钮以后,从左上角出现了一个热气球,热气球从左上角先是右下方移动,移动到头以后继续向左下角移动,那么这个动画很明显分为三个点,那么先后到达这三个点就可以实现动画。
    来看一下代码:
    let balloon = CALayer()
    balloon.contents = UIImage(named: "balloon")!.CGImage
    balloon.frame = CGRect(x: -50.0, y: 0.0,width: 50.0, height: 65.0)
    view.layer.insertSublayer(balloon, below: username.layer)

    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: loginButton.center.y)
      ].map { NSValue(CGPoint: $0) }
     flight.keyTimes = [0.0, 0.5, 1.0]
    balloon.addAnimation(flight, forKey: nil)
  • 代码较为容易理解,我们将 flight.values分为了三段,并且给每一段都设定了完成时间,最后一步就是给视图添加动画。

这一篇的东西比较零散,不过我们还是有一个Demo的。
这是Github地址:https://github.com/superxlx/iOS_Animation_Test4

如果觉得这篇文章不错的话请点赞,并关注本人。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值