美文网首页
iOS动画一:View Animations

iOS动画一:View Animations

作者: 狂奔的胖蜗牛 | 来源:发表于2018-03-26 16:46 被阅读242次

最简单的动画实现方式,使用UIView自带的方法实现。

最基础的用法

UIView.animate(withDuration: 0.5, delay: 0.3, options: [],
  animations: {
    self.username.center.x += self.view.bounds.width
  },
  completion: nil
)
  • withDuration:动画持续的时间
  • delay:动画延时多久执行
  • options:动画执行时的特殊操作,没有填入[]即可
  • animations:执行的动画闭包
  • completion:动画执行结束后要执行的闭包

可以执行的动画内容

1.位置和大小

  • bounds:控制view的bounds
  • frame:控制view的frame
  • center:控制view的中心点

2.外观

  • backgroundColor:可以改变view的背景颜色
  • alpha:可以改变view的透明度

3.变形

  • transform:可以改变view的旋转、缩放、位置等等。

动画操作

1.重复

  • .repeat:一直重复循环
  • .autoreverse:一直往返重复执行

2.缓冲

  • .curveLinear:线性匀速执行
  • .curveEaseIn:开始时加速
  • .curveEaseOut:结束时加速
  • .curveEaseInOut:开始结束时都加速

弹簧效果

如果需要有弹簧的效果,则需要使用animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:optio ns:animations:completion:)该方法。用法如下:

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:设置弹簧阻尼
  • initialSpringVelocity:设置弹簧速度

transition

使用UIView的transition(with:duration: options:animations:completion:)方法实现动画。在添加或者移除一个view时,使用该方法,可以很方便的实现系统定义好的动画。

添加view时

UIView.transition(with: animationContainerView,
    duration: 0.33,
options: [.curveEaseOut, .transitionFlipFromBottom],
    animations: {
      self.animationContainerView.addSubview(newView)
    },
    completion: nil
  )
}

options包括如下列表:

  • .transitionFlipFromLeft
  • .transitionFlipFromRight
  • .transitionCurlUp
  • .transitionCurlDown
  • .transitionCrossDissolve
  • .transitionFlipFromTop
  • .transitionFlipFromBottom

移除view时

UIView.transition(with: animationContainerView, duration: 0.33,
  options: [.curveEaseOut, .transitionFlipFromBottom],
  animations: {
    self.newView.removeFromSuperview()
  },
  completion: nil
)

替换view时

UIView.transition(from: oldView, to: newView, duration: 0.33,
  options: .transitionFlipFromTop, completion: nil)

相关文章

网友评论

      本文标题:iOS动画一:View Animations

      本文链接:https://www.haomeiwen.com/subject/uaprcftx.html