Question

我正在尝试实现Tinder之类的动画来向左和向右滑动图像并在此过程中旋转它。我有一系列图像，需要一个接一个地刷它们。

到目前为止，我已经能够使用 UIPanGestureRecognizer 来移动图像，但是当我尝试旋转图像时，一切都会中断。

我上传了代码here。有人能指出我正确的方向来开发算法并对其进行微调以实现像Tinder这样的完美。

Answer 1

您可以通过收听 touchesBegan，touchesMoved和touchesEnded 方法来实现这一目标。

基本上这就是你需要做的事情：

在 touchesBegan 中获取与当前视图相关的触摸点（稍后您需要通过此处锚定来旋转图像）。
在 touchesMoved 中获取与superview相关的触摸点，并在移动触摸时移动视图。
使用 CGAffineTransformMakeRotation
在 touchesEnded 中，将视图移出屏幕或将其设置回初始位置。

希望这有帮助。请查看此repo以供参考。

Answer 2

正如Shri所说，你应该处理pan手势识别器状态。这是代码的快速示例

func panGestureRecognized(gestureRecognizer: UIPanGestureRecognizer) {
    xDistanceFromCenter = gestureRecognizer.translationInView(self).x
        yDistanceFromCenter = gestureRecognizer.translationInView(self).y

        let touchLocation = gestureRecognizer.locationInView(self)

        switch gestureRecognizer.state {
        case .Began:
            originalLocation = center
            animationDirection = touchLocation.y >= frame.size.height / 2 ? -1.0 : 1.0
            break
        case .Changed:
            let rotationStrength = min(xDistanceFromCenter / self.frame.size.width, rotationMax)
            let rotationAngle = animationDirection * defaultRotationAngle * rotationStrength
            let scaleStrength = 1 - ((1 - scaleMin) * fabs(rotationStrength))
            let scale = max(scaleStrength, scaleMin)
            let transform = CGAffineTransformMakeRotation(rotationAngle)
            let scaleTransform = CGAffineTransformScale(transform, scale, scale) 
            self.transform = scaleTransform
            break
        case .Ended:
            swipeMadeAction()
        default :
            break
        }
}

您可以查看我们在此repo上的实现： https://github.com/Yalantis/Koloda

Answer 3

我最近刚刚为我工作的公司实施了这个，并决定开源。 https://github.com/skensell/MXCardsSwipingView

我将UIPanGestureRecognizer与UIAttachmentBehavior结合使用。在iOS 7中引入，它在概念上更容易，代码更少。这就像是将手指贴在UIView的那一部分上。

此处有更多详情：https://github.com/skensell/MXCardsSwipingView/blob/master/MXCardsSwipingView/Classes/MXCardsSwipingView.m

Tinder就像使用UIPanGestureRecognizer和Rotation的动画一样

3 个答案: