0

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 ?

Alexey K
  • 6,537
  • 18
  • 60
  • 118

0 Answers0