A short guide to animations in iOS
1 like428 views
The document discusses animation techniques in iOS, primarily focusing on two methods: UIKit, which facilitates view-based animations and controller transitions, and Core Animation, offering finer control through direct layer manipulation. It details various animation behaviors, parameters, delegate functions, and constraints for creating animations using both frameworks. Special mention is made of animation limitations on Apple Watch, where pre-generated images must be cycled for effects.
![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!](https://image.slidesharecdn.com/animationsinios-150521124732-lva1-app6892/85/A-short-guide-to-animations-in-iOS-18-320.jpg)
A short guide to animations in iOS
- 1. ANIMATIONS IN IOS Created by Anna Dovnar
- 2. 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.
- 3. UIKIT ANIMATION • Transitions between controllers • Transitions between views • View property animation
- 4. VIEW CONTROLLER TRANSITIONS • CrossDissolve • CoverVertical • FlipHorizontal • PartialCurl UIVIEWCONTROLLER PROVIDES BUILT-IN SUPPORT FOR TRANSITIONING BETWEEN VIEW CONTROLLERS THROUGH THE PRESENTVIEWCONTROLLER METHOD.
- 5. VIEW TRANSITIONS IN ADDITION TO TRANSITIONS BETWEEN CONTROLLERS, UIKIT ALSO SUPPORTS ANIMATING TRANSITIONS BETWEEN VIEWS TO SWAP ONE VIEW FOR ANOTHER.
- 6. VIEW PROPERTY ANIMATIONS • Frame • Bounds • Center • Alpha • Transform • Color
- 7. STARTING ANIMATIONS USING THE BEGIN/COMMIT METHODS
- 8. STARTING ANIMATIONS USING THE BLOCK-BASED METHODS • animateWithDuration:animations: • animateWithDuration:animations:completion: • animateWithDuration:delay:options:animations:co mpletion:
- 9. CONFIGURING THE PARAMETERS FOR BEGIN/COMMIT ANIMATIONS • setAnimationStartDate: • setAnimationDelay: • setAnimationDuration: • setAnimationCurve: • setAnimationRepeatCount: • setAnimationRepeatAutoreverses: • setAnimationDelegate: • setAnimationWillStartSelector: • setAnimationDidStopSelector: • setAnimationBeginsFromCurrentState:
- 10. 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.
- 11. 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.
- 12. ANIMATION HAPPENS VIA LAYERS Layer animations can be either implicit or explicit
- 13. 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
- 14. EXPLICIT ANIMATIONS LET YOU ENCAPSULATE ANIMATIONS THAT ARE THEN EXPLICITLY ADDED TO A LAYER. THESE ALLOW FINER-GRAINED CONTROL OVER ANIMATIONS
- 15. 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.
- 16. ANIMATIONS WITH AUTO LAYOUT • Create outlet for constraint • Change constraint.constant value • Don’t forget to call layoutIfNeeded
- 17. ANIMATIONS IN APPLE WATCH ANIMATION IS NOT REALLY SUPPORTED
- 18. 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!