IOS animation series seven: implementation of similar Twitter boot animation

Come on, today we’ll see how CAKeyFrame Animation and CAAnimation Group play by implementing a Twitter like startup animation.

So today we focus on the seventh chapter, CAKeyFrame, Animation and CAAnimation Group. The final boot animation is just for practice to see how CAKeyFrame Animation and CAAnimation Group are used.

Some readers privately say the update is too slow. In the code cloud on the download statistics, found that, in fact, the download of children’s shoes is not particularly large. If you just take a look at the ideas, or review these basics, it’s really fast. But if you’re not particularly familiar with the content, you might as well knock aside the code and see what you can hit.

I write an essay for about 4~6 hours, roughly three: think of the right example, knock the code, write the notes, and write the article. Usually look at their current situation, the decision is to write the swift version or OC version, and then do not move the brain translated into another version, adjust BUG. This is also in order to train themselves, some time ago I found myself sometimes unconsciously mixed two languages, this habit is particularly bad, so I want to correct myself in this way. It’s easier to update your writing at the end, because you don’t have to use your head. Ha ha ~!

Come on ~ this picture is purely for the cover of Jane book. I do not know why, before the first book Jane can automatically frame GIF as a cover, now don’t work.

IOS animation series seven: implementation of similar Twitter boot animation,
, CAKeyFrame, Animation, and CAAnimation Group.png

Here are some of the results that have been written:

IOS animation series seven: implementation of similar Twitter boot animation
ani.gif

The source code can be downloaded here, there are two versions of OC and Swift. Https://git.oschina.net/atypical/CAKeyFrame-_Group_Animation.git

IOS animated series CAKeyFrame Animation and CAAnimation Group (OC and Swift two edition)

1. CAKeyframeAnimation

CAKeyframeAnimation is a subclass of CApropertyAnimation, with the CABasicAnimation difference is: CABasicAnimation only from a numerical (fromValue) to another number (toValue), and CAKeyframeAnimation will use a NSArray to save these values.

Create steps:

  1. Creating keyframe animation objects
  2. set a property
  3. Add to the layer that you want to work on
  4. If you use the rect ellipse, the animation will break down and pause. The reason is that the rectangle’s circumference is longer than the ellipse, and after the animation path has been executed by ellipse, you need to wait for the maximum perimeter to finish.
    these are caused by computational patterns.

1.1 create a small jitter

We use a simple demo to feel CAKeyframeAnimation, to do a wobble box.

IOS animation series seven: implementation of similar Twitter boot animation
squares.Gif jitter
CAKeyframeAnimation *animation [CAKeyframeAnimation animationWithKeyPath:@ = "transform.rotation.z"]; / / set up a series of key frame animation @[@ (-M_PI_4 / animation.values = 5), @ (M_PI_4 / 5), @ (-M_PI_4 / 5)]; animation.repeatCount = CGFLOAT_MAX; [self.view.layer addAnimation:animation forKey:@ "rotation"];

1.2 create a small aircraft moving along an elliptical path

We create a UIBezierPath that allows a small aircraft to move along this path.

Create animated CAKeyframeAnimation *keyFrameAnimation / [CAKeyframeAnimation animationWithKeyPath:@ = "position"]; / / set properties: create a beziper path, and the path trajectory as UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake (100, 100, 200, 500)]; keyFrameAnimation.path = bezierPath.CGPath; / / set animation time keyFrameAnimation.duration = 2; / / set up the animation loop number keyFrameAnimation.repeatCount = CGFLOAT_MAX; / / set animation calculation model keyFrameAnimation.calculationMode = kCAAnimationPaced; / / the animation will be added to the layer [self.planeView.layer addAnimation:keyFrameAnimation forKey:nil];

1.3 animation overlay

We have just added an airplane moving along the path, and we can also add the animated animation to the plane. The first few mentioned behind the forKey, may also have children’s shoes, do not know what to do. See the wood now? A layer inside several animation, how to find the corresponding animation na? Now you can find it through this key.

A small plane and add jitter / animation and ellipse rotating animation [self.planeImageView.layer addAnimation:[self shakeAni] forKey:nil] [self.planeImageView.layer addAnimation:[self ovalAni] forKey:nil];

2. CAAnimationGroup

A single animation can not meet the needs in practice, and animation groups are needed.

  • Is a subclass of CAAnimation
  • You can save a set of animated objects and add the CAAnimationGroup object to the layer, and all the animation objects in the group can run concurrently

We try to make a package that runs, spins, scales, and moves together in a certain arc path. Effect is as follows:

