iOS动画指南 – 2.Layer Animations的基本使用

11924285-ab8ed0935551c26e

上篇View Animations可以实现一些简单的动效,但并不能够完全满足开发使用,自定义程度比较低,为此我们来学习下Layer Animations.
那么Layer有哪些可以自定义动画的属性呢?

  • 位置和尺寸: bounds position transform
  • 边框: borderColor borderWidth cornerRadius
  • 阴影: shadowOffset shadowOpacity shadowPath shadowRadius
  • 内容: contents mask opacity

等等,以上仅仅只是一部分.

1.开篇

还是先从位移说起吧!还记得在上一篇View Animations中是怎么实现的吗?
现在我们可以这样做:

12924285-7b5fc5d89905495d

这边会碰到一个问题,当动画结束后dogImageView会立即返回初始的状态,那么如果要dogImageView保持在结束状态该怎样做呢?

设置fillMode的属性就行了.

fillMode的几个值的分别代表的含义:

  • kCAFillModeRemoved : 默认样式 动画结束后会回到layer的开始的状态
  • kCAFillModeForwards : 动画结束后,layer会保持结束状态
  • kCAFillModeBackwards : layer跳到fromValue的值处,然后从fromValue到toValue播放动画,最后回到layer的开始的状态
  • kCAFillModeBoth : kCAFillModeForwards和kCAFillModeBackwards的结合,即动画结束后layer保持在结束状态

fillMode = kCAFillModeBoth 演示效果:

13924285-5a94f3ed4bd21785

dogImageView的初始位置为80,然后跳到100,从100开始执行动画,停在最终位置.
左面是控制台,我们给dogImageView添加了一个点击监听,发现dogImageView的位置表面上看起来是改变了,其实它还在原来的位置,也就是说layer动画并不是真实的,如果要变成真实的需要改变其position,那问题来了这个效果的使用场景是什么?
答:视图不需要交互,且动画的开始和结束需要设置特殊的值.

2.代理

如果我想在动画开始和结束的时候分别搞点事情该怎样做呢?对的,可以用代理呀!
设置下代理就能实现代理方法了.

使用Layer Animations可以设置好一个Animation,然后添加到不同的view上面,但这时如果我们设置了flyRight的代理,并将flyRight添加到了很多的view上面,那该怎样才能在代理方法中区分哪个是哪个呢?
用KVC设置一个name然后在代理中做一下判断就行了.

在动画结束时做一个特效

14924285-2a5e9a1649abfee1

3.在动画的执行过程中移除动画

在设计交互中,常常会碰到这样的一个问题,在动画的执行过程中,由于用户的点击操作,需要提前终止动画,该怎么实现呢?很简单

4.动画组

还记得View Animations中的动画组吗?在Layer Animations依然有这个,只不过这次添加进去的动画是同时执行的.

15924285-1ec2a1699dcdd05f

5.Layer的弹簧效果

还记得前面View Animations中的弹簧效果吗?底层实际上就是通过下面要介绍的CASpringAnimation来实现.
CASpringAnimation是CABasicAnimation的子类,用于实现弹簧动画。

CASpringAnimation的重要属性:

  • mass:质量(影响弹簧的惯性,质量越大,弹簧惯性越大,运动的幅度越大)
  • stiffness:弹性系数(弹性系数越大,弹簧的运动越快)
  • damping:阻尼系数(阻尼系数越大,弹簧的停止越快)
  • initialVelocity:初始速率(弹簧动画的初始速度大小,弹簧运动的初始方向与初始速率的正负一致,若初始速率为0,表示忽略该属性)
  • settlingDuration:结算时间(根据动画参数估算弹簧开始运动到停止的时间,动画设置的时间最好根据此时间来设置)

    16924285-1f4ac674c39a9010

5.总结

这一篇介绍了CABasicAnimation,以及子类CAAnimationGroup,CASpringAnimation的基本使用.

本文整理自 : iOS.Animations.by.Tutorials.v2.0
源码 : https://github.com/DarielChen/DemoCode
如有疑问,欢迎留言 :-D

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部