SlideShare a Scribd company logo
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?

More Related Content

Viewers also liked

Mastering Media with AV Foundation
Mastering Media with AV FoundationMastering Media with AV Foundation
Mastering Media with AV Foundation
Chris Adamson
 
Master Video with AV Foundation
Master Video with AV FoundationMaster Video with AV Foundation
Master Video with AV Foundation
Bob McCune
 
Introduction to animation
Introduction to animationIntroduction to animation
Introduction to animation
Pises Tantimala
 
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
Bob McCune
 
Animation in iOS
Animation in iOSAnimation in iOS
Animation in iOS
Alexis Goldstein
 
Animation: The Basic Skills
Animation:  The Basic SkillsAnimation:  The Basic Skills
Animation: The Basic Skills
walkers
 
20 iOS developer interview questions
20 iOS developer interview questions20 iOS developer interview questions
20 iOS developer interview questions
Arc & Codementor
 
iOS Developer Interview Questions
iOS Developer Interview QuestionsiOS Developer Interview Questions
iOS Developer Interview Questions
Clark Davidson
 
Graphics Libraries
Graphics LibrariesGraphics Libraries
Graphics Libraries
Prachi Mishra
 
Objective-C for Java Developers
Objective-C for Java DevelopersObjective-C for Java Developers
Objective-C for Java Developers
Bob McCune
 
Animation Basics
Animation BasicsAnimation Basics
Drawing with Quartz on iOS
Drawing with Quartz on iOSDrawing with Quartz on iOS
Drawing with Quartz on iOS
Bob McCune
 
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
Tim Oliver
 

Viewers also liked (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
 

More from Robert Brown

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

More from 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
 

Recently uploaded

Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 

Recently uploaded (20)

Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 

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

Editor's Notes

  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