iOS UIView动画-IGI

时间：2020-02-23 14:45:59 　来源:igfitidea点击:

在本教程中，我们将在iOS应用程序中以各种方式对UI视图进行动画处理。

iOS UIView动画

动画是构建漂亮的UI的重要组成部分。

以下是可以设置动画的视图的一些基本属性：

center
alpha
frame
bounds
transform
backgroundColor
contentStretch

UIView动画的语法为：

UIView.animate(withDuration:, animations:)
UIView.animate(withDuration:, delay:, animations:)
UIView.animate(withDuration:, delay:, options:, animations:)
UIView.animate(withDuration:, delay:, options:, animations:, completion:)

UIView.animate(withDuration: 5.0, animations: {
          self.myView.alpha = 0
          print("animations")
      })

有延迟：

UIView.animate(withDuration: 5.0, delay: 2.0, animations: {
          self.myView.alpha = 0
          print("animations")
      })

请注意，有两秒钟的延迟：

有选项

UIView.animate(withDuration: 5.0, delay: 2.0, options: [.autoreverse], animations: {
          self.myView.alpha = 0
          print("animations")
      })

有很多可用的选项，我们将在本教程的后面看到。
上面的动画会在动画消失之前自动反转一次动画。

完成时，动画完成时将调用完成处理程序关闭。
我们可以添加一个完成处理程序，如下所示：

UIView.animate(withDuration: 5.0, animations: {
          self.myView.alpha = 0
          print("animations")
      },completion:
          {finished in
              print("Is finished? \(finished)")
              UIView.animate(withDuration: 1.0, animations:{
              self.myView.alpha = 0.5
              },completion: nil)
      })

在此过程中，我们将第一个动画制作完成后链接了另一个动画。

完成是尾随的结束。
我们可以通过调用complete外部函数来增强代码的可读性，如下所示：

UIView.animate(withDuration: 5.0, animations: {
          self.myView.alpha = 0
          print("animations")
      }){finished in
          print("Is finished? \(finished)")
          UIView.animate(withDuration: 1.0, animations:{
              self.myView.alpha = 0.5
          })
      }

注意：完成是布尔值。

以下代码将立即调用完成块。

UIView.animateWithDuration(5.0, animations: {        
  println("animations")
}, completion: { finished in          
  println("completion")
})

这是因为没有UIView具有动画效果。

您必须调用视图并在动画块中为其设置动画。

让我们在新的XCode项目中打开Main.storyboard。
以下是我们为接下来将要执行的三个基本动画创建的UI：

类似地，在ViewController.swift中为其他每个Button创建一个IBAction。

为了将按钮文本设置为两行，请将换行符设置为自动换行。
要转到下一行，请在键入标题时按Option + Ctrl + Enter。

动画色彩

@IBAction func animateColor(_ sender: Any) {

  UIView.animate(withDuration: 1, animations: {
      self.myView.backgroundColor = UIColor.black
  }, completion: nil)

}

动画运动

其中我们以帧原点为参考来更改视图的位置。
x方向为负表示它向左移动。
y方向上的负值表示它到达顶部。

@IBAction func animateMovement(_ sender: Any) {
  UIView.animate(withDuration: 1, animations: {
      self.myView.frame.origin.x -= 40
  }, completion: nil)
  
}

动画大小

其中我们更改框架大小的宽度和高度。

@IBAction func animateSize(_ sender: Any) {
  UIView.animate(withDuration: 1, animations: {
      self.myView.frame.size.width += 40
      self.myView.frame.size.height += 10
  }){ finished in
      UIView.animate(withDuration: 1, animations: {
          self.myView.frame.size.width -= 40
          self.myView.frame.size.height -= 10
      })
  }
}

一起动画

其中我们将为"视图"的大小，颜色和位置设置动画。

@IBAction func animateAllTogether(_ sender: Any) {
  
  if(animationRunning){
      self.myView.layer.removeAllAnimations()
      animationRunning = !animationRunning
  }
  else{
      animationRunning = !animationRunning
  UIView.animate(withDuration: 1, animations: {
      self.myView.backgroundColor = UIColor.green
      self.myView.frame.size.width += 50
      self.myView.frame.size.height += 20
      self.myView.center.x += 20
  }) { _ in
      UIView.animate(withDuration: 1, delay: 0.25, options: [.autoreverse, .repeat], animations: {
          self.myView.frame.origin.y -= 20
      })
  }
  }
}

" animateRunning"是一个布尔变量，用于切换UIView动画。
要停止动画，我们要做：self.myView.layer.removeAllAnimations()。
我们将选项设置为自动反向并永久重复。

上面4个基本动画的输出如下：

接下来，我们将看一下"变换动画"并使用各种选项。

变换动画

我们可以变换比例，旋转视图以显示动画。

以下是情节提要中的设置：

在上面的故事板上，我们将所有4个按钮都链接到相同的IBAction函数。
单击这些按钮中的任何一个将触发相同的功能。
我们可以设置一个按钮标签来相互识别按钮。

动画曲线有4种主要类型：

curveEaseIn
curveEaseOut
curveEaseInOut
curveLinear

注意：因为它们的动画图是曲线，所以它们称为曲线！

要转换动画，我们要做：

self.optionsView.transform = CGAffineTransform(scaleX: 0, y: 0)
          
          UIView.animate(withDuration: 1.0, delay: 0.0, options: [.curveEaseIn], animations: {
              self.optionsView.transform  = .identity
          })

