SlideShare ist ein Scribd-Unternehmen logo
1 von 24
Core Animation:
Beyond the Basics
Robert Brown
@robby_brown
What is Core Animation

An animation framework that is fast, efficient, and easy
to use
Provides a high-level, layer-centric abstraction
Not intended for high-end games
  Use OpenGL, Cocos2D/3D, Unity, or UDK instead
Reviewing the Basics
CABasicAnimation

Provides some basic properties:
  fromValue
  toValue
  byValue
CABasicAnimation

fromValue & toValue => Interpolates from fromValue to
toValue
fromValue & byValue => Interpolates from fromValue to
(fromValue + byValue)
byValue & toValue => Interpolates from (toValue -
byValue) to toValue
CABasicAnimation

fromValue => Interpolates from current value to
fromValue
toValue => Interpolates from toValue to current value
byValue => Interpolates from current value to (current
value + byValue)
CABasicAnimation

CABasicAnimation * scaleAnimation =

[CABasicAnimation animationWithKeyPath:@"transform.scale"];

 scaleAnimation.duration = 1.0f;      // CGFloat
 scaleAnimation.fromValue = @0.0f;    // NSNumber
 scaleAnimation.toValue   = @1.0f;    // NSNumber

 [myView.layer addAnimation:scaleAnimation forKey:@"scale"];
CABasicAnimation

CABasicAnimation * shrinkAnimation =

[CABasicAnimation animationWithKeyPath:@"frame"];

 shrinkAnimation.duration = 1.0f;
 shrinkAnimation.fromValue = [NSValue valueWithCGRect:
   CGRectMake(0.0f, 0.0f, 320.0f, 480.0f)];
 shrinkAnimation.toValue   = [NSValue valueWithCGRect:
   CGRectMake(80.0f, 120.0f, 160.0f, 240.0f)];

 [myView.layer addAnimation:shrinkAnimation forKey:@"shrink"];
CAAnimationGroup


Allows many animations to be run simultaneously on
the same layer
Changing the duration of the group affects each of the
animations in the group
CAAnimationGroup


CAAnimationGroup * group = [CAAnimationGroup animation];

 group.duration   = 1.0f;
 group.animations = @[moveAnimation, scaleAnimation];

 [myView.layer addAnimation:group forKey:@"group"];
UIView Block Animation

UIView provides a convenient method called
+animateWithDuration:animations:completion:
Most UIView properties are animatable
Block animation can do anything a group of basic
animations can do
UIView Animatable
Properties

 frame         alpha
 bounds        backgroundColor
 center        contentStretch
 transform
UIView Block Animation

myView.transform = CGAffineTransformMakeScale(0.0f, 0.0f);


[UIView animateWithDuration:1.0f animations:^{

      CGPoint center = myView.center;
      center.y += 10.0f;
      myView.center = center;

      myView.transform = CGAffineTransformMakeScale(1.0f, 1.0f);
}];
Beyond the Basics
CAKeyFrameAnimation


Allows specific values at specific times
Core Animation interpolates between specified values
Alternatively allows a path to be specified
CAKeyFrameAnimation


   CAKeyframeAnimation * scaleAnimation =
[CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];

scaleAnimation.keyTimes = @[@0.0f, @0.1f, @0.6f, @1.0f];
scaleAnimation.values   = @[@0.0f, @1.0f, @1.0f, @0.0f];

[myView.layer addAnimation:scaleAnimation forKey:@"scale"];
CAKeyFrameAnimation
CAKeyframeAnimation * moveAnimation =

[CAKeyframeAnimation animationWithKeyPath:@"position"];

 moveAnimation.calculationMode = kCAAnimationLinear;

 CGMutablePathRef curvedPath = CGPathCreateMutable();
 CGPathMoveToPoint(curvedPath, NULL, fromPoint.x, fromPoint.y);
 CGPathAddCurveToPoint(curvedPath,
                       NULL,
                       fromPoint.x, toPoint.y,
                       fromPoint.x, toPoint.y,
                       toPoint.x, toPoint.y);
 moveAnimation.path = curvedPath;
 CGPathRelease(curvedPath);

[myView.layer addAnimation:moveAnimation forKey:@"move"];
Demo
CAEmitterLayer

Used for particle effects
Automatically creates and animates particles from
CAEmitterCell objects
Many properties have built-in random ranges
Available since iOS 5
CAEmitterCell
contents       scaleSpeed   magnificationFilter
color          velocity     emissionLatitude
emitterCells   scale        emissionLongitude
spin           redSpeed     xAcceleration
lifetime       greenSpeed   yAcceleration
name           blueSpeed    zAcceleration
birthRate      alphaSpeed   ...and many more
CAEmitterLayer

