Animating views constrained with auto layout

Question

Just for fun I started to play with animations after successfully applying them to some basic background color changes. I have some different images on my "welcome/splash" view that I would like to animate. One image should appear from the bottom, another from the top and so on.

I immediately ran into trouble since I am using auto layout it was not that easy as animating background colors. I found this post How do I animate constraint changes? and after doing what was described at least my image was animating. However, is it correct that the console window should be filled with warnings/info/errors about constraint violations? Also, animating the vertical position of one image causes all the other image to animate too, probably because of some constraint relations.

How are you supposed to deal with that? when animating the "Bottom layout attribute" with a new constant value I expect only the view it belongs to animate, not the whole screen.

And how are you supposed to refer to the constraints? By outlets?

I am creating my views and constraints in storyboard. I deleted my code for animating the image views since it was just a mess. But whats done with the button and textfields in this tutorial is pretty much what I am trying to do with my images. Without animating one image causing the whole view to animate with it. http://www.raywenderlich.com/113674/ios-animation-tutorial-getting-started

Edit your question to include your code for animating the layout. Also, how do you create your views and constraints—in a storyboard or in code? — rob mayoff, Dec 09 '15 at 22:44
Updated question. I deleted the code (wasn't much) because it was just a mess. Added link to what I am trying to achieve (at least the same effect). — LuckyLuke, Dec 09 '15 at 22:49
Please provide a graphical representation of what you are trying to achieve and i will suggest you the constraint you need to change or add from code or may be from storyboard. If you just want to do whats in that tutorial you can set fixed constraints and you can animate them using Canvas. Otherwise if your requirements not completed by using Canvas then provide some graphics. — Mahesh Agrawal, Dec 10 '15 at 09:15

Peter Hornsby · Accepted Answer · 2015-12-14T11:52:00.910

However, is it correct that the console window should be filled with warnings/info/errors about constraint violations?

Learning Auto layout can be a challenge which will fill your days with such warnings/info/errors about constraints. Many iOS developer's struggle with Auto Layout at first. Auto layout is an addition to the layout process. The issue here is how are you going to deal with them. I suggest reading the Apple Auto Layout Guide, it contains a section on debugging. Also look at the Debugging Tricks and Tips section.

Here's a great article explaining more of the concepts behind Auto layout.

Build a simply app that has only one view and a subview, so that you can reduce the noise around layout constraint errors in more complicated layouts.

Here is a code snippet of how to animate a constraint.

if myViewTrailingConstraint.constant == -2 {
    myViewTrailingConstraint.constant = 200
} else {
    myViewTrailingConstraint.constant = -2
}

UIView.animateWithDuration(0.3,
    animations: {
        self.view.layoutIfNeeded()
    },
    completion: nil)

How are you supposed to deal with that?

Auto layout is an inter connected system of relationships between your views. A constraint represents a relationship. So you really need to think through your view's layout and plan your constraints first. Why? because if you plan to animate certain views you need to need to make sure that the constraint constant you are going to change will effect only that view in question.

And how are you supposed to refer to the constraints? By outlets?

You can create constraints solely in code or with the interface builder (outlets). I would suggest that you start with interface builder as even when you are comfortable working in code, it is useful and time saving to be able to do your initial layout in interface builder - so learn to use both.

score 1 · Answer 2 · answered Dec 09 '15 at 23:40

Warnings are not normal - you have to solve them to avoid strange effects.

If animating a constraint value of one image moves other images, then indeed you must have some constraints in place that also change - e.g "equal width" constraints or such. Normally it just works - if it doesn't, you have to show the warnings you get and the constraints you set in order for someone to see what is going wrong.

Animating views constrained with auto layout

2 Answers2