iOS开发——动画篇Swift篇&常用动画总结

UIView动画：

UIView动画时最基本的动画，是直接对我们界面上控件进行简单的动画效果实现，如果你只需要用到一些简单的效果，那么这个很适合你，关于UIView动画实现恨简单，

UIKit直接将动画集成到UIView类中，实现简单动画的创建过程。UIView类定义了几个内在支持动画的属性声明，当这些属性发生改变时，视图为其变化过程提供内建的动画支持。

执行动画所需要的工作由UIView类自动完成，但仍要在希望执行动画时通知视图，为此需要将改变属性的代码包装到一个代码块中。

 // MARK: - UIView动画  -------------------------------------

     // MARK: - UIView动画-淡入
     @IBAction func simpleAnimationFadeIn()
     {
         UIView.beginAnimations(nil, context: nil)
         UIView.setAnimationDuration(2.0)//设置动画时间
         testImageView.alpha = 0.0
         UIView.commitAnimations()

 //        //通过闭包实现 UIView淡入小狗
 //        UIView.animateWithDuration(0.3, animations: { () -> Void in
 //            self.testImageView.alpha = 0.0
 //        })
     }

     // MARK: - UIView动画-淡出
     @IBAction func simpleAnimationFadeOut()
     {
         UIView.beginAnimations(nil, context: nil)
         UIView.setAnimationDuration(2.0)//设置动画时间
         testImageView.alpha = 1.0
         UIView.commitAnimations()
     }

     // MARK: - UIView动画-移动
     @IBAction func simpleAnimationMoveCenter()
     {
         UIView.beginAnimations(nil, context: nil)
         UIView.setAnimationDuration(2.0)//设置动画时间
         testImageView.center = CGPointMake(, )
         UIView.setAnimationCurve(UIViewAnimationCurve.EaseOut)//设置动画相对速度
         UIView.commitAnimations()
     }

     // MARK: - UIView动画-大小调整
     @IBAction func simpleAnimationFrame()
     {
         UIView.beginAnimations(nil, context: nil)
         UIView.setAnimationDuration(2.0)//设置动画时间
         testImageView.frame = CGRectMake(, , , )
         UIView.commitAnimations()
     }

BLock动画（属于UIview动画）

 UIView.animateWithDuration(1.0,
     delay: 2.0,
     options: .CurveEaseInOut | .AllowUserInteraction,
     animations: {
       self.bug.center = CGPoint(x: , y: )
     },
     completion: { finished in
       println("Bug moved left!")
       self.faceBugRight()
     })
 }

 func faceBugRight() {
   if isBugDead { return }

   UIView.animateWithDuration(1.0,
     delay: 0.0,
     options: .CurveEaseInOut | .AllowUserInteraction,
     animations: {
       self.bug.transform = CGAffineTransformMakeRotation(CGFloat(M_PI))
     },
     completion: { finished in
       println("Bug faced right!")
       self.moveBugRight()
     })
 }

 func moveBugRight() {
   if isBugDead { return }

   UIView.animateWithDuration(1.0,
     delay: 2.0,
     options: .CurveEaseInOut | .AllowUserInteraction,
     animations: {
       self.bug.center = CGPoint(x: , y: )
     },
     completion: { finished in
       println("Bug moved right!")
       self.faceBugLeft()
     })
 }

 func faceBugLeft() {
   if isBugDead { return }

   UIView.animateWithDuration(1.0,
     delay: 0.0,
     options: .CurveEaseInOut | .AllowUserInteraction,
     animations: {
       self.bug.transform = CGAffineTransformMakeRotation(0.0)
     },
     completion: { finished in
       println("Bug faced left!")
       self.moveBugLeft()
     })
 }

使用CATransition制作过渡动画（页面切换转场效果）

 

CATransition动画主要在过渡时使用，比如两个页面层级改变的时候添加一个转场效果。CATransition分为两类，一类是公开的动画效果，一类是非公开的动画效果。

1，公开动画效果：

• kCATransitionFade：翻页
• kCATransitionMoveIn：弹出
• kCATransitionPush：推出
• kCATransitionReveal：移除

2，非公开动画效果：

• "cube"：立方体
• "suckEffect"：吸收
• "oglFlip"：翻转
• "rippleEffect"：波纹
• "pageCurl"：卷页
• "cameraIrisHollowOpen"：镜头开
• "cameraIrisHollowClose"：镜头关

3，动画方向类型：

• kCATransitionFromRight：从右侧开始实现过渡动画
• kCATransitionFromLeft：从左侧开始实现过渡动画
• kCATransitionFromTop：从顶部开始实现过渡动画
• kCATransitionFromBottom：从底部开始实现过渡动画

 

4，下面通过一个样例演示：

