与Phibrow应用相同的标签动画效果如何实现？

Question

我想创建与Phibrow App中相同的动画效果。请查看以下视频以获取更多详细信息：- https://www.dropbox.com/s/wwc69a9ktaa52je/IMG_0155.MOV?dl=0

我已经尝试使用 UIPinchGestureRecognizer、UIRotationGestureRecognizer 和 UIPanGestureRecognizer 来获取这个动画。但是还没有成功获取到这个动画。

func handlePinchGesture(gesture: UIPinchGestureRecognizer) {
    if gesture.state == UIGestureRecognizerState.began || gesture.state == UIGestureRecognizerState.changed{
        //print("UIPinchGestureRecognizer")

        gesture.view?.transform = (gesture.view?.transform)!.scaledBy(x: gesture.scale, y: gesture.scale)
        gesture.scale = 1.0
    }
}


func handleRotationGesture(gesture: UIRotationGestureRecognizer) {
    if gesture.state == UIGestureRecognizerState.began || gesture.state == UIGestureRecognizerState.changed{
        print("UIRotationGestureRecognizer : ", gesture.rotation)
        gesture.view?.transform = (gesture.view?.transform)!.rotated(by: gesture.rotation)
        gesture.rotation = 0
    }
}

func handlePanGesture(gesture: UIPanGestureRecognizer) {
    if gesture.state == UIGestureRecognizerState.began || gesture.state == UIGestureRecognizerState.changed{
        //print("UIPanGestureRecognizer")
        let translation = gesture.translation(in: view)
        gesture.view?.transform = (gesture.view?.transform)!.translatedBy(x: translation.x, y: translation.y)
        gesture.setTranslation(CGPoint(x: 0, y: 0), in: view)
    }
}

有没有办法获取这个动画？

- Meet Doshi

---

请参考以下链接：https://www.raywenderlich.com/162745/uigesturerecognizer-tutorial-getting-started - Amit Tandel

Answer 1

我觉得这段代码适合你使用。 我声明了两个视图firstView和secondView，并为这两个视图分别添加了手势，比如在panGesture的情况下：

firstPan = UIPanGestureRecognizer(target: self, action: #selector(self.handlePanGesture(gesture:)))
    secondPan = UIPanGestureRecognizer(target: self, action: #selector(self.handlePanGesture(gesture:)))
    firstView.addGestureRecognizer(secondPan!)
    secondView.addGestureRecognizer(firstPan!)

对于捏合和旋转手势，我使用了与上述相同的方法来添加手势。 对于您的情况，您需要同时为两个视图启用捏合和旋转手势，除了平移手势之外，因此只需检查哪个视图并为另一个视图应用变换即可。

@objc func handlePinchGesture(_ gestureRecognizer: UIPinchGestureRecognizer) {
    guard gestureRecognizer.view != nil else { return }
    if gestureRecognizer.state == .began || gestureRecognizer.state == .changed {
        if gestureRecognizer.view == firstView {
            gestureRecognizer.view?.transform = (gestureRecognizer.view?.transform.scaledBy(x: gestureRecognizer.scale, y: gestureRecognizer.scale))!
            secondView.transform = (secondView.transform.scaledBy(x: gestureRecognizer.scale, y: gestureRecognizer.scale))
            gestureRecognizer.scale = 1.0
        }else{
            gestureRecognizer.view?.transform = (gestureRecognizer.view?.transform.scaledBy(x: gestureRecognizer.scale, y: gestureRecognizer.scale))!
            firstView.transform = (firstView.transform.scaledBy(x: gestureRecognizer.scale, y: gestureRecognizer.scale))
            gestureRecognizer.scale = 1.0
        }
    }
}


@objc func handleRotationGesture(gesture: UIRotationGestureRecognizer) {
    if gesture.state == UIGestureRecognizerState.began || gesture.state == UIGestureRecognizerState.changed{
        if gesture.view == firstView {
            gesture.view?.transform = (gesture.view?.transform)!.rotated(by: gesture.rotation)
            secondView.transform = (secondView.transform).rotated(by: gesture.rotation)
            gesture.rotation = 0
        }else{
            gesture.view?.transform = (gesture.view?.transform)!.rotated(by: gesture.rotation)
            firstView.transform = (firstView.transform).rotated(by: gesture.rotation)
            gesture.rotation = 0
        }
    }
}

@objc func handlePanGesture(gesture: UIPanGestureRecognizer) {
    if gesture.state == UIGestureRecognizerState.began || gesture.state == UIGestureRecognizerState.changed{
        let translation = gesture.translation(in: view)
        gesture.view?.transform = (gesture.view?.transform)!.translatedBy(x: translation.x, y: translation.y)
        gesture.setTranslation(CGPoint(x: 0, y: 0), in: view)
    }
}

- Shezad

---

@meet-doshi 请尝试上述代码，如果无法正常工作，请告诉我。 - Shezad

Answer 2

可能是顺序问题。您在应用旋转后再应用翻译。在旋转的变换中，这意味着您的目标对象将被旋转，然后根据比例进行平移。因此，如果您在Float.Pi上旋转对象并尝试移动对象，则它将朝相反方向移动。相反，您必须先移动对象，然后应用现有的变换。

@IBAction func panRecognised(_ gesture: UIPanGestureRecognizer) {
    if gesture.state == .began || gesture.state == .changed{
        guard let targetView = gesture.view else { return }
        let transform =  targetView.transform
        let translation = gesture.translation(in: view)
        targetView.transform = transform.concatenating(CGAffineTransform(translationX: translation.x, y: translation.y))
        gesture.setTranslation(CGPoint(x: 0, y: 0), in: view)
    }
}

- MichaelV

Answer 3

我看到的问题是，翻译是通过 gesture.translation(in: view) 这样的方式获取的，例如在某个 view 的坐标系中。在你的示例中，view 是一个 gesture.view.superview 吗？你关心的是 gesture.view 在其 superview 坐标系中移动了多少，因此必须满足这个条件：view == gesture.view.superview。

第二个问题是 transform 的翻译 - 当旋转和/或缩放不是单位时，它将不正确。为了正确移动 gesture.view，您应该更改其 center 位置，这将独立于视图旋转或缩放保持正确：

func viewWillAppear(animated: Bool) {
    super.viewWillAppear(animated)
    panRecognizer.setTranslation(panRecognizer.view.center, in: panRecognizer.view.superview)
}

func handlePanGesture(gesture: UIPanGestureRecognizer) {
    let translation = gesture.translation(in: gesture.view.superview)
    gesture.view.center = translation
}

- Eugene Dudnyk