我已经构建了一个非常类似于Tinder主屏幕的屏幕。我已经在可拖动图标上设置了边框,并通过从屏幕顶部进行动画加载下一张卡片。此刻有2个按钮(1个接受按钮,1个拒绝按钮),当按下它们时,卡会旋转并以正确的方向从屏幕转换出来。此功能目前完成此动画......
byte
和
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()
})
}
我的问题是这个。我如何设置动画,以便当用户拖动卡片并将其放到右侧或左侧边界外时,卡片会在重置为新卡片之前按照刷卡的方向从屏幕上转换出来?
注意:springWithCompletion是一个在一段时间内在其中执行动画的函数。
答案 0 :(得分:6)
检查一下。写于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
感谢
答案 1 :(得分:0)
只需使用UIPanGestureRecognizer并计算两点之间的差异,以了解动画的方向(处理程序被多次调用)。如果你需要同时为x和y轴设置动画,那么它会变得更加复杂。
let panGesture = UIPanGestureRecognizer(target: self, action: Selector("onPan:"))
cardView.addGestureRecognizer(panGesture)
func onPan(gestureRecognizer: UIPanGestureRecognizer) {
let point = gestureRecognizer.locationInView(maskView)