Today let’s see how CAKeyFrame Animation and CAAnimation Group play by implementing a Twitter-like startup Animation.
So today we focus on Chapter 7, CAKeyFrame Animation and CAAnimation Group. The last start Animation was just a hands-on look at how CAKeyFrame Animation and CAAnimation Group work.
Some readers whispered that the update was too slow. In the code cloud looked at the download statistics, found that in fact, the download of children’s shoes is not particularly much. If you just look at the ideas, or go over the basics, it’s really quick. But if you’re not particularly familiar with any of this, it’s advisable to knock around the code and see what bugs you get.
It takes me about 4 to 6 hours to write a share post, which is basically three parts: come up with the right example, code and comment, and write the post. Usually they will look at their current situation, decide whether to write swift version or OC version first, and then mindless translation to another version to adjust the bugs. This is also to train myself. Some time ago, I found myself sometimes unconsciously mixing two languages together. This habit is particularly bad, so I want to correct myself in this way. At the end of the update, it was easier to write the article because you didn’t have to think about it. Ha ha ~
The picture below is purely for Jane books as covers. Also do not know why, before Jane book can automatically GIF the first frame as a cover, now not good.
Here is the result:
The source code can be downloaded here with OC and Swift versions. Git.oschina.net/atypical/CA…
CAKeyFrame Animation and CAAnimation Group (OC and Swift)
1. CAKeyframeAnimation
CAKeyframeAnimation is a subclass of CApropertyAnimation. It differs from CABasicAnimation in the following ways: CABasicAnimation can only change from one value (fromValue) to another (toValue). CAKeyframeAnimation uses an NSArray to hold these values.
Creation steps:
- Create a keyframe animation object
- Set properties
- Add to layer to be applied
- If the rect ellipse is used, the animation will be incoherent and pause. The reason for this is that the perimeter of the rectangle is longer than the perimeter of the ellipse. After the animation path is executed as the ellipse, it needs to wait for the maximum perimeter to run out. This is all because of computational patterns.
1.1 Create a jiggling box
Let’s use a simple demo to get a feel for the CAKeyframeAnimation, to make a small box that will shake.
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"]; / / set a series of key frame animation animation. Values = @ [@ (- M_PI_4/5) @ (M_PI_4/5), @ (- M_PI_4/5)]; animation.repeatCount = CGFLOAT_MAX; [self.view.layer addAnimation:animationforKey:@"rotation"];Copy the code1.2 Create a small plane moving along an elliptical path
Let’s create a UIBezierPath, and let the little plane go along that path.
*keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; // Set properties: Create a Beziper path, And the path as a trajectory UIBezierPath * bezierPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake (100, 100, 200, 500)]. keyFrameAnimation.path = bezierPath.CGPath; / / set the animation time keyFrameAnimation. Duration = 2; / / set the number of animation looping keyFrameAnimation repeatCount = CGFLOAT_MAX; / / set the animation calculation mode keyFrameAnimation. CalculationMode = kCAAnimationPaced; / / add animation to the layer on the [self. PlaneView. Layer addAnimation: keyFrameAnimationforKey:nil];Copy the code1.3 Animation Overlay
We just added a plane moving along the path, and we can also add the shaking animation to the plane. The forKey mentioned in the last few articles may not know what to do. See that now? A layer inside several animation, how to find the corresponding animation? Now you can find it by using this key.
/ / as the small plane at the same time add jitter of animation and elliptical path rotating animation [self. PlaneImageView. Layer addAnimation: [self shakeAni]forKey:nil];
[self.planeImageView.layer addAnimation:[self ovalAni] forKey:nil];Copy the code2. CAAnimationGroup
A single animation is often not enough in practice, so animation groups are needed.
- Is a subclass of CAAnimation
- You can save a set of animation objects, and once you add CAAnimationGroup to the layer, all of the animation objects in the group can be run concurrently.
We try to make an animation in which the package lines are rotated, scaled and grouped together in a certain radian path. The effect is as follows:
- (CAAnimationGroup *)groupAni{// Instantiate a group animation object CAAnimationGroup *groupAni = [[CAAnimationGroup alloc] init]; BasicRotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; basicRotation.toValue = @(M_PI * 2); CABasicAnimation *basicScale = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; BasicScale. ToValue = @ (0.2); CAKeyframeAnimation *keyFrameAni = [CAKeyframeAnimation animationWithKeyPath:@"position"]; UIBezierPath *arcPath = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:150 startAngle:0 endAngle:M_PI * 2 clockwise:YES]; keyFrameAni.path = arcPath.CGPath; keyFrameAni.calculationMode = kCAAnimationPaced; keyFrameAni.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut]; / / add rotation, scaling, mobile animation to the group animation groupAni. Animations = @ [basicRotation, basicScale keyFrameAni]; Groupani. repeatCount = CGFLOAT_MAX; Groupani. duration = 2;return groupAni;
}Copy the code3. Implement twitter-like startup animations
3.1 Implementation Roadmap
1. Set something on the View that blocks the background image. 2. turn the mask into a five-pointed star. 3. Make the mask gradually larger and the visible area in the middle larger and larger.
Yes! That’s the idea. So how do you cover up the background image?
3.2 Mask attribute of CALayer
CALayer itself has an attribute called mask. Here’s 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.Copy the codeIt is similar to a child layer, laid out relative to the parent layer (the layer that has the property), but it is not a normal child layer. The mask layer defines part of the visible area of the parent layer, unlike other child layers that can draw images inside the parent layer.
The Color attribute of the mask layer is irrelevant. What really matters is the contour of the layer. This means that 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 what is inside the mask layer is what it cares about, and everything else is hidden.
3.3 Implement twitter-like startup animation
So with all the preparation done, we’re going to start writing this animation. This animation is actually a simple CAKeyframeAnimation. Set the size of the animation of three keyframes, as well as the movement rhythm of these three keyframes.
Then, it’s all right, then, it’s all right, then, it’s all right, then, it’s all right
Which was? !!!!!!!!! In this way? !!!!! Yeah, that’s it.
- (CAKeyframeAnimation *)maskAni{// Zoom in, Keypath Uses bounds CAKeyframeAnimation *maskAni = [CAKeyframeAnimation animationWithKeyPath:@"bounds"]; Duration = 30.75; // Animation time maskani.duration = 30.75; BeginTime = CACurrentMediaTime() + 0.5; // Set the keyframe animation value CGRect startRect = self.masklayer.frame; CGRect tempRect = CGRectMake(0, 0, 100, 100); CGRect finalRect = CGRectMake(0, 0, 2000, 2000); maskAni.values = @[[NSValue valueWithCGRect:startRect],[NSValue valueWithCGRect:tempRect],[NSValue valueWithCGRect:finalRect]]; // Set the motion rhythm of the keyframe animation maskan. timingFunctions = @[[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]]; / / flash is removed after animation maskAni removedOnCompletion = NO; // animation fillMode: kcafillmodeforward: after the animation is finished, the layer will keep the final state of animation maskani. fillMode = kcafillmodeforward;return maskAni;
}Copy the codeOne quick question:
I used masks for different views in OC and Swift. One is to mask the UIImageView of the background image, and the other is to mask the View of the Controller directly. What’s the difference between setting these two?
Ok, there’s actually a big part of the next chapter, which is CAShapeLayer. Because most of the animation that I see in my work is done with UIView’s animation block, and everything else is basically done with CAShapeLayer. Let’s have some fun next time. If you’re still interested, check out the other articles in this series.
— — — — — — — — — — — — — — — — — — — — — — — luxuriant line, iOS animation series complete link — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — the first paper: iOS one of animation series: Learn the principles of CALayer and perspective in action. 2: iOS Animation series 2: Learn the principles of CALayer and Perspective through combat. Animate a clock with a time, minute and second hand. Includes OC and Swift two kinds of source code (next) chapter 3: iOS Animation series three: Core Animation. This section introduces the common properties and methods of Core Animation. CABasic Animation CABasic Animation iOS Animation series 4: Basic Animation translation IOS Animation Series 6: Using CABasic Animation to complete the login interface with drawing effects. IOS Animation Series 7: Implementing twitter-like startup Animation Using CAShapeLayer to draw dynamic flow diagrams iOS Animation Series 9: Achieve the like of the animation and play the ups and downs indicator 10: The Actual Series: Draw roller coaster scenes