CODEWITHSUNDEEP
iosswift
user8590407
user8590407

Reputation:

swift: Move animation

I have viewController in storyboard. And 4 squares. I want to place my squares on view. At first I want to show two squares. If I press on button I want to my red 2 squares move left and I show next 2 blue squares. Like this animation.

enter image description here

Do I need to create a scrollView or collectionView or something else to move the squares? What the best way to create this?

Upvotes: 4

Views: 9005

Answers (1)

Serdnad
Serdnad

Reputation: 642

Use UiVew.animate and CGAffineTransform

Setup

Create a UIView that will contain your squares. Make sure that UIView has clip to bounds enabled. Then, add your four squares in, with the blue ones nested inside the UIView, but with their coordinates outside of the container so that they're getting clipped.

View of Storyboard editor

Then, when you want to move them, you simply translate all of your squares x to the left. By putting this movement inside of a UIView.animate block, iOS will perform the animation for you.

UIView.animate(withDuration: 2.0) {
    self.redTopView.transform = CGAffineTransform(translationX: -160, y: 0)
    self.redBottomView.transform = CGAffineTransform(translationX: -160, y: 0)
    self.blueTopView.transform = CGAffineTransform(translationX: -160, y: 0)
    self.blueBottomView.transform = CGAffineTransform(translationX: -160, y: 0)
}

Final result: http://g.recordit.co/SToMSZ77wu.gif

Upvotes: 11

Related Questions