本篇主要介绍iOS中一些基本的动画实现方法。
基本动画
UIView.animate(withDuration: 0.5) {
self.heading.center.x += self.view.bounds.width
}
调用UIView的类方法 animate(withDuration:animations:) 后动画立刻开始,并执行0.5秒
UIView.animate(withDuration: 0.5, delay: 0.3, options: [],
animations: {
self.username.center.x += self.view.bounds.width
},
completion: nil
)
withDuration:动画持续时间
delay:动画延迟多少秒后执行
options:定制一些动画效果,空数组[]表示没有特别的设置
animations:动画block
completion:动画完成后的block
options可选值:
.repeat: 动画一直循环执行
.autoreverse: 此属性通常结合repeat使用,当动画向前执行后自动反转执行,例如
UIView.animate(withDuration: 0.5, delay: 0.4,
options: [.repeat, .autoreverse],
animations: {
self.password.center.x += self.view.bounds.width
},
completion: nil
)
.curveLinear: 线性执行,没有加速效果,也没有减速效果
.curveEaseIn: 动画开始时逐渐加速执行
.curveEaseOut: 动画结束时减速执行
.curveEaseInOut: 动画加速开始执行,动画结束时减速执行
弹簧效果
UIView.animate(withDuration: 0.5, delay: 0.5,
usingSpringWithDamping: 0.5, initialSpringVelocity: 0.0, options: [], animations: {
self.loginButton.center.y -= 30.0
self.loginButton.alpha = 1.0
}, completion: nil)
usingSpringWithDamping: 弹簧的阻尼系数,对弹簧阻力的控制参数,参数值接收0.0到1.0,值越大弹簧越笨重。
initialSpringVelocity: 弹簧的初始速度,默认值为0
转变效果
UIView.transition(with: animationContainerView,
duration: 0.33,
options: [.curveEaseOut, .transitionFlipFromBottom],
animations: {
self.animationContainerView.addSubview(newView)
},
completion: nil
)
这段代码以动画的形式在容器上添加一个新的view。
1.把底部作为视图翻转的“枢纽”,从底部翻转动画效果,类似的还有transitionFlipFromLeft、transitionFlipFromRight、transitionFlipFromTop
2.transitionCurlDown:向前翻页的动画过渡效果。transitionCurlUp向后翻页的动画过渡效果。
3.transitionCrossDissolve: 旧视图溶解消失显示下一个新视图的效果。