0、动画基础
- 主要动画属性
1、XY坐标属性：Position（左上角为原点）
2、透明度属性：Opacity（透明：0.0，不透明：1.0）
3、缩放属性：Scale（调整对象的尺寸，如对话框的显示）
4、其他属性：Color(颜色属性)、Rotate(旋转属性)、3D属性(如3D翻转)
- 思考动画是如何形成的
1、动画开始时对象的属性
2、动画结束时对象的属性
3、动画执行的时间
4、在动画执行过程中会发生什么
5、动画结束后会发生什么
- 动画曲线
1、线性匀速变化（Linear）
2、以慢速开始：加速变化（Ease In）
3、先加速后减速的变化（Ease In，Ease Out）
4、以慢速结束：减速变化（Ease Out）
1、UIKit和Core Animation
- 架构
|
UIKit(iOS) and Appkit(OS X) Core Animation OpenGL ES and OpenGL Core Graphics Graphics Hardware |
- 实例
|
//创建 let redBall = UIView(frame: CGRectMake(50, 50, 100, 100)) redBall.backgroundColor = UIColor.redColor() redBall.layer.cornerRadius = 50 self.view.addSubview(redBall) //球的放大动画 UIView.animateWithDuration(0.5, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in redBall.transform = CGAffineTransformMakeScale(2, 2) }) { (finished:Bool) -> Void in print("finished") } |
|
override func viewDidLoad() { super.viewDidLoad() //创建 let redBall = UIView(frame: CGRectMake(50, 50, 100, 100)) redBall.backgroundColor = UIColor.redColor() redBall.layer.cornerRadius = 50 self.view.addSubview(redBall) //球的放大动画 UIView.animateWithDuration(0.5, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in // redBall.transform = CGAffineTransformMakeScale(2, 2) //组合动画,CGAffineTransformConcat redBall.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(2.0, 2.0), CGAffineTransformMakeTranslation(150, 50)) }) { (finished:Bool) -> Void in print("finished") } } |
组合动画：CGAffineTransformConcat
|
override func viewDidLoad() { super.viewDidLoad() //创建 let redBall = UIView(frame: CGRectMake(50, 50, 100, 100)) redBall.backgroundColor = UIColor.redColor() redBall.layer.cornerRadius = 50 self.view.addSubview(redBall) //球的放大动画 UIView.animateWithDuration(0.5, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in // redBall.transform = CGAffineTransformMakeScale(2, 2) //组合动画,CGAffineTransformConcat redBall.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(2.0, 2.0), CGAffineTransformMakeTranslation(150, 50)) redBall.backgroundColor = UIColor.greenColor() }) { (finished:Bool) -> Void in print("finished") } } |
弹性动画（spring Animation）,iOS 7.0以后有此动画
|
//创建 let redBall = UIView(frame: CGRectMake(50, 50, 100, 100)) redBall.backgroundColor = UIColor.redColor() redBall.layer.cornerRadius = 50 self.view.addSubview(redBall) //弹性动画，iOS 7.0以后有此动画 UIView.animateWithDuration(2.0, delay: 0, usingSpringWithDamping: 0.3,//弹性阻尼，取值范围是0-1，越接近0，动画的弹性效果就越明显；如果设置为1，则动画不会有弹性效果 initialSpringVelocity: 0,//视图在动画开始时的速度，通常都应该传入0 options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in redBall.transform = CGAffineTransformConcat( CGAffineTransformMakeScale(2, 2),CGAffineTransformMakeTranslation(150, 50) ) redBall.backgroundColor = UIColor.greenColor() }) { (finished:Bool) -> Void in print("finished") } |
2、JNWSpringAnimation
3、Facebook Pop（Facebook Paper）