1.Create a custom UIView
2.Set layer class to CAEmitterLayer
3.Create CAEmitterCell(s)
4.Add the cell(s) to the layer.
5.(Optional) Add sub-cell(s) to the layer’s cell(s)
Demo
Want to Learn More?

Core Animation for Mac OS X and the iPhone
WWDC 2010 424/425
WWDC 2011 421
WWDC 2012 238
Apple Docs
Questions?

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (13)

Mastering Media with AV Foundation
Mastering Media with AV FoundationMastering Media with AV Foundation
Mastering Media with AV Foundation
 
Master Video with AV Foundation
Master Video with AV FoundationMaster Video with AV Foundation
Master Video with AV Foundation
 
Introduction to animation
Introduction to animationIntroduction to animation
Introduction to animation
 
Composing and Editing Media with AV Foundation
Composing and Editing Media with AV FoundationComposing and Editing Media with AV Foundation
Composing and Editing Media with AV Foundation
 
Animation in iOS
Animation in iOSAnimation in iOS
Animation in iOS
 
Animation: The Basic Skills
Animation:  The Basic SkillsAnimation:  The Basic Skills
Animation: The Basic Skills
 
20 iOS developer interview questions
20 iOS developer interview questions20 iOS developer interview questions
20 iOS developer interview questions
 
iOS Developer Interview Questions
iOS Developer Interview QuestionsiOS Developer Interview Questions
iOS Developer Interview Questions
 
Graphics Libraries
Graphics LibrariesGraphics Libraries
Graphics Libraries
 
Objective-C for Java Developers
Objective-C for Java DevelopersObjective-C for Java Developers
Objective-C for Java Developers
 
Animation Basics
Animation BasicsAnimation Basics
Animation Basics
 
Drawing with Quartz on iOS
Drawing with Quartz on iOSDrawing with Quartz on iOS
Drawing with Quartz on iOS
 
try! Swift - Advanced Graphics with Core Animation
try! Swift - Advanced Graphics with Core Animationtry! Swift - Advanced Graphics with Core Animation
try! Swift - Advanced Graphics with Core Animation
 

Mehr von Robert Brown

Mehr von Robert Brown (15)

High level concurrency
High level concurrencyHigh level concurrency
High level concurrency
 
Data Source Combinators
Data Source CombinatorsData Source Combinators
Data Source Combinators
 
Elixir
ElixirElixir
Elixir
 
MVVM
MVVMMVVM
MVVM
 
Reactive Cocoa
Reactive CocoaReactive Cocoa
Reactive Cocoa
 
UIKit Dynamics
UIKit DynamicsUIKit Dynamics
UIKit Dynamics
 
iOS State Preservation and Restoration
iOS State Preservation and RestorationiOS State Preservation and Restoration
iOS State Preservation and Restoration
 
Anti-Patterns
Anti-PatternsAnti-Patterns
Anti-Patterns
 
Pragmatic blocks
Pragmatic blocksPragmatic blocks
Pragmatic blocks
 
Automatic Reference Counting
Automatic Reference CountingAutomatic Reference Counting
Automatic Reference Counting
 
Grand Central Dispatch Design Patterns
Grand Central Dispatch Design PatternsGrand Central Dispatch Design Patterns
Grand Central Dispatch Design Patterns
 
Grand Central Dispatch
Grand Central DispatchGrand Central Dispatch
Grand Central Dispatch
 
Mac/iOS Design Patterns
Mac/iOS Design PatternsMac/iOS Design Patterns
Mac/iOS Design Patterns
 
Core Data
Core DataCore Data
Core Data
 
Quick Look for iOS
Quick Look for iOSQuick Look for iOS
Quick Look for iOS
 

Kürzlich hochgeladen

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 

Kürzlich hochgeladen (20)

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 

