Swift

Swift Animation 内容层动画(二)

Posted by Calvin on 2017-06-24

CAkeyframeAnimation 是 CAlayer 层下的关键帧动画类,利用该类可以实现类似 UIView 的关键帧动画效果。 CAkeyframeAnimation 是 CApropertyAnimation 的一个子类,与 CABasicAnimation 原理类似,都是通过修改当前 CAlayer 图层的 value 属性来实现动画效果。不同的是 CABasicAnimation 一般只能使用 fromValue、 toValue、 byValue,即只能修改一个 value 值。而 CAkeyframeAnimation 则可以修改一组 vale 值来实现对动画更为精确细腻的控制。

CAkeyframeAnimation 动画属性要点

CAkeyframeAnimation 的使用很简单,只需在合适的位置设置相应的关键帧即可。而选取合适的位置、设置合适的关键帧都离不开 CAkeyframeAnimation 的各种属性。下面就对 CAkeyframeAnimation 的各种常用属性做一个解析。

(1) values:该属性是一个数组类型,数组中的每个元素都描绘了一个关键帧的相关属性。比如描述关键帧位置的动画时, values描述的是位置信息。描述关键帧淡入淡出动画时, values描述的是透明度渐变信息。

(2) keyTimes:默认情况下,关键帧在动画的展示周期内是均匀播放的,但是如果设置了这个属性,就可以精确控制每个关键帧显示的周期。这个属性的取值范围在0~1之间。所以每个关键帧显示的周期为 keyTimes*duration。

(3)path:如果通过 values 属性可以对动画进行比较细腻的控制,那么通过 path 属性则可以对动画的细节部分控制得更为精确。因为通过设置 CGPathRef\CGMutablePathRef 可以让动画按照自己绘制的路径随心所欲地运行。

CAkeyframeAnimation 淡出动画效果

let view:UIView = UIView()
view.backgroundColor = UIColor.red
view.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
self.view.addSubview(view)
let animation:CAKeyframeAnimation = CAKeyframeAnimation()
animation.duration = 10.0
animation.keyPath = "opacity"
let valuesArray:[NSNumber] = [NSNumber(value: 0.95 as Float),
                            NSNumber(value: 0.90 as Float),
                            NSNumber(value: 0.88 as Float),
                            NSNumber(value: 0.85 as Float),
                            NSNumber(value: 0.35 as Float),
                            NSNumber(value: 0.05 as Float),
                            NSNumber(value: 0.0 as Float)]
animation.values = valuesArray
animation.fillMode = kCAFillModeForwards
animation.isRemovedOnCompletion = false
view.layer.add(animation, forKey: nil)

CAkeyframeAnimation 任意路径动画

飞机直线飞行

imageView.frame = CGRect(x:50,y:50,width:50,height:50)
imageView.image = UIImage(named: "Plane.png")
self.view.addSubview(imageView)
let pathLine:CGMutablePath = CGMutablePath()
pathLine.move(to: CGPoint(x:50,y:50))
pathLine.addLine(to: CGPoint(x:300,y:50))
   
let animation:CAKeyframeAnimation = CAKeyframeAnimation()
animation.duration = 2.0
animation.path = pathLine
animation.keyPath = "position"
animation.fillMode = kCAFillModeForwards
animation.isRemovedOnCompletion = false
imageView.layer.add(animation, forKey: nil)

CAAnimationGroup 组合动画效果

loginButton = UIButton(frame: CGRect(x:20,y:230,
                                   width:self.view.frame.width-20*2,height:50))
loginButton!.backgroundColor = UIColor(red: 50/255.0,
                                            green: 185/255.0, blue: 170/255.0, alpha: 1.0)
loginButton!.setTitle("登陆", for:UIControlState.normal)
self.view.addSubview(loginButton!)
let rotate:CABasicAnimation = CABasicAnimation()
rotate.keyPath = "transform.rotation"
rotate.toValue = M_PI
let scale:CABasicAnimation = CABasicAnimation()
scale.keyPath = "transform.scale"
scale.toValue = 0.0
let move:CABasicAnimation = CABasicAnimation()
move.keyPath = "transform.translation"
move.toValue = NSValue(cgPoint:CGPoint(x:217,y:-230))
let animationGroup:CAAnimationGroup = CAAnimationGroup()
animationGroup.animations = [rotate,scale,move];
animationGroup.duration = 2.0;
animationGroup.fillMode = kCAFillModeForwards;
animationGroup.isRemovedOnCompletion = false
loginButton?.layer.add(animationGroup, forKey:
  nil)
override func viewWillAppear(_ animated: Bool) {
//阴影渐变
   loginButton?.layer.shadowColor = UIColor.red.cgColor
   loginButton?.layer.shadowOpacity = 0.5
   let animation:CABasicAnimation = CABasicAnimation()
   animation.keyPath = "shadowOffset"
   animation.toValue = NSValue(cgSize: CGSize(width: 10, height: 10))
   animation.duration = 2.0
   animation.fillMode = kCAFillModeForwards
   animation.isRemovedOnCompletion = false
   loginButton?.layer.add(animation, forKey: nil)
}

本文代码:点击查看


FEATURED TAGS
Swift
FRIENDS