2017-02-16 10 views
1

私はCGAffineTransformを使用してクリック時のボタンを縮小しています。ボタンの幅は縮小されますが、中央の左右の会議から縮小されます。しかし、私はボタンを右から縮めたい。奇妙なアナロジーは、ボタンが紙のようなもので、右の部分にはマッチして点灯し、紙を燃やして左に向かって破壊します。どのようにそのような機能を達成できますか?ios - 右から幅を縮小するボタンをアニメ化する

func animateStartButtonExit() { 


    UIView.animate(withDuration: 0.5, 
     animations: { 
      self.startButtonOutlet.transform = CGAffineTransform(scaleX: 0.1, y: 1) 

     }, 
     completion: { _ in 
       UIView.animate(withDuration: 0.5) { 
        self.startButtonOutlet.isHidden = true 
        self.startButtonOutlet.transform = CGAffineTransform.identity 
      } 
     }) 

} 
+0

トライフレームベースのアニメーションの代わりに 'CGAffineTransform' – Mukesh

+0

たり、制約をアニメーション化しようとすることができ –

答えて

0

あなたが自動レイアウトを使用している場合は、幅0です

を作るまで追加し、末尾のスペースの制約を設定し

UIView.animate(withDuration: 5, 
       animations: { 
       button.frame = CGRect(x: button.frame.minX, y: button.frame.minY, width: button.frame.size.width/2, height: button.frame.size.height/2) 

    }, 
       completion: { _ in 
       UIView.animate(withDuration: 0.5) { 
        button.isHidden = true 
        button.frame = CGRect(x: button.frame.minX, y: button.frame.minY, width: button.frame.size.width * 2, height: button.frame.size.height * 2) 
       } 
}) 
0

、右からボタンをアニメーション化している、これを試すことができますすなわち

rightConstraint.constant = rightConstraint.constant + width 

UIView.animate(withDuration: 5, 
       animations: { 
        button.layoutIfNeeded() 
    }, 
       completion: nil 
) 
1

それは正常に動作します。私はちょうどテストした。

enter image description here

class ViewController: UIViewController { 
    @IBOutlet weak var button: UIButton! 
    @IBOutlet weak var widthConstraint: NSLayoutConstraint! 

    override func viewDidLoad() { 
     super.viewDidLoad() 
    } 

    @IBAction func click(_ sender: UIButton) { 
     widthConstraint.constant = 10 
     UIView.animate(withDuration: 5, animations: { 
      self.view.layoutIfNeeded() 
     }, completion: { _ in 
      self.button.isHidden = true 
      // For example, back to the normal width 
      self.widthConstraint.constant = 168 
     }) 
    } 

} 

enter image description here

関連する問題