IOS animation series seven: implementation of similar Twitter boot animation
arcAni.gif
- (CAAnimationGroup * groupAni{) / / instantiate a group CAAnimationGroup [[CAAnimationGroup alloc] animation object *groupAni = init]; / / create a rotating animation CABasicAnimation *basicRotation = [CABasicAnimation animationWithKeyPath:@ basicRotation.toValue = "transform.rotation.z"]; @ (M_PI * 2); / / create a zoom animation CABasicAnimation *basicScale = [CABasicAnimation animationWithKeyPath:@ basicScale.toValue = "transform.scale"]; @ (0.2); / / create a path according to the mobile animation CAKeyframeAnimation *keyFrameAni [CAKeyframeAnimation animationWithKeyPath:@ = "position"]; UIBezierPath *arcPath = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:150 startA Ngle:0 endAngle:M_PI * 2 clockwise:YES]; keyFrameAni.path = arcPath.CGPath; keyFrameAni.calculationMode = kCAAnimationPaced; keyFrameAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; / / rotation, zoom, mobile animation animation added to the group in groupAni.animations = @[basicRotation, basicScale, keyFrameAni]; group animation repeats groupAni.repeatCount / / = CGFLOAT_MAX; / / group animation length groupAni.duration = 2; return groupAni;}

3., similar to Twitter startup animation

3.1, realize the train of thought

1, set up an object on the View to block the background map;
2, the mask into a five pointed star;
3, so that the mask gradually become larger, the middle of the region is visible more and more.

Yes! That’s the way of thinking. How do you cover the background picture?

3.2 CALayer mask properties

CALayer itself has a property called mask. Let’s look at the official explanation:

@property (nullable, strong) CALayer *mask When true an implicit mask; matching the layer bounds is applied to the layer (including the effects of the `cornerRadius'property If both `mask'). And `masksToBounds'are non-nil the two masks are multiplied to get the actual mask values. Defaults to NO. Animatable.

It is similar to a child layer, relative to the parent layer (that is, the layer with the property) layout, but it is not a normal child layer. Unlike other child layers that draw images from the parent layer, the mask layer defines the visible areas of the parent layer.

The Color property of the mask layer is irrelevant, and what really matters is the outline of the layer. That is to say, the solid part of the mask layer will be retained, and the rest will be discarded. If the mask layer is smaller than the parent layer, only the content in the mask layer is what it cares about, and everything else will be hidden.

IOS animation series seven: implementation of similar Twitter boot animation
Paste_Image.png

3.3, similar to Twitter startup animation

Well, all the preparations are finished, and we start writing the animation. This animation is actually a simple CAKeyframeAnimation. Sets the size of three keyframes, animations, and the movement of the three key frames.

And then, OK. Then, OK. Then, all right. Then, all right

What’s that?!!! That’s it?!! Yeah, that’s it.

- (CAKeyframeAnimation *) maskAni{/ zoom view, keypath using bounds CAKeyframeAnimation *maskAni [CAKeyframeAnimation animationWithKeyPath:@ = "bounds"]; / / animation time maskAni.duration = 30.75; / / delay 0.5 seconds to play maskAni.beginTime = CACurrentMediaTime (0.5 +); / / set the key frame animation numerical CGRect startRect = self.maskLayer.frame; CGRect = CGRectMake (0, tempRect 0, 100, 100); CGRect finalRect = CGRectMake (0, 0, 2000, 2000); maskAni.values = @[[NSValue valueWithCGRect:startRect], [NSValue valueWithCGRect:tempRect], [NSValue valueWithCGRect:finalRect]]; / / set the key frame animation motion rhythm maskAni.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMedia TimingFunctionEaseInEaseOut], [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut], [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]]; / / animation after whether to remove the animation maskAni.removedOnCompletion = NO; / / fill mode: kCAFillModeForwards: animation animation when after the end, layer will keep the animation final state maskAni.fillMode = kCAFillModeForwards; return maskAni;}

Leave a small question:

I used mask for different View in OC and Swift. One is to set the UIImageView for the background picture of the mask, and the other to set the View directly to the Controller of the mask. Set these two, god horse difference?

Well, the next part actually has a big head, that’s CAShapeLayer. Because most of the animation encountered in the work is done by UIView animation block, and the rest are basically need to use CAShapeLayer. Let’s have fun next time ~
, if you’re interested, you can read some of the other articles in this series.

Gorgeous and dividing line, iOS animation series,
link: one of the first iOS animated series: learning CALayer and perspective principle through the actual combat. A belt when the pointer of the clock animation (on)
second: iOS animation series two: learning CALayer and perspective principle through the actual combat. A belt when the pointer clock animation. Contains OC and Swift two source code (below)
third: iOS animation series three: Core Animation. The common attributes and methods of Core Animation are introduced.
fourth: CABasic Animation. IOS animation series four: translation of basic animation chapter
fifth: CABasic Animation. IOS animation series five: zoom based animation &amp
sixth; rotation: iOS animation series six: using CABasic Animation complete with animation login interface
seventh: iOS seven: the animated series to achieve similar Twitter
boot animation eighth: iOS animation series eight: CAShapeLayer painting figure ninth: dynamic flow
iOS animation series nine: praise animation and broadcast UPS indicator
tenth: Combat series: roller coaster scene rendering