I have a card view which looks like in below gif. I want to fade out first card UIView)
and fadein second card when user swiping it. UIView
s are swappable to both left and right. I only found below post about this question but can't doesn't help me.
Change View Alpha on Pan Gesture or Dragging
/// This method handles the swiping gesture on each card.
@objc func handleCardPan(sender: UIPanGestureRecognizer) {
// if we're in the process of hiding a card, don't let the user interace with the cards yet
if cardIsHiding { return }
// change this to your discretion - it represents how far the user must pan up or down to change the option
// distance user must pan right or left to trigger an option
let requiredOffsetFromCenter: CGFloat = 80
let panLocationInView = sender.location(in: view)
let panLocationInCard = sender.location(in: cards[0])
print(panLocationInView.x)
print(panLocationInCard)
guard let view = sender.view as? ImageCard else { return }
if(view.layer.zPosition != CGFloat(cards.count)){ return }
switch sender.state {
case .began:
dynamicAnimator.removeAllBehaviors()
// card is attached to center
//cardAttachmentBehavior = UIAttachmentBehavior(item: cards[0], offsetFromCenter: offset, attachedToAnchor: panLocationInView)
let translation = sender.translation(in: self.view)
sender.view!.center = CGPoint(x: sender.view!.center.x + translation.x, y: sender.view!.center.y)
sender.setTranslation(CGPoint(x: 0, y: 0), in: self.view)
break
case .changed:
let translation = sender.translation(in: self.view)
sender.view!.center = CGPoint(x: sender.view!.center.x + translation.x, y: sender.view!.center.y)
sender.setTranslation(CGPoint(x: 0, y: 0), in: self.view)
// view.alpha = panLocationInView.x / self.view.frame.width
//cards[1].imageView.alpha = 0.0 - alphaPercentage
break
case .ended:
dynamicAnimator.removeAllBehaviors()
if !(cards[0].center.x > (self.view.center.x + requiredOffsetFromCenter) || cards[0].center.x < (self.view.center.x - requiredOffsetFromCenter)) {
// snap to center
let snapBehavior = UISnapBehavior(item: cards[0], snapTo: CGPoint(x: self.view.frame.midX, y: self.difference + cards[0].frame.height / 2))
dynamicAnimator.addBehavior(snapBehavior)
} else {
let velocity = sender.velocity(in: self.view)
let pushBehavior = UIPushBehavior(items: [cards[0]], mode: .instantaneous)
//velocity.y add this for y position vector
pushBehavior.pushDirection = CGVector(dx: velocity.x/10, dy: 10)
pushBehavior.magnitude = 175
dynamicAnimator.addBehavior(pushBehavior)
// spin after throwing
var angular = CGFloat.pi / 2 // angular velocity of spin
// let currentAngle: Double = atan2(Double(cards[0].transform.b), Double(cards[0].transform.a))
let currentAngle: Double = 0.0
if currentAngle > 0 {
angular = angular * 1
} else {
angular = angular * -1
}
let itemBehavior = UIDynamicItemBehavior(items: [cards[0]])
itemBehavior.friction = 0.2
itemBehavior.allowsRotation = true
itemBehavior.addAngularVelocity(CGFloat(angular), for: cards[0])
dynamicAnimator.addBehavior(itemBehavior)
showNextCard()
hideFrontCard()
}
default:
break
}
}
Here is solution what I successfully execute for this condition:
case .changed:
let translation = sender.translation(in: self.view)
sender.view!.center = CGPoint(x: sender.view!.center.x + translation.x, y: sender.view!.center.y)
sender.setTranslation(CGPoint(x: 0, y: 0), in: self.view)
let percentage = (sender.view!.center.x*100.0 / self.view.center.x)/100.0
let alpha = percentage >= 1.0 ? (1.0 - (percentage-1.0)) : percentage
sender.view!.alpha = alpha
cards[1].imageView.alpha = previousCardAlpha + (1.0 - alpha) // previousCardAlpha == cards[1].alpha eg: 0.5
break
This code is working fine in XCode 10 with swift 4.2. Hope this will work for you.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With