UIView的动画缩放和移动（Swift）

Question

UIView的动画缩放和移动（Swift）

44

我有一个UIView，位于屏幕中央。当用户按下按钮时，我希望它向上移动到屏幕顶部，并在缩小到大约五分之一大小时实现。

我尝试过以下方式：

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)

我该如何让这两个动画同时工作？

- Useful_Investigator

2个回答

43

您可以通过几种方法在 Swift 中实现基本的 UIView 动画。下面的代码只是一种简单的方法...

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)})

      }
     }

输出：

- Joe

您好，我已完成这项任务，但是在进行动画后我的UIImageView变小了。 - Md. Sulayman

@Md.Sulayman，这篇帖子的整个思想就是在动画之后缩小视图。再次阅读帖子，并让我知道你想要实现什么目标？ - Joe

我的情况是在动画之前禁用了所有约束，同时添加了缩放和平移。实际上我需要同时进行两者。 "let originalTransform = self.idImageView.transform let scaledTransform = originalTransform.scaledBy(x: widthOfIDImage/displayWidth, y: heightOfIDImage/displayHeight) let scaledAndTranslatedTransform = scaledTransform.translatedBy(x: 200, y: -1000) self.idImageView.transform = scaledAndTranslatedTransform" - Md. Sulayman

我刚刚找到了问题所在。我给x和y赋予了不同的缩放值，这导致了宽高比的问题。 - Md. Sulayman

我认为你的代码中可能存在括号问题。 - Chewie The Chorkie

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WongWray · Accepted Answer

Joe上面的回答完全按照他的GIF所描述的方式操作，但它并没有真正回答你的问题，因为它只是将视图进行了平移和缩放（而不是同时进行平移和缩放）。你的问题在于你在动画块中设置了视图的变换，然后立即用另一个变换覆盖了该值。要同时实现平移和缩放，你需要像这样做：

@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
    })
}