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("动画结束") }