Marin Todorov - Power up your animations

• Is on the raywenderlich.com team. Monthly newsletter, iOS animation by email.
• Animation calls on iOS are really easy. Lots of people feel like they will pick up animation along they. But then they don’t and they go to stack overflow and they pick up a bloated framework and everything is bloated and ugly and not how it has to be at all. These 3rd party libraries are slow, underperforming and way to heavy.
• The best way to learn about animation is by experimenting. There’s not many APIs so it isn’t super complicated to do that. Three steps:

1. Get to know your APIs
2. Try different properties
3. Try new layers Many people don’t really discover all this which is partially Apple’s fault because they don’t supply the best docs on this.

• UIView.animateWithDuration(…something…), in this method there’s spring APIs. Damping and initialSpringVelocity. Velocity is hard to explain. It represents the speed that the object initially has in points/second. Damping represents the flexibility for a spring.

• Properties you can animate are:

• transform (CGAffineTransformConcat, CGAffineTransformMakeScale, CGAffineTransformMakeRotate)

• alpha

• center

• frame

• Some layer properties you can use

• borderWidth, borderColor

• cornerRadius

• shadowOpacity, shadowOffset, shadowColor

• Layer animations can be done with CoreAnimation or a framework that enables this. It won’t work out-of-the-box with UIView.animateWithDuration(…something…).

• Animations can be chained together.

• Animating border radius and scale and rotation together can easily create a pretty neat blob-like animation. The spring animations would make it wobble a little bit and it makes for an interesting animation.

• Using the .Repeat option can make a chain of animations repeat, turning something into a spinner like thing.

• CAShapeLayer can also be animated. A CAShapeLayer can have a dashed line. You tell it the amount of points to skip and the amount of points to draw. You can animate the lineDashPhase. LineDashPhase is the amount offset to apply to the start of the line drawing. Properly setting that and then animating that would result in a border that kind of ‘walks’ around a shape.

• CAReplicatorLayer is a container layer. You can add CALayers to the replicator layer by calling addSubLayer on it. Putting a dot in it and then stretching it make a stretching dot. Not so cool, but important. If you set instanceCount on replicator layer to a number like 35 not much happens. In reality there’s 35 copies of the layer but you don’t see that. If you use instanceTransform you get a transformation between each layer. So layer 1 gets placed, then we transform, then we put another layer, transform again etc. This makes synchronised dots move. Still not awesome. instanceDelay on the replicator layer creates a delay to the layer similar to how the instanceTransform works.

• Question: Do you also do constraint animations?

• Yes, totally 100% awesome. For this demo it was easier to just use frame animations since our objects kind of stay in place.

Marin Todorov’s website