iOS Animation--What? AutoLayout can also do animation?

Yes, it is very clear to tell you reader, AutoLayout can do animation. AutoLayout is used to make a variety of constraints, is used to fit different screens, then when we change some of these constraints and say that the process of change at a slow speed display, then it is not the implementation of the animation ~

First look at a cool animation, this animation is provided by the book iOS Animations by tutorials:

Provided by the book iOS animations by tutorials

Next we will focus on the implementation of this animation process to describe.

First we animate the top-like navigation menu, and obviously we've changed the height of the view here, so the first thing we have to do is get the menuview constraint, and we add the following line to the code:

@IBOutlet var menuheightconstraint:nslayoutconstraint!

How to associate constraints, first find our constraints:

This is the height constraint of our menuview.

Double-click the constraint and select Connections Inspector, as shown in the following illustration:

1.png

Then select Menuheightconstraint, so that we have an association with the constraint conditions.

Now we add the following code to the "+" button method:

Ismenuopen =!ismenuopen

Menuheightconstraint.constant = Ismenuopen? 200:60

Titlelabel.text = Ismenuopen? "Select Item": "Packing List"

Uiview.animatewithduration (1.0, delay:0.0,

usingspringwithdamping:0.4, initialspringvelocity:10.0,

Options:. Curveeasein, animations: {

Self.view.layoutIfNeeded ()

Let angle = Self.ismenuopen? CGFloat (m_pi_4): 0.0

Self.buttonMenu.transform = cgaffinetransformmakerotation (angle)

}, Completion:nil)

Let's take a look at the effect, I can see Menuview is very dragging down, still duang~duang~duang~. This code in the last article most of us have talked about, in addition to this function:

Self.view.layoutIfNeeded ()

What does this function mean, you can understand that, AutoLayout for the constraint to try the calculation, one implementation, but when you add this function, the view is once realized ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ But, iOS did not have the opportunity to refresh the view, all will have the effect of animation. ~ This seems to be a waste of the bag, Java's ' swing ' a bit similar ~ ~ ~ ~

For uiview.animatewithduration This function if there is anything you do not understand, please refer to my previous article.

Most of the time, we can't or don't want to make a connection to our constraints, so how do we get our constraints to change him at this time? We have a function here. Constraints () This function returns an array with all the constraints of the control. Next we add the animation to the title, we see above, the animation in the title duang~ run to the left.

For constraint in titlelabel.superview!. Constraints () as! [Nslayoutconstraint] {

If Constraint.seconditem as? NSObject = = Titlelabel && Constraint.secondattribute = =. CenterX {

Constraint.constant = Ismenuopen? 100:0.0

Continue

}

}

In this code we use the function mentioned earlier. Constraints () gets all the constraints and then checks them in one loop, using the IF statement to find the constraint we want to change. Then ~ ~ and then change slightly.

Of course, you can add a constraint to increase the animation, how to add constraints, here is not to say, the general implementation of the animation and similar to the above, you just need to add self.view.layoutIfNeeded () this magical function.

The next task is to add the horizontal menu, the one with a lot of beach pants and a bikini banner.

Override Func Didmovetosuperview () {

Super.didmovetosuperview ()

if Superview = = Nil {

Return

}

Uiview.animatewithduration (1.0, delay:0.01, usingspringwithdamping:0.5, initialspringvelocity:10.0, Options:. Curveeasein, animations: {

Self.alpha = 1.0

Self.center.x-= Self.frame.size.width

}, Completion:nil)

}

This slider is Horizontalitemlist class, and this Horizontalitemlist class inherits from Uiscrollview, and then we're in his

Override Func Didmovetosuperview ()

function, the animation is performed when the UI space is added to the view, and the animation implementation is very simple, and we use very simple functions to achieve a cool animation.

Final task: When clicking on the list, display the avatar below the view.

Let's get down to logic, what our Prime Minister has to do is create an image and then constrain it, then change his constraints to animate it.

Func ShowItem (index:int) {

println ("tapped Item (index)")

1

Let ImageView = Uiimageview (Image:uiimage (named: Summericons_100px_0 (Index). png))

Imageview.backgroundcolor = Uicolor (red:0.0, green:0.0, blue:0.0, alpha:0.5)

ImageView.layer.cornerRadius = 5.0

ImageView.layer.masksToBounds = True

Imageview.settranslatesautoresizingmaskintoconstraints (False)

View.addsubview (ImageView)

Let Conx = Nslayoutconstraint (

Item:imageview,

attribute:. CenterX,

Relatedby:. Equal,

Toitem:view,

attribute:. CenterX,

multiplier:1.0,

constant:0.0)

Conx.active = True

Let Cony = Nslayoutconstraint (

Item:imageview,

attribute:. Bottom,

Relatedby:. Equal,

Toitem:view,

attribute:. Bottom,

multiplier:1.0,

Constant:imageView.frame.size.height)

Cony.active = True

Let Conwidth = Nslayoutconstraint (

Item:imageview,

attribute:. Width,

Relatedby:. Equal,

Toitem:view,

attribute:. Width,

multiplier:0.33,

Constant:-50.0)

Conwidth.active = True

Let Conheight = Nslayoutconstraint (

Item:imageview,

attribute:. Height,

Relatedby:. Equal,

Toitem:imageview,

attribute:. Width,

multiplier:1.0,

constant:0.0)

Conheight.active = True

View.layoutifneeded ()

2

Uiview.animatewithduration (0.8, delay:0.0,

usingspringwithdamping:0.4, initialspringvelocity:0.0,

Options:nil, animations: {

Cony.constant =-IMAGEVIEW.FRAME.SIZE.HEIGHT/2

Conwidth.constant = 0.0

Self.view.layoutIfNeeded ()

}, Completion:nil)

Uiview.animatewithduration (0.8, delay:1.0, Options:nil, animations: {

Cony.constant = ImageView.frame.size.height

Conwidth.constant =-50.0

Self.view.layoutIfNeeded ()

}, Completion: {_ in

Imageview.removefromsuperview ()

})

}

}

To explain this code:

1 created four constraints, including Cony, Conx, Conheight, Conheight.

2 by modifying the constraints to achieve the animation, has been said before.

So now the only thing that makes you wonder is that there are only a few attributes of the binding, and we take the first example:

Let Conx = Nslayoutconstraint (

Item:imageview,

attribute:. CenterX,

Relatedby:. Equal,

Toitem:view,

attribute:. CenterX,

multiplier:1.0,

constant:0.0)

Conx.active = True

Item: The first object of the constraint.

Attribute: The property of the first object.

Relatedby: Some other function of constraint, here only. Equal.

Toitem: The second object of the constraint.

Attribute: The property of the second object.

Multiplier: Multiplier.

Constant: The value of the constraint.

All right, we've basically achieved all the cool animations.

The end is to change the constraint conditions, with the function self.view.layoutIfNeeded ().