14. Interaction Design (IxD) defines the structure and
behavior of interactive systems.
Interaction Designers strive to create meaningful
relationships between people and the products and
services that they use, from computers to mobile
devices to appliances and beyond.
15. Bill Moggridge’s 3 Questions
How do you do?
How do you feel?
How do you know?
1.
2.
3.
16. Core Animation Makes it Easy
UIView.Animate (
duration: 4,
animation: () => {
notification.Frame = new RectangleF (new
PointF (0, 0), notification.Frame.Size);
}
);
19. Every UIView has a CALayer
UIViews are responsible for interactions
CALayers are responsible for what you see
•
•
UIView someView = new UIView();
someView.LayerLayer.Frame = new RectangleF(0, 0, 100, 100);
20. What you see is a compositing of layers
UIView
CALayer
UIView
UIView
UIImage
UILabel
UIButton
UIButton
UIButton
UIButton
UIButton
UIButton
UIView
CALayer
UIView
UIButton
UIButton
UIButton
UIButton
UIButton
UIButton
UIView
UIImage
UILabel
21. CALayer
Every UIView has a layer and sets itself as the delegate for that layer
CALayer manages visual content and the geometry of that content
drawRect creates the layer
•
•
•
https://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html
CALayer someLayer = new CALayer();
someLayer.Frame = new RectangleF(0, 0, 300, 40);
someLayer.Contents = UIImage.FromFile('path/to/image.png').CGImage;
23. What Core Animation Provides
Interpolation
Timing
Hardware Accelerated. Animations happen on the GPU.
Animations are on a background thread
•
•
•
•
25. Animation Rendering
Layout is on the CPU. Keep visuals flat for better performance.
Animation is on the GPU.
•
•
WWDC Session 238 iOS App Performance: Graphics and Animations
1. Create animation and update view hierarchy
2. Prepare and commit
animation
3. Render each frame
27. Implicit Animations of Layer-Backed Views
Uses default timing and animation properties
UIView must be wrapped in an Animate block
UIView Properties
Frame
Center
BackgroundColor
Opacity
•
•
•
•
•
•
•
35. Explicit Animations
CABasicAnimation, CAGroupAnimation, CAKeyframeAnimation
More fine grain control of the animation
Only works on the Layer and doesn’t update the View
FillMode = CAFillMode.Forwards
RemovedOnCompletion = false
Sequence animations
Custom animation of your own properties
•
•
•
•
•
•
•
36. CABasicAnimation
KeyPath - the property to animate
BeginTime - when in time to start, can be used to stagger
sequenced animations
Duration - how long the animation should take, scaled to the
timeline of the parent
From / To
RemoveOnCompletion, FillMode
AnimationStopped, AnimationStarted
TimingFunction - Linear, EaseIn, EaseOut, EaseInEaseOut
•
•
•
•
•
•
•
38. Flow
createSlide() - adds or updates CALayer with new images
transitionIn() - clears old animations, defines new animations, adds them to
layers, Timer calls transitionOut
transitionOut() - defines out animations, adds to layers, AnimationStopped
signals end
cyclesSlides() - increments slide and restarts the loop calling createSlide
40. Everyone Wants to Spin
var spinAnim = new CABasicAnimation {
KeyPath = "transform.rotation.z",
To = NSNumber.FromDouble( Math.PI ),
Duration = 0.4,
Cumulative = true,
RepeatCount = 999
} ;
spinner.Layer.AddAnimation( spinAnim,
"spinMeRightRoundBabyRightRound" );
41. CAKeyframeAnimation
Animate along a path
Set keyframes for very fine control of the timing
Properties
Path - a bezier curve to follow
KeyTimes - 1:1 with values, from 0 to 1 over duration
Values - the keyframe values at each point
•
•
•
•
•
•
