ANIMATIONS IN IOS

Created by Anna Dovnar

THERE ARE TWO WAYS TO WORK WITH ANIMATION. THE FIRST WAY IS VIA UIKIT, WHICH INCLUDES VIEW-BASED ANIMATIONS AS WELL AS ANIMATED TRANSITIONS BETWEEN CONTROLLERS. THE SECOND WAY IS WORKING WITH CORE ANIMATION LAYERS DIRECTLY FOR FINER-GRAINED CONTROL.

UIKIT ANIMATION

• Transitions between controllers

• Transitions between views

• View property animation

VIEW CONTROLLER TRANSITIONS

• CrossDissolve

• CoverVertical

• FlipHorizontal

• PartialCurl

UIVIEWCONTROLLER PROVIDES BUILT-IN SUPPORT FOR TRANSITIONING BETWEEN VIEW CONTROLLERS THROUGH THE PRESENTVIEWCONTROLLER METHOD.

VIEW TRANSITIONS

IN ADDITION TO TRANSITIONS BETWEEN CONTROLLERS, UIKIT ALSO SUPPORTS ANIMATING TRANSITIONS BETWEEN VIEWS TO SWAP ONE VIEW FOR ANOTHER.

VIEW PROPERTY ANIMATIONS

• Frame

• Bounds

• Center

• Alpha

• Transform

• Color

STARTING ANIMATIONS USING THE BEGIN/COMMIT METHODS

STARTING ANIMATIONS USING THE BLOCK-BASED METHODS

• animateWithDuration:animations:

• animateWithDuration:animations:completion:

• animateWithDuration:delay:options:animations:completion:

CONFIGURING THE PARAMETERS FOR BEGIN/COMMIT ANIMATIONS

• setAnimationStartDate:

• setAnimationDelay:

• setAnimationDuration:

• setAnimationCurve:

• setAnimationRepeatCount:

• setAnimationRepeatAutoreverses:

• setAnimationDelegate:

• setAnimationWillStartSelector:

• setAnimationDidStopSelector:

• setAnimationBeginsFromCurrentState:

ANIMATION DELEGATE

The animationID and context parameters for both methods are the same parameters that you passed to the beginAnimations:context: method at the beginning of the animation block:

• animationID—An application-supplied string used to identify the animation.

• context—An application-supplied object that you can use to pass additional information to the delegate.

The setAnimationDidStopSelector: selector method has an additional parameter—a Boolean value that is YES if the animation ran to completion. If the value of this parameter is NO, the animation was either canceled or stopped prematurely by another animation.

CORE ANIMATION

UIVIEW ANIMATIONS ALLOW A LOT OF CAPABILITY AND SHOULD BE USED IF POSSIBLE DUE TO THE EASE OF IMPLEMENTATION. HOWEVER, SOME THINGS CANNOT BE DONE WITH UIVIEW ANIMATIONS, SUCH AS ANIMATING ADDITIONAL PROPERTIES THAT CANNOT BE ANIMATED WITH A VIEW, OR INTERPOLATING ALONG A NON-LINEAR PATH. IN SUCH CASES WHERE YOU NEED FINER CONTROL, CORE ANIMATION CAN BE USED DIRECTLY AS WELL.

ANIMATION HAPPENS VIA LAYERSLayer animations can be either implicit or explicit

IMPLICIT ANIMATIONS

TO ADD AN IMPLICIT ANIMATION FOR THE LAYER, SIMPLY WRAP PROPERTY CHANGES IN A CATRANSACTION . THIS ALLOWS ANIMATING PROPERTIES THAT WOULD NOT BE ANIMATABLE WITH A VIEW ANIMATION

EXPLICIT ANIMATIONS

LET YOU ENCAPSULATE ANIMATIONS THAT ARE THEN EXPLICITLY ADDED TO A LAYER. THESE ALLOW FINER-GRAINED CONTROL OVER ANIMATIONS

STOPPING AN EXPLICIT ANIMATION WHILE IT IS RUNNING

• To remove a single animation object from the layer, call the layer’s removeAnimationForKey: method to remove your animation object. This method uses the key that was passed to the addAnimation:forKey: method to identify the animation. The key you specify must not be nil.

• To remove all animation objects from the layer, call the layer’s removeAllAnimations method. This method removes all ongoing animations immediately and redraws the layer using its current state information.

ANIMATIONS WITH AUTO LAYOUT

• Create outlet for constraint

• Change constraint.constant value

• Don’t forget to call layoutIfNeeded

ANIMATIONS IN APPLE WATCHANIMATION IS NOT REALLY SUPPORTED

TO MAKE SOMETHING APPEAR ANIMATED, YOU HAVE TO PRE-GENERATE A TON OF IMAGES, AND THEN CYCLE THROUGH LIKE A FLIP-BOOK. THE ERA OF THE ANIMATED GIF IS BACK!

[self.imgSpriteAnimation setImageNamed:@"dragon-"]; [self.imgSpriteAnimation startAnimatingWithImagesInRange:NSMakeRange(0, 60)

duration:1.0 repeatCount:0];

FOR AN EXAMPLE OF THIS, CHECK OUT APPLE’S LISTER EXAMPLE. IN THE WATCH APP’S GLANCE, YOU’LL SEE THERE ARE 360 IMAGES REPRESENTING A CIRCLE ANIMATION!