I try to build tinder like ui with swipeable cards. To make ui better I add snap behaviour to view, so it to return animated after swipe gesture.
Problem is that during the gesture sometimes view trembls and blinks
Captured the video, it can be seen on second try https://youtu.be/V9Yvg-Fkh14
Code is following
class RegistrationSwipeQuestionsViewController:BaseViewController {
var activeView:SwipeableQuestion?
var originalPoint:CGPoint?
var snap: UISnapBehavior!
var animator:UIDynamicAnimator!
lazy var firstView:SwipeableQuestion = {
var view = SwipeableQuestion()
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = UIColor(red: 72/255, green: 229/255, blue: 136/255, alpha: 1.0)
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(firstView)
animator = UIDynamicAnimator(referenceView: view)
firstView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor).active = true
firstView.centerYAnchor.constraintEqualToAnchor(view.centerXAnchor).active = true
firstView.widthAnchor.constraintEqualToConstant(250).active = true
firstView.heightAnchor.constraintEqualToConstant(300).active = true
firstView.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: "pan:"))
activeView = firstView
}
func pan(gesture:UIPanGestureRecognizer) {
let translation = gesture.translationInView(activeView)
switch gesture.state {
case .Began:
self.originalPoint = activeView!.center
case .Changed:
let rotationStrength = min(CGFloat(translation.x) / 320, 1)
let rotationAngel = 2 * CGFloat(M_PI) * rotationStrength / 64
let scaleStrength = 1 - CGFloat(rotationStrength) / 4
let scale = max(scaleStrength, 1)
activeView!.center = CGPointMake(self.originalPoint!.x + translation.x, self.originalPoint!.y + translation.y);
let transform = CGAffineTransformMakeRotation(rotationAngel)
let scaleTransform = CGAffineTransformScale(transform, scale, scale)
activeView!.transform = scaleTransform
if gesture.locationInView(UIApplication.sharedApplication().keyWindow).x >= view.frame.size.width - 20 || gesture.locationInView(UIApplication.sharedApplication().keyWindow).x <= 20 {
}
case .Ended:
if (snap != nil) {
animator.removeBehavior(snap)
}
snap = UISnapBehavior(item: activeView!, snapToPoint: view.center)
snap.damping = 0.2
animator.addBehavior(snap)
default:
break
}
}
}
class SwipeableQuestion: UIView {
var questionLabel:UILabel = {
var label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 0
label.textAlignment = .Center
label.font = UIFont(name: "HeliosCond", size: 22)
return label
}()
lazy var topView:UIView = {
var view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = UIColor().pinkColor()
return view
}()
var questionNumLabel:UILabel = {
var label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.textAlignment = .Center
label.textColor = UIColor.whiteColor()
label.font = UIFont(name: "HeliosCond", size: 16)
return label
}()
var dummyView:UIView = {
var view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = UIColor().pinkColor()
return view
}()
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(questionLabel)
questionLabel.centerYAnchor.constraintEqualToAnchor(centerYAnchor).active = true
questionLabel.centerXAnchor.constraintEqualToAnchor(centerXAnchor).active = true
questionLabel.widthAnchor.constraintEqualToConstant(200).active = true
addSubview(topView)
topView.heightAnchor.constraintEqualToConstant(80).active = true
topView.leadingAnchor.constraintEqualToAnchor(leadingAnchor).active = true
topView.trailingAnchor.constraintEqualToAnchor(trailingAnchor).active = true
topView.topAnchor.constraintEqualToAnchor(topAnchor).active = true
topView.addSubview(questionNumLabel)
questionNumLabel.centerXAnchor.constraintEqualToAnchor(topView.centerXAnchor).active = true
questionNumLabel.centerYAnchor.constraintEqualToAnchor(topView.centerYAnchor).active = true
topView.setRadius(6)
addSubview(dummyView)
dummyView.bottomAnchor.constraintEqualToAnchor(topView.bottomAnchor).active = true
dummyView.leadingAnchor.constraintEqualToAnchor(leadingAnchor).active = true
dummyView.trailingAnchor.constraintEqualToAnchor(trailingAnchor).active = true
dummyView.heightAnchor.constraintEqualToConstant(15).active = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
How to avoid blinking and trembling ?