UIView(Animation options)swift3.
2016-11-13 本文已影响396人
断忆残缘
终于空闲下来了,如今花一些时间学习我喜欢的动画。
今天着重研究UIViewAnimationOptions
1. 动画重复(Repeating)
.repeat: 让动画一直重复执行
.autoreverse: 配合.repeat使用,使动画反转并持续执行
2. 动画缓和(Animation easing)
.linear: 让动画保持匀速
.curveEaseIn: 在动画开始时加速
.curveEaseOut: 在动画结束时减速
.curveEaseInOut: 相当于[.curveEaseIn, .curveEaseOut]的组合,在开始加速和在结束动画时减速
3. 弹性动画(Spring animations)
// 方法展现与参数分析
UIView.animate(withDuration: 0.5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.0, options: [], animations: {
self.loginButton.center.y -= 30
self.loginButton.alpha = 1.0
}, completion: nil)
• usingSpringWithDamping: 设置弹性动画的阻尼(范围:0.0~1.0),越接近0.0弹性越大,反之则越小。
• initialSpringVelocity: 控制动画初始速度。
4. 转换动画(Transitions)
转换动画选项列表
.transitionFlipFromLeft, // 从左边翻转
.transitionFlipFromRight, // 从右边翻转
.transitionFlipFromTop, // 从底部翻转
.transitionFlipFromBottom, // 从底部翻转
.transitionCurlUp, // 卷上去
.transitionCurlDown, // 卷下来
.transitionCrossDissolve // 交叉溶解
增加一个视图(Adding a new view)
var animationContainerView: UIView?
override func viewDidLoad() {
super.viewDidLoad()
animationContainerView = UIView(frame: view.bounds)
view.addSubview(animationContainerView!)
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
}
override func viewDidAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// create new view
let newView = UIImageView()
newView.image = UIImage(named: "e50")
newView.frame.size = CGSize(width: 50, height: 50)
newView.center = animationContainerView!.center
// add the new view via transition
UIView.transition(with: animationContainerView!,
duration: 0.33,
options: [.curveEaseOut, .transitionFlipFromBottom],
animations: { self.animationContainerView?.addSubview(newView) },
completion: nil)
}
移除一个视图(Removing a view)
// remove the view via transition
UIView.transition(with: newView,
duration: 0.33,
options: [.curveEaseOut, .transitionFlipFromBottom],
animations: { self.newView.removeFromSuperview() },
completion: nil)
隐藏/显示一个视图(Hiding/showing a view)
// hide the view via transition
UIView.transition(with: self.newView,
duration: 0.33,
options: [.curveEaseOut, .transitionFlipFromBottom],
animations:{ self.newView.isHidden = true },
completion: nil)
替换一个视图(Replacing a view with another view)
注意事项,需要设置新视图frame,即大小和位置。
// replace via transition
UIView.transition(from: newView,
to: oldView,
duration: 0.33,
options: .transitionFlipFromTop,
completion: nil)
5. 关键帧动画(Keyframe animations)
UIViewKeyframeAnimationOptions选项如下:
.calculationModeLinear, // 连续运算模式,线性
.calculationModeDiscrete, // 离散运算模式,只显示关键帧
.calculationModePaced, // 均匀执行运算模式,线性
.calculationModeCubic, // 平滑运算模式
.calculationModeCubicPaced // 平滑均匀运算模式
11月-14-2016 18-33-21.gif
demo
func planeDepart() {
// 记录初始位置
let originalCenter = planeImage.center
// 设置动画总时间为1.5秒, options动画
UIView.animateKeyframes(withDuration: 1.5, delay: 0.0, options: [], animations: {
// add keyframes
// 下面使用的事件都是相对事件(相对于当前1.5s),范围为(0.0~0.1)
UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25, animations: {
self.planeImage.center.x += 80.0
self.planeImage.center.y -= 10.0
})
UIView.addKeyframe(withRelativeStartTime: 1.0, relativeDuration: 0.4, animations: {
self.planeImage.transform = CGAffineTransform(rotationAngle: .pi * 0.125)
})
UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25, animations: {
self.planeImage.center.x += 100.0
self.planeImage.center.y -= 50
self.planeImage.alpha = 0.0
})
UIView.addKeyframe(withRelativeStartTime: 0.51, relativeDuration: 0.01, animations: {
self.planeImage.transform = CGAffineTransform.identity
self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y)
})
UIView.addKeyframe(withRelativeStartTime: 0.55, relativeDuration: 0.45, animations: {
self.planeImage.alpha = 1.0
self.planeImage.center = originalCenter
})
}, completion: nil)
}