IOS animation practice 3 – Do you really know how to use UIView animation

In this section, we’ll continue with the use of some animations in UIView, having covered the basics and the use of Spring animations, and in this section, we’ll look at Transitions, another animation we use a lot

First of all, let’s open up the last project. Those of you who haven’t read an article, please move on

Ppsheep.com/2017/01/22/…

Add, remove, and hide view animations

We know that Transitions mean a transition animation, but we still don’t know the specific effect. Next, let’s first take a look at what kind of effect this animation is.

So first we’re going to create an animationContainerView, and this is the view that we’re going to animate, why is it ContainerView, because we’re going to put some other controls in it to animate

Let’s hide the other controls and add the view to the animation to see what it looks like

animationContainerView = UIView(frame: view.bounds) animationContainerView? .frame = view.bounds view.addSubview(animationContainerView!)Copy the code

And then in the viewDidAppear method, do a transition animation

let newView = UIImageView(image: UIImage(named: "banner")) newView.center = animationContainerView! .center UIView.transition(with: animationContainerView! Duration: 0.83, the options: [. CurveEaseOut,. TransitionFlipFromTop], animations: {self. AnimationContainerView? .addSubview(newView) }, completion: nil)Copy the code

So let’s see what happens

I made the animation deliberately slow so that the effects would be more obvious. There are a number of options here, I won’t show them all, but I’ll mention two that are different

transitionCrossDissolve

TransitionCurlUp This is the effect of the entire view

I’m using addSubView to animate all of the above, so if YOU want to animate a view, or a hidden animation, you just change the method, and I’m not going to do that

Rollover effect

Uiview. transition(from: view, to: anothervc. view, duration: 1.0, options: [.curveEaseInOut,.transitionFlipFromLeft]) { (true) in }Copy the code

Log in animation

Next we’ll add some Transitions animations to the login page we did earlier

To describe what I want to achieve, when we click on the login button, an animation appears showing the current login progress, which is such a simple implementation

Step by step, first, make the label appear when the button is clicked

// Animated view let status = UIImageView(image: UIImage(named: "Banner")) let label = UILabel () let the message = [" connection... ", "authorization of...", "certified messages sent...", "authentication failed..."]  var statusPosition = CGPoint.zeroCopy the code

Hide status when the page loads

Status.ishidden = true status.center = loginbtn.center view.addSubview(status) label.frame = CGRect(x: 0, y: 0, width: status.frame.size.width, height: status.frame.size.height) label.textAlignment = .center label.font = UIFont(name: "HelveticaNeue", size: 18) label.textColor = UIColor.blue status.addSubview(label) statusPosition = status.centerCopy the code

Then we call the method showMeesage when we click

Func showMessage(index: Int) {label.text = message[index] uiView. transition(with: status, duration: 0.5, options: [.curveEaseIn,.transitionFlipFromBottom], animations: { self.status.isHidden = false }) { (true) in } }Copy the code

Let’s see what happens

Combined with dynamic effect

// A delay function
func delay(seconds: Double, completion:@escaping ()->()) {
  let popTime = DispatchTime.now() + Double(Int64( Double(NSEC_PER_SEC) * seconds )) / Double(NSEC_PER_SEC)
  
  DispatchQueue.main.asyncAfter(deadline: popTime) {
    completion()
  }
}Copy the code

Func removeMessage(index: Int) {uiView.animate (withDuration: 0.5, delay: 0.0, options: [], animations: { self.status.center.x += self.view.bounds.size.width }) { _ in self.status.isHidden = true self.status.center = self.statusPosition self .showMessage(index: index+1) } }Copy the code

Func showMessage(index: Int) {label.text = message[index] uiView. transition(with: status, duration: 0.5, options: [.curveEaseIn,.transitionFlipFromBottom], animations: { self.status.isHidden = false }) { _ in delay(seconds: Self.removemessage (index: index)}else{}})}} 2, completion: {if index < self.message.count-1}Copy the code