Swift-动画效果

  • 通过设置视图的transform属性实现动画(效率低,简单)

  • CABasicAnimation实现动画(高效)

  • CAKeyframeAnimation实现动画(根据路径实现帧动画)


一、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/2))
UIView.commitAnimations()
 
//独立旋转,以初始位置旋转
self.imageView.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI/4))

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 = 0

(2)从小变大动画(还原为默认尺寸)

let 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(300, 0.0)
let p3 = CGPointMake(0.0, 400)
let p4 = CGPointMake(300, 400)
let p5 = CGPointMake(150, 200)
 
//赋值
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")

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

animation.delegate = self
 
override func animationDidStart(anim: CAAnimation!) {
    println("动画开始")
}
 
override func animationDidStop(anim: CAAnimation!, finished flag: Bool) {
    println("动画结束")
}

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 6,850评论 4 27
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 3,975评论 5 10
  • 本文转载自:http://www.cocoachina.com/ios/20150105/10812.html 为...
    idiot_lin阅读 873评论 0 1
  • 显式动画 显式动画,它能够对一些属性做指定的自定义动画,或者创建非线性动画,比如沿着任意一条曲线移动。 属性动画 ...
    清风沐沐阅读 1,355评论 1 5
  • 雷海表弟突然去世,今日大敛。千山相隔,作文送别,二孃孃二姑爷白发人送黑发人已是人间惨事,姐姐送你,唯愿留世间美好。...
    米婴阅读 159评论 0 0