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

时间:2022-01-26 16:36:35

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层级切换,同时会有从左向右推出的效果。
 
   iOS开发——动画篇Swift篇&常用动画总结       iOS开发——动画篇Swift篇&常用动画总结       iOS开发——动画篇Swift篇&常用动画总结
   iOS开发——动画篇Swift篇&常用动画总结       iOS开发——动画篇Swift篇&常用动画总结
 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("动画结束")
 }