美文网首页
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