iOS动画:开始篇(1)

本篇主要介绍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.把底部作为视图翻转的“枢纽”,从底部翻转动画效果,类似的还有transitionFlipFromLefttransitionFlipFromRighttransitionFlipFromTop
iOS动画:开始篇(1)_第1张图片
2.transitionCurlDown:向前翻页的动画过渡效果。transitionCurlUp向后翻页的动画过渡效果。
iOS动画:开始篇(1)_第2张图片
3.transitionCrossDissolve: 旧视图溶解消失显示下一个新视图的效果。

你可能感兴趣的:(iOS,Swift,动画)