Swift iOS Tinder 风格滑动屏幕的动画

Question

我构建了一个与 Tinder 主屏幕非常相似的屏幕。我已经在可拖动图标上设置了边框，下一张卡片通过从屏幕顶部动画加载。目前有 2 个按钮（1 个接受按钮，1 个拒绝按钮），当它们被按下时，卡片会旋转并以正确的方向从屏幕中移出。这个函数目前完成这个动画...

func rejectAnimation() {

    let scale = CGAffineTransformMakeScale(1, 1)
    let translate = CGAffineTransformMakeTranslation(0, 0)
    self.cardUIView.transform = CGAffineTransformConcat(scale, translate)

    springWithCompletion(0.75, animations: {

        let rotate = CGAffineTransformMakeRotation(CGFloat(-M_PI_2))
        let translate = CGAffineTransformMakeTranslation((-375), 0)
        self.cardUIView.transform = CGAffineTransformConcat(rotate, translate)

        }, completion: { finished in 0
            self.refreshView()
    })
}

和

func acceptAnimation() {

    let scale = CGAffineTransformMakeScale(1, 1)
    let translate = CGAffineTransformMakeTranslation(0, 0)
    self.cardUIView.transform = CGAffineTransformConcat(scale, translate)

    springWithCompletion(0.75, animations: {

        let rotate = CGAffineTransformMakeRotation(CGFloat(M_PI_2))
        let translate = CGAffineTransformMakeTranslation(375, 0)
        self.cardUIView.transform = CGAffineTransformConcat(rotate, translate)

        }, completion: { finished in 0
            self.refreshView()
    })
}

我的问题是这样的。我如何制作动画，以便当用户将卡片拖放到右侧或左侧边界之外时，卡片继续沿其在重置为新卡片之前滑动的方向平移出屏幕？

注意：springWithCompletion 是一个在特定时间段内执行动画的函数。

Answer 1

只需使用 UIPanGestureRecognizer 并计算两点之间的差异即可知道要为哪个方向设置动画（多次调用处理程序）。如果您需要同时为 x 轴和 y 轴设置动画，那么它会变得更加复杂。

let panGesture = UIPanGestureRecognizer(target: self, action: Selector("onPan:"))
cardView.addGestureRecognizer(panGesture)

func onPan(gestureRecognizer: UIPanGestureRecognizer) {
    let point = gestureRecognizer.locationInView(maskView)

Answer 2

看看这个。写在swift 4

func beingDragged(_ gestureRecognizer: UIPanGestureRecognizer) {

    xFromCenter = gestureRecognizer.translation(in: self).x
    yFromCenter = gestureRecognizer.translation(in: self).y
    switch gestureRecognizer.state {

    case .began:
        originalPoint = self.center;
        break;

    case .changed:
        let rotationStrength = min(xFromCenter / ROTATION_STRENGTH, ROTATION_MAX)
        let rotationAngel = .pi/8 * rotationStrength
        let scale = max(1 - fabs(rotationStrength) / SCALE_STRENGTH, SCALE_MAX)
        center = CGPoint(x: originalPoint.x + xFromCenter, y: originalPoint.y + yFromCenter)
        let transforms = CGAffineTransform(rotationAngle: rotationAngel)
        let scaleTransform: CGAffineTransform = transforms.scaledBy(x: scale, y: scale)
        self.transform = scaleTransform
        updateOverlay(xFromCenter)
        break;

    case .ended:
        afterSwipeAction()
        break;

    case .possible:break
    case .cancelled:break
    case .failed:break
    }
}

https://github.com/nickypatson/TinderSwipeView

谢谢

Swift iOS Tinder 风格滑动屏幕的动画

Swift iOS animations for Tinder-style swipe screen

ios

swift

cgaffinetransform