CGAffineTransform设置初始刻度。
self.optionsView.transform = .identity将视图转换为原始比例。

我们可以在各自的按钮标签中设置每个选项，如下所示：

下面给出了上述变换动画的实际应用程序输出：

Spring动画

弹簧动画的行为类似于现实中的弹簧。
凭借其衰减速度和弹性，他们制作了很酷的动画。

可以通过为UIView动画" animate"功能添加以下语法来设置Spring动画。

UIView.animate(withDuration: 1, delay:, usingSpringWithDamping:, initialSpringVelocity:, options: [], animations: , completion:)

" usingSpringWithDamping"需要一个介于0和1之间的数字。
它表示阻尼比。
数值越高，动画越弹性。
初始弹簧速度越高，初始动量越高。

再次，我们在Main.storyboard中为不同的用例创建一个带有4个按钮的StackView：

每次单击任何按钮时，都会触发springAnimationWithOptions函数：

@IBAction func springAnimationWithOptions(_ sender: UIButton!) {
      
      if(sender.tag == 1)
      {
          self.optionsView.transform = CGAffineTransform(scaleX: 0, y: 0)
          UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
              self.optionsView.transform = .identity
          }, completion: nil)
      }
      else if(sender.tag == 2)
      {
          self.optionsView.transform = CGAffineTransform(scaleX: 0, y: 0)
          UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
              self.optionsView.transform = .identity
          }, completion: nil)
      }
      else if(sender.tag == 3)
      {
          self.optionsView.transform = CGAffineTransform(scaleX: 0, y: 0)
          UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
              self.optionsView.transform = .identity
          }, completion: nil)
      }
      else if(sender.tag == 4)
      {
          self.optionsView.transform = CGAffineTransform(scaleX: 0, y: 0)
          UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.8, options: .curveEaseInOut, animations: {
              self.optionsView.transform = .identity
          }, completion: nil)
      }
  }

变换动画–平移，缩放，旋转

我们可以按以下方式缩放平移和旋转：

let translate = CGAffineTransform(translationX: 120, y: 120)
let rotate = CGAffineTransform(rotationAngle: 360)
let scale = CGAffineTransform(scaleX: 2, y: 2)

我们还可以通过使用串联方法将每个链接在一起：

self.view.transform = translate.concatenating(rotate)

我们的Main.storyboard再次将用例的4个按钮挂钩到一个通用的IBAction按钮单击功能：

STRAnimationWithOptions函数的代码如下：

@IBAction func STRAnimationWithOptions(_ sender: UIButton!) {
      
      if(sender.tag == 1)
      {
          let scale = CGAffineTransform(scaleX: 2, y: 2)
          self.optionsView.transform = scale
          UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut, animations: {
              self.optionsView.transform = .identity
          }, completion: nil)
      }
      else if(sender.tag == 2)
      {
          let translate = CGAffineTransform(translationX: -120, y: -120)
          self.optionsView.transform = translate
          UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut, animations: {
              self.optionsView.transform = .identity
          }, completion: nil)
      }
      else if(sender.tag == 3)
      {
          let rotate = CGAffineTransform(rotationAngle: 360)
          self.optionsView.transform = rotate
          UIView.animate(withDuration: 3, delay: 0, options: .curveEaseInOut, animations: {
              self.optionsView.transform = .identity
          }, completion: nil)
      }
      else if(sender.tag == 4)
      {
          let rotate = CGAffineTransform(rotationAngle: 360)
          let translate = CGAffineTransform(translationX: -120, y: -120)
          let scale = CGAffineTransform(scaleX: 2, y: 2)
          self.optionsView.transform = rotate.concatenating(translate).concatenating(scale)
          UIView.animate(withDuration: 3, delay: 0,usingSpringWithDamping: 0.8,initialSpringVelocity: 0.5, options: [.autoreverse,.curveEaseInOut], animations: {
              self.optionsView.transform = .identity
          }, completion: nil)
      }
  }

在上一个中，我们还添加了Spring动画。
检出"缩放旋转转换变换动画"的输出。

过渡选项

除了上面讨论的弯曲动画选项以外，还有其他一些选项。

要创建过渡动画，我们在Swift中执行以下操作：

UIView .transition(with: self.myTextField, duration: 4, options: .transitionCrossDissolve,
                             animations: {
                              self.myTextField.textColor = UIColor.red
          })

让我们以示例的方式查看一些重要的过渡选项。

首先，我们需要在Main.storyboard中设置ViewController的最后一部分：

我们创建了一个UITextField并将其与三个按钮一起链接到ViewController.swift。

下面给出了transitionAnimationWithOptions函数的代码：

@IBAction func transitionAnimationWithOptions(_ sender: UIButton!) {
      
      if(sender.tag == 1)
      {
          UIView .transition(with: self.myTextField, duration: 4, options: .transitionCrossDissolve,
                             animations: {
                              self.myTextField.textColor = UIColor.red
          }){finished in
              self.myTextField.textColor = UIColor.white
          }
      }
      else if(sender.tag == 2)
      {
          UIView .transition(with: self.myTextField, duration: 4, options: .transitionFlipFromRight,
                             animations: {
                              self.myTextField.textColor = UIColor.red
          }){finished in
              self.myTextField.textColor = UIColor.white
          }
      }
      else if(sender.tag == 3)
      {
          UIView .transition(with: self.myTextField, duration: 4, options: .transitionCurlUp,
                             animations: {
                              self.myTextField.textColor = UIColor.red
          })
      }
  }

iOS UIView动画