Swift View Animation from Line

Question

Swift View Animation from Line

Swift 4.2, Xcode 10.0

I want to perform an animation with a view wherein it builds out or into a line.

Build out of line:

Build into line:

My only solution at this point is to put another view on the opposite side of the line to cover the view before it starts to animate. But this is a bad solution and it can sometimes block other views. Also, I would like to avoid stretching my content because I want to be able to perform this animation with images. What would be the best way to integrate this. Thank you in advance for the help!

Answer 1

This is one approach you can follow to achieve this:

Take 2 Container UIView and 2 line view (you may take UIView again) and 2 UIImageView (or any for green view). So your StoryBoard should look like this :

Make sure your container views are clips to bound (you can set it from storyboard only). Now you can achieve the animation easily by CGAffineTransform.

I will call outlet names for animated view as imageViewOne and imageViewTwo.

In viewDidLoad() write this (if initially views are hidden):

imageViewOne.transform = CGAffineTransform(translationX: 0.0, y: containerViewOne.bounds.height)
imageViewTwo.transform = CGAffineTransform(translationX: 0.0, y: -containerViewOne.bounds.height)

Then to show it with animation:

//To build out of line
UIView.animate(withDuration: 1.0, delay: 0.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
    self.imageViewOne.transform = .identity
    self.imageViewTwo.transform = .identity
}, completion: nil)

//To build into line
UIView.animate(withDuration: 1.0, delay: 0.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
    self.imageViewOne.transform = CGAffineTransform(translationX: 0.0, y: containerViewOne.bounds.height)
    self.imageViewTwo.transform = CGAffineTransform(translationX: 0.0, y: -containerViewOne.bounds.height)
}, completion: nil)

Answer 2

So you want this:

A subview can extend outside the bounds of its superview. When this happens, the part of the subview that is outside the superview is visible if the superview's clipsToBounds property is false, and hidden if the superview's clipsToBounds is true.

I used this clipping to hide the part of the green view that is below the line. Perhaps these side views at the halfway point of the animation will help explain how I set it up:

The superview (labelled “hider”) has been shrunk here to half the height of the green view. With clipping enabled, half of the green view is hidden. With clipping disabled, the bottom of the green view is visible below the line.

Here is how I set up the demo:

1. I put the green view in a new superview. I call this new superview the “hider”.

2. I turned on the “Clips to Bounds” check box in the hider's Attributes inspector.

3. I set width and height constraints on the green view. You could use other constraints (like leading/trailing) to control its size.

4. I constrained the leading, trailing, and top edges of the green view to equal the corresponding edges of the hider.

5. I constrained the height of the hider to equal the height of the green view plus 12. The 12 will make the white margin between the green view and the line. I set this constraint's priority to 999. This means auto layout will try very hard to satisfy the constraint, but will break this constraint if necessary in order to satisfy all required constraints.

6. I created a constraint setting the hider's height to zero. I connected this constraint to an outlet named hiderHeightConstraint in my view controller. Note that this means there are two constraints on the hider's height. This one forces the hider's height to zero and is required. The other (created in the prior step) sets the hider's height to the green view's height plus padding, but is not required. When you are editing the layout in the storyboard, you probably want to turn off this constraint by turning off its “Installed” check box in the constraint's Attributes inspector.

7. I connected the “Toggle Secret Message” button to this action:

   @IBAction private func toggleButtonWasTapped() {
       UIView.animate(withDuration: 0.7) {
           self.hiderHeightConstraint.isActive.toggle()
           self.view.layoutIfNeeded()
       }
   }
   

Here's how it works. When the hiderHeightConstraint is active, the hider is forced to zero height. Since it clips its subviews, the green view is not visible. Since the constraint between the hider's height and the green view's height is not required, the green view can still be its natural size. The other constraints (leading/trailing/top) force the green view to stick out beyond the bottom edge of the hider.

When the hiderHeightConstraint is not active, the hider grows to the height of the green view plus the padding, allowing the green view to be fully visible.

Here is what my storyboard looks like:

Answer 3

Use a view but then put in that view the line to make it look authentic.

Then when you are done make the whole animation disappear or if you want to make other animations go over it , you can call functions to move views above others

https://stackoverflow.com/a/38780829/4674760