web-dev-qa-db-ja.com

UIViewをスケーリングおよび移動するアニメーション（Swift）

画面の中央にUIViewがあります。ユーザーがボタンを押すと、画面の上部の近くまで移動して、サイズが約5分の1に縮小するようにします。

私はこれを試しました：

UIView.animateWithDuration(0.7) { () -> Void in
            self.main.transform = CGAffineTransformMakeScale(0.2, 0.2)
            self.main.transform = CGAffineTransformMakeTranslation(0, -250)
        }

しかし、何らかの理由で、それはビューをスケーリングするだけです。私もこれをanimateWithDurationに入れようとしました：

self.main.frame = CGRectMake(self.view.frame.width/2 - 10, 50, 50, 50)

両方のアニメーションを機能させるにはどうすればよいですか？

swiftanimationuiview
28
Marcel

上記のJoeの答えは彼のGIFの説明とまったく同じですが、thenを変換するため（質問の答えとはなりません）（同時に翻訳とスケーリングの両方ではなく）。問題は、アニメーションブロックでビューの変換を設定し、その値をすぐに別の変換で上書きすることです。翻訳とスケールの両方を同時に実現するには、次のようなものが必要です。

@IBAction func animateButton(_ sender: UIButton) {
    let originalTransform = self.main.transform
    let scaledTransform = originalTransform.scaledBy(x: 0.2, y: 0.2)
    let scaledAndTranslatedTransform = scaledTransform.translatedBy(x: 0.0, y: -250.0)
    UIView.animate(withDuration: 0.7, animations: {
        self.main.transform = scaledAndTranslatedTransform
    })
}
24
WongWray

Swiftでは、いくつかの方法で基本的なUIView animationを実現できます。以下のコードは単純なアプローチです...

class ViewController: UIViewController {

@IBOutlet weak var animationButton: UIButton!
@IBOutlet weak var myView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()
    // I added seperate colour to UIView when animation move from one animation block to another.So, You can get better understanding how the sequence of animation works.
  self.myView.backgroundColor = .red
}

@IBAction func animateButton(_ sender: UIButton) {

    UIView.animate(withDuration: 0.5, delay: 0.0, options: UIViewAnimationOptions.curveEaseIn, animations: { 
        //Frame Option 1:
        self.myView.frame = CGRect(x: self.myView.frame.Origin.x, y: 20, width: self.myView.frame.width, height: self.myView.frame.height)

        //Frame Option 2:
        //self.myView.center = CGPoint(x: self.view.frame.width / 2, y: self.view.frame.height / 4)
        self.myView.backgroundColor = .blue

        },completion: { finish in

    UIView.animate(withDuration: 1, delay: 0.25,options: UIViewAnimationOptions.curveEaseOut,animations: {
        self.myView.backgroundColor = .orange      
        self.myView.transform = CGAffineTransform(scaleX: 0.25, y: 0.25)

        self.animationButton.isEnabled = false // If you want to restrict the button not to repeat animation..You can enable by setting into true

        },completion: nil)})

      }
     }

出力：

enter image description here

27
Joe