Core Animation: Beyond the Basics

  • 1. Core Animation: Beyond the Basics Robert Brown @robby_brown
  • 2. What is Core Animation An animation framework that is fast, efficient, and easy to use Provides a high-level, layer-centric abstraction Not intended for high-end games Use OpenGL, Cocos2D/3D, Unity, or UDK instead
  • 4. CABasicAnimation Provides some basic properties: fromValue toValue byValue
  • 5. CABasicAnimation fromValue & toValue => Interpolates from fromValue to toValue fromValue & byValue => Interpolates from fromValue to (fromValue + byValue) byValue & toValue => Interpolates from (toValue - byValue) to toValue
  • 6. CABasicAnimation fromValue => Interpolates from current value to fromValue toValue => Interpolates from toValue to current value byValue => Interpolates from current value to (current value + byValue)
  • 7. CABasicAnimation CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; scaleAnimation.duration = 1.0f; // CGFloat scaleAnimation.fromValue = @0.0f; // NSNumber scaleAnimation.toValue = @1.0f; // NSNumber [myView.layer addAnimation:scaleAnimation forKey:@"scale"];
  • 8. CABasicAnimation CABasicAnimation * shrinkAnimation = [CABasicAnimation animationWithKeyPath:@"frame"]; shrinkAnimation.duration = 1.0f; shrinkAnimation.fromValue = [NSValue valueWithCGRect: CGRectMake(0.0f, 0.0f, 320.0f, 480.0f)]; shrinkAnimation.toValue = [NSValue valueWithCGRect: CGRectMake(80.0f, 120.0f, 160.0f, 240.0f)]; [myView.layer addAnimation:shrinkAnimation forKey:@"shrink"];
  • 9. CAAnimationGroup Allows many animations to be run simultaneously on the same layer Changing the duration of the group affects each of the animations in the group
  • 10. CAAnimationGroup CAAnimationGroup * group = [CAAnimationGroup animation]; group.duration = 1.0f; group.animations = @[moveAnimation, scaleAnimation]; [myView.layer addAnimation:group forKey:@"group"];
  • 11. UIView Block Animation UIView provides a convenient method called +animateWithDuration:animations:completion: Most UIView properties are animatable Block animation can do anything a group of basic animations can do
  • 12. UIView Animatable Properties frame alpha bounds backgroundColor center contentStretch transform
  • 13. UIView Block Animation myView.transform = CGAffineTransformMakeScale(0.0f, 0.0f); [UIView animateWithDuration:1.0f animations:^{ CGPoint center = myView.center; center.y += 10.0f; myView.center = center; myView.transform = CGAffineTransformMakeScale(1.0f, 1.0f); }];
  • 15. CAKeyFrameAnimation Allows specific values at specific times Core Animation interpolates between specified values Alternatively allows a path to be specified
  • 16. CAKeyFrameAnimation CAKeyframeAnimation * scaleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"]; scaleAnimation.keyTimes = @[@0.0f, @0.1f, @0.6f, @1.0f]; scaleAnimation.values = @[@0.0f, @1.0f, @1.0f, @0.0f]; [myView.layer addAnimation:scaleAnimation forKey:@"scale"];
  • 17. CAKeyFrameAnimation CAKeyframeAnimation * moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; moveAnimation.calculationMode = kCAAnimationLinear; CGMutablePathRef curvedPath = CGPathCreateMutable(); CGPathMoveToPoint(curvedPath, NULL, fromPoint.x, fromPoint.y); CGPathAddCurveToPoint(curvedPath, NULL, fromPoint.x, toPoint.y, fromPoint.x, toPoint.y, toPoint.x, toPoint.y); moveAnimation.path = curvedPath; CGPathRelease(curvedPath); [myView.layer addAnimation:moveAnimation forKey:@"move"];
  • 18. Demo
  • 19. CAEmitterLayer Used for particle effects Automatically creates and animates particles from CAEmitterCell objects Many properties have built-in random ranges Available since iOS 5
  • 20. CAEmitterCell contents scaleSpeed magnificationFilter color velocity emissionLatitude emitterCells scale emissionLongitude spin redSpeed xAcceleration lifetime greenSpeed yAcceleration name blueSpeed zAcceleration birthRate alphaSpeed ...and many more
  • 21. CAEmitterLayer 1.Create a custom UIView 2.Set layer class to CAEmitterLayer 3.Create CAEmitterCell(s) 4.Add the cell(s) to the layer. 5.(Optional) Add sub-cell(s) to the layer’s cell(s)
  • 22. Demo
  • 23. Want to Learn More? Core Animation for Mac OS X and the iPhone WWDC 2010 424/425 WWDC 2011 421 WWDC 2012 238 Apple Docs

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. fromValue, toValue, and byValue must be objects.\n
  8. NSValue can wrap other objects too, such as CGSize and CGPoint.\n
  9. \n
  10. \n
  11. Block animations will fulfill 95% of your animation needs.\n
  12. The transform property can scale, rotate, translate, sheer, and flip a view.\n
  13. \n
  14. \n
  15. The interpolation function may be changed to get different effects.\n
  16. \n
  17. Don’t forget manual memory management. Core Graphics is C code. \n
  18. \n
  19. Particle effects can be used for fire, water, wind, fog, smoke, explosions, etc. \n
  20. Many of these properties have a range variant (ex. lifetime and lifetimeRange). \n
  21. Rather than create a custom UIView, you can instead create a standard CAEmitterLayer and add it as a sub-layer.\n
  22. Animated flask\nParticle effect\nApple Fireworks\n
  23. \n
  24. \n