IOS animation-what? Can AutoLayout still perform animation?

IOS animation-what? Can AutoLayout still perform animation?

Yes. It is clear that AutoLayout can indeed be used as an animation. AutoLayout is used to make various constraints and adapt to different screens. When we change some of these constraints and talk about the slow display of the change process, is it true ~

Let's take a look at a cool animation provided by the book iOS Animations by tutorials:

Provided by books iOS Animations by tutorials

Next we will describe the implementation process of this animation.

First, we will animation the menu similar to Navigation at the top. Obviously, we have changed the Height of this view here. In this case, the first thing we need to do is to obtain the constraints of this menuView. we add the following line in the Code:

@ IBOutlet var menuHeightConstraint: NSLayoutConstraint!

To associate constraints, first find our constraints:

This is the constraint for the height of our menuView.

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

1. png

Then select menuHeightConstraint, so that we can associate the constraints.

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

IsMenuOpen =! IsMenuOpen

MenuHeightConstraint. constant = isMenuOpen? 200.0: 60.0

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 that menuView is very awkward and duang ~ Duang ~ Duang ~ . Most of the above Code has been mentioned in the previous article, except for this function:

Self. view. layoutIfNeeded ()

What does this function mean? You can understand it in this way. AutoLayout tries to calculate the constraint and implements it once. However, after you add this function, View implements it once ~~~ Amount ~~~ However, iOS does not have the opportunity to refresh the view, and all of them will have the animation effect .~ This seems to be a bit similar to the waste package, and the 'swing 'in java ~~~

For details about the UIView. animateWithDuration function, refer to my previous article.

In many cases, we cannot or do not want to associate our constraints. How can we obtain them and change them? Here we have a function. constraints (), which returns an array with all the constraints of this control. Next we will add an animation to the title. We can see that the title duang ~ In the animation ~ To the left.

For constraint in titleLabel. superview !. Constraints ()! [NSLayoutConstraint] {

If constraint. secondItem? NSObject = titleLabel & constraint. secondAttribute =. CenterX {

Constraint. constant = isMenuOpen? 100.0: 0.0

Continue

}

}

In this Code, we use the previously mentioned function. constraints () to obtain all the constraints, then use a loop to check one by one, and use the if statement to find the constraints we want to change. Then ~~ Then change.

Of course, you can also add an animation by adding constraints. Here we will not talk about how to add constraints. In general, the animation implementation method is similar to the above. You only need to add self. view. layoutIfNeeded () is a magic function.

The next task is to add the horizontal menu, that is, the banner with many beach pants and a bikini.

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)

}

The slider belongs to the HorizontalItemList class, And the HorizontalItemList class inherits from UIScrollView.

Override func didMoveToSuperview ()

If an animation is added to the function, the animation is executed when the UI space is added to the view. The animation implementation is very simple. We use a very simple function, it achieves a cool animation.

Final task: When you click the list, the Avatar is displayed below the view.

Let's take a look at the logic. What we need the Prime Minister to do is to create an image, then constrain him, and then change his constraints to achieve animation.

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 creates four constraints, including conY, conX, conHeight, and conHeight.

// 2. You can modify the constraint to implement the animation. We have already discussed it.

Now, the only thing that makes everyone confused is the attributes of the wearing constraints. Let's take the first one as an 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 attribute of the first object.

RelatedBy: some other functions of the constraint. Only. Equal is used here.

ToItem: The second object of the constraint.

Attribute: the attribute of the second object.

Multiplier: multiplier.

Constant: the value of the constraint.

Okay, we basically implemented all the cool animations.

The final point is to change the constraints and use the self. view. layoutIfNeeded () function together ().