获取与Phibrow App相同的标签动画

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

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

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

Answer 2

我看到的问题是，翻译的检索方式类似于gesture.translation(in: view) （例如，在某些view的坐标系中）。 在您的示例中， view是否为gesture.view.superview ？ 您对gesture.view 。 superview在其gesture.view superview坐标系中移动了多少感兴趣，因此此条件必须为true： view == gesture.view.superview 。

第二个问题是平移的transform -它不会是正确的，当旋转和/或比例都是非同一性。 为了正确地移动gesture.view ，您应该更改其center位置，该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
}

Answer 3

也许是顺序问题。 您正在应用旋转后应用平移。 在转换后旋转。 这意味着您的目标对象将被旋转，然后根据比例进行平移。 因此，如果在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)
    }
}