Question

问题摘要

无法在已翻译的UIView上正确执行缩放动画。

当视图尚未事先移动时，为了获得所需的结果，我先应用比例，然后应用平移。我使用UIViewPropertyAnimator动画化了转换后的结果：“视图”在相应地同时移动的同时放大或缩小。

但是，如果在应用此动画变换之前已将视图从其原始位置移动（平移），则在将视图从其新位置移动时，我无法实现放大或缩小的结果。

¡尽管转换问题已得到很好的记录-在提交问题之前我已经尽职调查-到目前为止我还没有找到成功的解决方案！

转化动画代码

为便于理解和解决问题，已简化了代码。

extension UIView {

   func zoomAndMove(vector: CGPoint, scale: CGPoint){
      self.transform = self.transform.concatenating(CGAffineTransform(scaleX: scale.x, y: scale.y).concatenating(CGAffineTransform(translationX: vector.x, y: vector.y))
   }


   func animateZoomAndMove(from origin: CGPoint, for duration: TimeInterval, cameraZoom: CGPoint, timingFunction: UITimingCurveProvider, controlPoint2: CGPoint(x: 0.8, y: 0.7)) autoplay: Bool = false) -> UIViewPropertyAnimator {
      let animator = UIViewPropertyAnimator(duration: duration, timingParameters: timingFunction)
      let vector = CGPoint(x: self.frame.midX - origin.x, y: self.frame.midY - origin.y)

      animator.addAnimations {
         self.zoomAndMove(vector: vector, scale: cameraZoom)
      }

      if autoplay { animator.startAnimation()}
      return animator
   }
}

到目前为止的尝试

我试图修改我的代码以返回一个转换，该转换考虑了zoomAndMove发生之前的先前翻译：

extension UIView {

   func zoomAndMove(vector: CGPoint, scale: CGPoint){

      if self.transform == CGAffineTransform.identity {
          self.transform = self.transform.concatenating(CGAffineTransform(scaleX: scale.x, y: scale.y).concatenating(CGAffineTransform(translationX: vector.x, y: vector.y)) 
      } else {
          let preTransform = self.transform
          self.transform = CGAffineTransform(a: scale.x, b: 0, c: 0, d: scale.y, tx: vector.x + preTransform.tx, ty: vector.y + preTransform.ty)
      }
   }

此代码不会产生预期的效果：视图跳转到新位置，正确缩放并“随机”移动。

我肯定错过了一些东西-我可能瞄准的是错误的最终结果矩阵-但总的来说，我目前仍处于困境。

如果有人对如何执行这样的简单任务（如 缩放并从已翻译的UIView中移动UIView ）有所了解，我将非常感谢他们的输入！

最好

编辑

一张图片可能值一千个单词，所以当我尝试实施到目前为止提出的各种建议（特别是.scaledBy(:)方法）时，会发生以下情况：

您会注意到最终的转换是正确的，但动画却不正确。

Answer 1

您是否尝试过将当前转换分配给某个属性，然后修改此复制的属性，然后重新分配给该视图？像这样：

let originalTransform = view.transform
let scaledTransform = originalTransform.scaledBy(x: 0.2, y: 0.2)
view.transform = scaledTransform

我已经使用这种方法创建了一个按钮动画，并且效果很好，但是我不确定这不是您想要的。

Answer 2

首先，感谢@gmogames抽出宝贵的时间提出建议。交流想法总是有帮助的！

这个问题确实与在应用新的转换之前重置视图的anchorPoint（或中心）有关，以便动画能够正确运行。因此，使用一个在移动视图后缩放视图的简单示例，新方法如下所示：

extension UIView {
    func scaleView(scaleFactor: CGPoint, duration: TimeInterval) {
        // store the view original center
        let oCenter = self.center

        // get the current transformation
        let cTransform = self.transform

        // set the new center of the view 
        self.center = CGPoint(x: self.frame.midX, y: self.frame.midY)

        // clears the transform matrix from potential prior translation
        // Note that you need to take into account potential prior scale of the view into the translation vector!!
        self.transform = self.transform.translatedBy(x: -cTransform.tx / cTransform.a, y: -cTransform.ty / cTransform.d)


        // Animates the transformation
        let animator = UIViewPropertyAnimator(duration: duration, timingParameters: UICubicTimingParameters(controlPoint1: CGPoint(x: 0, y: 0), controlPoint2: CGPoint(x: 1, y: 1))
        animator.addAnimations {
            self.transform = self.transform.scaledBy(x: scaleFactor.x, y: scaleFactor.y)
        }
        // resets the View to its original center and apply the transformation so that the view stays in the right end position
        animator.addCompletion { (position) in
            if position == UIViewAnimatingPosition.end {
                self.center = oCenter
                self.transform = cTransform.scaledBy(x: scaleFactor.x, y: scaleFactor.y)
            }
        }
        animator.startAnimation()
    }
}

在动画中显示结果：移动+缩放+缩放+恢复原始

如何在预先转换的UIView上正确地使转换动画化

问题摘要

转化动画代码

到目前为止的尝试

编辑

2 个答案: