UIViewPropertyAnimator animating movement depending on pan direction

Question

Hi guys im trying to make my animation go to either side depending on which way the user is panning, but it does not work and i cannot figure out whats wrong. The gesture was working correctly when I was working with only one direction, but when I moved the logic to the moveLabel() function it does not work any more. The animation does not even start. My goal is to have the same animation (cause i will add more detail to it) but have this particular label move left or right depending on pan direction. This is my cold as of now

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var labelDummy: UILabel!

    var labelAnimation = UIViewPropertyAnimator()

    override func viewDidLoad() {
        super.viewDidLoad()

        labelDummy.center.x = view.bounds.maxX/2

        view.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(self.moveLabel)))

    }


    func moveLabel(gesture: UIPanGestureRecognizer){

        let trans = gesture.translation(in: view)

        if trans.x >= 0{
            labelAnimation = UIViewPropertyAnimator(duration: 1.0, curve: .easeInOut) {

                let yPos = self.labelDummy.center.y
                self.labelDummy.center = CGPoint(x: 100 + (self.labelDummy.frame.size.width/2), y: yPos)
            }
        }

        if trans.x < 0 {
            labelAnimation = UIViewPropertyAnimator(duration: 1.0, curve: .easeInOut) {

                let yPos = self.labelDummy.center.y
                self.labelDummy.center = CGPoint(x: 10 + (self.labelDummy.frame.size.width/2), y: yPos)
            }
        }

        labelAnimation.fractionComplete = abs((trans.x/100))


        if gesture.state == .ended{

            labelAnimation.fractionComplete = 0
        }

        print("fractionCompleted: ", labelAnimation.fractionComplete)
    }
}

How can I solve this problem?

The code that was working:

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var labelDummy: UILabel!

var labelAnimation = UIViewPropertyAnimator()

override func viewDidLoad() {
    super.viewDidLoad()


    labelDummy.center.x = view.bounds.maxX/2

    // Pan for hele viewen som spiller label animasjon

    view.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(self.moveLabel)))

    // animasjon

    labelAnimation = UIViewPropertyAnimator(duration: 1.0, curve: .easeInOut) {

        let yPos = self.labelDummy.center.y
        self.labelDummy.center = CGPoint(x: 10 + (self.labelDummy.frame.size.width/2), y: yPos)
    }

    //labelAnimation.startAnimation()
}

func moveLabel(gesture: UIPanGestureRecognizer){

    print("retning: ", gesture.velocity(in: view).x)
    let trans = gesture.translation(in: view)
    print("trans: ", trans)

    labelAnimation.fractionComplete = trans.x/100
    print("fractionCompletet prøver å settes til : ", trans.x/100)
    print(trans.x)

    if gesture.state == .ended{
        print("-ENDED-")
        labelAnimation.fractionComplete = 0
    }

    print("fractionCompletet: ", labelAnimation.fractionComplete)
}

}

Answer 1

Ended up making a global variable for the x position, and in the moveLabel function I used if statements something like "if .began ", then check for translation. Depending on if the translation was higher or lower than 0, set the xposition somewhere to the left, alternatively, somewhere to the right.

if gesture.state == .began {

        if gesture.velocity(in: view).x > 0{

            // Panning right, Animate Left
            self.animationDirection = .left
            self.animateToXPos = CGPoint(x: headerLabelPositionLeft!, y: headerLabelPositionY!)
            self.setAnimation(direction: AnimationDirection.left)
            self.dayLabel.textAlignment = .left

        } else {

            // Panning left, Animate Right
            self.animationDirection = AnimationDirection.right
            self.animateToXPos = CGPoint(x: self.view.bounds.width - (self.dayLabel.frame.size.width/2), y: headerLabelPositionY)
            self.setAnimation(direction: AnimationDirection.right)
            self.dayLabel.textAlignment = .right
        }
    }