Animate view when button is clicked

Question

I have 4 buttons in a row. and these buttons are 1:4 of the width and are next to each other in horizontal position.

Buttons are arranged like in design

|Btn1|Btn2|Btn3|Btn4|

Now I have a view, which is located just below the Btn4 on start of view controller. Now I want when user click on Btn1 the View animate just below the Btn1, and if user click on Btn3 it should move there.

I know that following code could do something

let animator = UIViewPropertyAnimator(duration: 1, curve: .easeOut, animations: {
        self.viewIndicators.transform = CGAffineTransform(translationX: xValue , y: 0)

    })
    animator.startAnimation(afterDelay: 0.400)

in code above I really do not know what will be value. I tried passing the pressed button frame.x value. But it did not work for me. The View did animate but in wrong position.

Can anyone please help me.

Note: The view that will be animate has equal width as each button on row. I just want to give look and feel like in android TabLayout

Answer 1

You can try

@IBAction func btnClicked(_ sender:UIButton) {
   UIView.animate(withDuration: 0.25, animations: {
       self.viewIndicators.frame = sender.frame.offsetBy(dx:0,dy:20)
   })
}