画面の中央に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)
両方のアニメーションを機能させるにはどうすればよいですか?
上記の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
})
}
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)})
}
}
出力: