【问题标题】:How to make a bounce effect for a button如何为按钮制作弹跳效果
【发布时间】:2016-03-05 12:17:33
【问题描述】:

我正在尝试为视图中的按钮制作弹跳效果。我想让我的按钮做这样的事情

How to create a UIView bounce animation?

我正在使用此代码执行此操作,但它不流畅...

UIView.animateWithDuration(0.5, delay: 0.0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: [], animations: ({
        self.image.center.y = self.view.frame.height / 4
    }), completion: nil)
    UIView.animateWithDuration(0.7, delay: 0.2, usingSpringWithDamping: 1, initialSpringVelocity: 0.8, options: [], animations: ({
        self.image.center.y = self.view.frame.height / 6
    }), completion: nil)
    UIView.animateWithDuration(0.9, delay: 0.4, usingSpringWithDamping: 1, initialSpringVelocity: 0.6, options: [], animations: ({
        self.image.center.y = self.view.frame.height / 4
    }), completion: nil)
    UIView.animateWithDuration(1, delay: 0.6, usingSpringWithDamping: 1, initialSpringVelocity: 0.4, options: [], animations: ({
        self.image.center.y = self.view.frame.height / 5.5
    }), completion: nil)
    UIView.animateWithDuration(1.05, delay: 0.8, usingSpringWithDamping: 1, initialSpringVelocity: 0.2, options: [], animations: ({
        self.image.center.y = self.view.frame.height / 4
    }), completion: nil)

【问题讨论】:

  • 流体是指不连续发生吗?
  • 你可以使用 UIView 类的方法 "+animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:"
  • 有很多方法可以做到这一点。 @memmons 在您发布的线程中的答案显示了使用 UIKit Dynamics 执行此操作的绝佳方法,但您不使用它。为什么不试试呢?或者,您可以使用 UIView 关键帧动画(使用方法 animateKeyframesWithDuration:delay:options:animations:completion: 和/或 animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:。memmons 显示的 UIKit Dynamics 方法似乎最适合您所追求的效果,他提供了工作代码向您展示如何使用它。
  • 为什么不使用您提供的 SO 链接中的代码?它似乎工作得很好。你可以用你的按钮做同样的事情。
  • 我是 swift 新手...我不知道如何将其转换为 swift...你能帮帮我吗? ://

标签: ios swift uiview uibutton bounce


【解决方案1】:

不是将所有动画都嵌套在第一个动画块中,而是将每个连续的动画放在它之前的完成处理程序中。

虽然我建议将 Core Animation 用于类似的事情,而不是 UIView animateWithDuration 方法。

【讨论】:

    【解决方案2】:

    你可以使用下面的类方便使用

    class BounceButton: UIButton {
    
        @IBInspectable var baseColor: String = "2"{
            didSet {
                //layer.borderColor = borderColor.CGColor
                if baseColor == "1" {
                    self.backgroundColor = UIColor.MiTheme.BtnColorPrimary
                    self.setTitleColor(UIColor.white, for: .normal)
                    self.titleLabel?.font = UIFont.boldSystemFont(ofSize: 17)
                }
                else if baseColor == "2" {
                    self.backgroundColor = UIColor.MiTheme.BtnColorSecond
                    self.setTitleColor(UIColor.black, for: .normal)
                }
                else if baseColor == "3" {
                    self.backgroundColor = UIColor.black
                    self.setTitleColor(UIColor.white, for: .normal)
                    self.titleLabel?.font = UIFont.boldSystemFont(ofSize: 17)
                }
                else if baseColor == "4" {                
                }
            }
        }
    
    
        override init(frame: CGRect) {
            super.init(frame: frame)
    
            //self.layer.cornerRadius = 28.5
    
        }
        required init?(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)
    
            //self.layer.cornerRadius = 28.5
    
        }
    
        // Add some animations on button click
        override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
            super.touchesBegan(touches, with: event)
    
            // Scale up the button
            self.transform = CGAffineTransform(scaleX: 1.1, y: 1.1)
    
            UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 6, options: .allowUserInteraction, animations: {
                // Reset the sizes to defaults
                self.transform = CGAffineTransform.identity
            }, completion: nil)
        }
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-09-27
      • 2015-06-29
      • 2015-04-24
      • 2018-09-14
      • 2020-04-08
      • 1970-01-01
      相关资源
      最近更新 更多