WWDC2014 Video 221 Creating Custom iOS User Interface
In this video, four main topics are covered.
Sprint animations
Spring Animation is the base of almost every animation in the iOS8 system, which means almost all of the animations in iOS8 are using spring animation. It was introduced from iOS7 via one single function:
+ animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:
This function is very similar with ordinary animation function we used to using a lot. The only difference here is two additional parameters: Damping Ratio and Initial Spring Velocity. The damping ratio defines how much the oscillation oscillate at the end state of the animation, ranging from 0.0 to 1.0. 0.0 defines high frequency oscillation, while 1.0 defines no oscillation at all. This is place where can help us make a boucing effect. The initial spring velocity defines how fast the animation starts. The smaller the volecity is, the sooner the animation object will move to the end state, verse vice.
The following demo code imitate the Animation of Opening Folder on iOS Home Screen.
const static CGFloat BOXSIZE = 100.f; - (void)tapped:(UITapGestureRecognizer *)gesture { [self initBox]; [UIView animateWithDuration:1.f delay:0.f usingSpringWithDamping:.75f initialSpringVelocity:.5f options:0 animations:^{ [self endBox]; } completion:^(BOOL finished) { // }]; } - (void)initBox { self.movingBox.frame = CGRectMake(0.f, self.view.bounds.size.height - BOXSIZE, BOXSIZE, BOXSIZE); } - (void)endBox { self.movingBox.frame = CGRectMake(CGRectGetMidX(self.view.bounds) - BOXSIZE * 3.f / 2.f, CGRectGetMidY(self.view.bounds) - BOXSIZE * 3.f / 2.f, BOXSIZE * 3.f, BOXSIZE * 3.f); }
Vibrancy and blur
In iOS8, UIBlurEffect and UIVibrancyEffect are introduced for developers have Dynamic Blur Effect more easily. In the talk, Apple Engineer still recommends using static blur effect code if dynamic blur effect views are not actually what you need, since dynamic blur effect takes a lot of computer power.
The UIBlurEffect gives blur effect to an associated UIView, while UIVibrancyEffect gives the clear part which is not blurred on the blurred view. So, this is a three layer structure. UIView at the bottom, then comes the UIBlurEffect, at last the UIVibrancyEffect comes. The UIVibrancyEffect consumes the computing power most. The UIBlurEffect gives three styles for the developer to use, UIBlurEffectStyleExtraLight, UIBlurEffectStyleLight, UIBlurEffectStyleDark.
The example could be found at Siri User Interface, where user could clearly see the app icons on the Home Screen of the iPhone.
Shape layers
In this section, the engineer talks about the CAShapeLayer. Several things should be mentioned here:
How to use CAShapeLayer back up the UIView as the base layer. In UIView subclass,
+ (Class)layerClass { return [CAShapeLayer Class]; } - (void)awakeFromNib { CAShapeLayer *layer = (CAShapeLayer *)self.layer; // init layer properties here. // Also, everytime to update layer property, convert it to CAShaperLayer and use a local variable for it. }
How to draw part of the path for CAShapeLayer, by setting strokeStart and strokeEnd.
Dyanmic Core Animation behaviors
This is probably the most challenging part for me, so many sample code on CABasicAnimation. I think have a good use of CAAction delegate and CALayer Delegate method could greatly help your custom UIView subclass have great animation effect when UIView’s properties are changed. Also, developer could define customized property, which could be very powerful. By using this technique, developer could not only customize animation behavior, but also disable system’s default animation behaviors.
For more information, here is a link to the Apple Developer Official Page.