使用自定义动画显示和隐藏按钮

Question

现在我有这样的动画：

UIView.animateWithDuration(0.5) { () -> Void in
   self.scrollToTopBtn.alpha = self.isVisible(self.searchBar.searchBar) ? 0 : 0.6
}

按钮位于屏幕的右下角。我希望她从右到左出现，从左到右消失。 我该怎么做？

Answer 1

实现此目的的一个简单方法是：

1.- 假设let buttonWidth 是您的scrollToTopBtn UIButton 的宽度。

2.- 将您的scrollToTopBtn 放在屏幕的右下角，但要一直超出屏幕边界。这将是按钮的初始状态。

3.- 当你想要它出现时，只需调用以下函数：

斯威夫特 2

func showButton() {
   UIView.animateWithDuration(0.35, animations: { () -> Void in
      self.scrollToTopBtn.transform = CGAffineTransformTranslate(self.scrollToTopBtn.transform, -buttonWidth, 0)
      }, nil)
}

斯威夫特 3、4、5

func showButton() {
    UIView.animate(withDuration: 0.35, animations: { () -> Void in
        self.scrollToTopBtn.transform = self.scrollToTopBtn.transform.translatedBy(x: -buttonWidth, y: 0)
    }, completion: nil)
}

4.- 如果你想让它消失：

斯威夫特 2

func hideButton() {
   UIView.animateWithDuration(0.35, animations: { () -> Void in
      self.scrollToTopBtn.transform = CGAffineTransformTranslate(self.scrollToTopBtn.transform, buttonWidth, 0)
      }, nil)
}

斯威夫特 3、4、5

func hideButton() {
    UIView.animate(withDuration: 0.35, animations: { () -> Void in
        self.scrollToTopBtn.transform = self.scrollToTopBtn.transform.translatedBy(x: buttonWidth, y: 0)
    }, completion: nil)
}

请注意，一个好的做法可能是在运行时创建按钮，在需要时将其添加到层次结构中，然后在使用完成时将其删除。

Answer 2

有很多方法可以做到这一点。最简单的方法是设置按钮的框架。像这样的：

UIView.animateWithDuration(0.5) { () -> Void in
    self.scrollToTopBtn.alpha = self.isVisible(self.searchBar.searchBar) ? 0 : 0.6
    let superViewWidth = self.scrollToTopBtn.superview!.bounds.size.width
    let buttonWidth = self.scrollToTopBtn.frame.size.width

    if(self.isVisible(self.searchBar.searchBar)) { // move it off of the view (towards right)
        self.scrollToTopBtn.frame.origin.x = superViewWidth + buttonWidth
    }
    else { // bring it back to it's position
        self.scrollToTopBtn.frame.origin.x = 10 // or whatever the normal x value for the button is
    }
}

更好的方法

更好的方法是为约束常数设置动画。你可以这样做：

首先在视图控制器中为约束创建一个出口：

@IBOutlet weak var buttonLeadingConstraint: NSLayoutConstraint!

转到界面生成器并将按钮的前导约束连接到buttonLeadingConstraint 出口。

现在您可以像这样对其进行动画处理：

if(self.isVisible(self.searchBar.searchBar)) { // move it off the screen
    self.buttonLeadingConstraint.constant = self.view.bounds.width + 10
}
else {
    self.buttonLeadingConstraint.constant = 10 // or whatever the normal value is
}

// Now animate the change
UIView.animateWithDuration(0.5) { () -> Void in
    self.view.layoutIfNeeded()
}

请注意，您在调用animateWithDuration 之前设置了约束上的常量，并且在动画块内，您只需要在父视图上调用 `layoutIfNeeded'。