页面上添加两个分别是红色，蓝色的UIView。当点击屏幕的时候，这两个UIView层级切换，同时会有从左向右推出的效果。

 

                 
          

 import UIKit

 class ViewController: UIViewController {

     override func viewDidLoad() {
         super.viewDidLoad()

         var redView:UIView = UIView(frame: CGRectMake(,,,))
         redView.backgroundColor = UIColor.redColor()
         self.view.insertSubview(redView, atIndex: )

         var blueView:UIView = UIView(frame: CGRectMake(,,,))
         blueView.backgroundColor = UIColor.blueColor()
         self.view.insertSubview(blueView, atIndex: )
     }

     //点击切换两个红蓝视图
     override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
         var transition = CATransition()
         transition.duration = 3.0
         transition.type = kCATransitionPush //推送类型
         transition.subtype = kCATransitionFromLeft //从左侧
         self.view.exchangeSubviewAtIndex(, withSubviewAtIndex: )
         self.view.layer.addAnimation(transition, forKey: nil)
     }

     override func didReceiveMemoryWarning() {
         super.didReceiveMemoryWarning()
     }
 }

通过设置视图的transform属性实现动画

 

设置视图对象的transform属性，可以实现各种动画效果。

 

1，移动

指在同一平面内，将控件按照某个直线方向平移一定的距离。

 //每次都从当前位置平移
 self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, -2.1, -2.1)

 //每次都从最开始的位置计算平移
 self.imageView.transform = CGAffineTransformMakeTranslation(2.3, 2.3)

2，旋转

 //连续旋转
 UIView.beginAnimations(nil, context: nil)
 UIView.setAnimationDuration(3.0) //设置动画时间
 self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, CGFloat(-M_PI/))
 UIView.commitAnimations()

 //独立旋转，以初始位置旋转
 self.imageView.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI/))

3，缩放

 //连续缩放
 UIView.beginAnimations(nil, context: nil)
 UIView.setAnimationDuration(3.0) //设置动画时间
 self.imageView.transform = CGAffineTransformScale(self.imageView.transform, 1.5 ,1.5)
 UIView.commitAnimations()

 //独立缩放，以初始位置缩放
 self.imageView.transform = CGAffineTransformMakeScale(1.3, 1.3)

4，反转

 //返回初始状态
 self.imageView.transform = CGAffineTransformIdentity

 //连续反转
 UIView.beginAnimations(nil, context: nil)
 UIView.setAnimationDuration(3.0) //设置动画时间
 self.imageView.transform = CGAffineTransformConcat(self.imageView.transform,
     CGAffineTransformInvert(self.imageView.transform))
 UIView.commitAnimations()

 //独立反转，以初始位置反转
 self.imageView.transform = CGAffineTransformInvert(self.imageView.transform)

使用CABasicAnimation实现动画效果

 

1，CABasicAnimation类只有三个属性：

• fromValue：开始值
• toValue：结束值
• Duration：动画的时间

 

2，通过animationWithKeyPath键值对的方式设置不同的动画效果

• transform.scale
• transform.scale.x
• transform.scale.y
• transform.rotation.z
• opacity
• margin
• zPosition
• backgroundColor
• cornerRadius
• borderWidth
• bounds
• contents
• contentsRect
• cornerRadius
• frame
• hidden
• mask
• masksToBounds
• opacity
• position
• shadowColor
• shadowOffset
• shadowOpacity
• shadowRadius

 

3，使用样例

（1）改变透明度动画（逐渐消失）

 let animation = CABasicAnimation(keyPath: "opacity")
 animation.fromValue = 1.0
 animation.toValue = 0.0
 animation.duration = 3.0
 self.imageView.layer.addAnimation(animation, forKey: "Image-opacity")
 self.imageView.alpha = 

（2）从小变大动画（还原为默认尺寸）

 et animation = CABasicAnimation(keyPath: "bounds.size")
 animation.fromValue = NSValue(CGSize: CGSizeMake(2.0, 2.0))
 animation.toValue = NSValue(CGSize: self.imageView.frame.size)
 animation.duration = 3.0
 self.imageView.layer.addAnimation(animation, forKey: "Image-expend")

使用CAKeyframeAnimation实现关键帧动画

 

1，CAKeyframeAnimation介绍

CAKeyframeAnimation可以实现关键帧动画，这个类可以实现某一属性按照一串的数值进行动画，就像是一帧一帧的制作出来一样。

 

2，使用样例（设置五个关键点坐标，图片依次按关键点移动）

 let animation = CAKeyframeAnimation(keyPath: "position")

 //设置5个位置点
 let p1 = CGPointMake(0.0, 0.0)
 let p2 = CGPointMake(, 0.0)
 let p3 = CGPointMake()
 let p4 = CGPointMake(, )
 let p5 = CGPointMake(, )

 //赋值
 animation.values = [NSValue(CGPoint: p1), NSValue(CGPoint: p2),
     NSValue(CGPoint: p3), NSValue(CGPoint: p4), NSValue(CGPoint: p5)]

 //每个动作的时间百分比
 animation.keyTimes = [NSNumber(float: 0.0), NSNumber(float: 0.4),
     NSNumber(float: 0.6), NSNumber(float: 0.8), NSNumber(float: 1.0), ]

 animation.delegate = self
 animation.duration = 6.0

 self.imageView.layer.addAnimation(animation, forKey: "Image-Move")

3，可以设置动画代理，监听开始和结束动作

 animation.delegate = self

 override func animationDidStart(anim: CAAnimation!) {
     println("动画开始")
 }

 override func animationDidStop(anim: CAAnimation!, finished flag: Bool) {
     println("动画结束")
 }