Quickly implement a favorite animation with QuartzCode

First, sort out the ideas:

In general, it can be divided into two parts, one is the animation part, which uses QuartzCode to achieve visual editing and creation; The other is the function and code API setting part, which needs to be added, modified and packaged into a simple control library on the basis of QuartzCode finally exported code.

The animation of stars is composed of three parts: solid stars appear from small to large, hollow stars appear from large to small and their transparency decreases and disappears. Finally, the stars flash round dots and short lines.

Solid stars appear from small to large

1. Drag an image onto the middle canvas and the software automatically creates a layer that can be resized and positioned using the Inspector
2. Rename layer automatically generated in Layers
3. Click the “+” button for Animations to add an animation group called Show
4. Select the current layer, click the “+” button of the corresponding layer under Timeline, and add a Bounds frame animation
5. Each line in the Timeline corresponds to the Timeline of the animation frame. You can double click or right click on the Timeline to add a Keyframe, which is fine by default. Select key points on both ends of the Bounds animation Timeline, and set the Size value in the right Keyframe inspector, starting with (0,0). The end size is the original size

Hollow stars go from large to small, their transparency decreases and disappear

Basically as in the previous step, you can hide the solid layer for easy observation.

1. Add hollow star image material
2. Named layer
3. Add Bounds and Opacity animations to the hollow layer, and modify the start and end values of the animation respectively
4. Drag the timeline to see the effect

All around flashing short lines, dots

The short lines and dots are arranged repeatedly around the star, so this can be implemented with CAReplicatorLayer, which corresponds to the “Replicator” Layer in the toolbar in QuartzCode. CAReplicatorLayer can repeatedly draw the internal sub-layer according to certain rules, here only need to change according to the rotation Angle.

1. Click “Replicator” and drag a layer on the center Replicator canvas. Then select the rounded rectangle in “Shape” and drag a small rounded rectangle on the corner of the star to make sure the star_layer is inside the Replicator layer
2. Set replicator properties to repeat the internal layer of the replicator. Here, set the “instance count” to 5 and the “Rotation” to 72 (360/5=72), and you can repeat the drawing according to the five angles of the star
3. The last step is to add animations, including Opacity from 0 to 1, Position from inside to outside, and Transform

The remaining dots, and the short line creation method is consistent, will not repeat the explanation ~

At this point, the animation for display is created.

And once you’ve done that, you can export your code.

Ordinal File – > Export Code… , you can open the preview screen of exported code:

The option on the right can be selected as required. The default option basically meets the requirements. You’d better select Export Image Assets to Export Image resources. Options that see documentation: www.quartzcodeapp.com/code-genera…

At this point, the most complex part of the animation is complete, without writing a line of code, all visual editing ~

The first is the design of the entire animation API. In order to make it easy to add animation to any UIView instance, it is designed as a UIView Category, as follows:

// UIView+TTGStarAnimation. h@interface UIView (TTGStarAnimation) // Initializes the animation - (void)ttg_setupStarAnimation; / / initialize the animation, at the same time can adjust an inset - (void) ttg_setupStarAnimationWithEdgeInset (UIEdgeInsets) an inset; // show star animation - (void)ttg_showStarAnimated:(BOOL)animated complete:(void (^)())complete; // animated - (void)ttg_hideStarAnimated:(BOOL)animated complete:(void (^)())complete; - (BOOL)ttg_getStarIsShow; @endCopy the code

QuartzCode export code, the internal animation Layer is not visible, in order to “manually” control the animation View of the actual display state, it is necessary to modify the export code, expose the internal animation Layer instance.

All layers are in the NSMutableDictionary * layers dictionary, obtained by key. Add three properties to ttgStarAnimationView.h:

//  TTGStarAnimationView.h
@interface TTGStarAnimationView : UIView
@property (nonatomic, strong, readonly) CALayer *fillLayer;
@property (nonatomic, strong, readonly) CALayer *emptyLayer;
@property (nonatomic, strong, readonly) CALayer *replicatedLayer;
// ...
@endCopy the code

Then implement the getter method:

//  TTGStarAnimationView.m
- (CALayer *)fillLayer {
    return _layers[@"star_animation_fill"];
}
- (CALayer *)emptyLayer {
    return _layers[@"star_animation_empty"];
}
- (CALayer *)replicatedLayer {
    return _layers[@"replicator"];
}Copy the code

Finally, it is to realize the control of animation. The key here is to control each Layer of animation. The initial and final state of each Layer should be set to ensure that the final display is consistent regardless of whether the animation is executed or not.

// TTGStarAnimationView.m - (void)ttg_showStarAnimated:(BOOL)animated complete:(void (^)())complete { // TTGStarAnimationView *starAnimationView = [self ttg_getStarAnimationView]; // Show if (! [self ttg_getStarIsShow]) {// Set the status value [self ttg_setStarIsShow:YES]; // first removeAllAnimations [starAnimationView removeAllAnimations]; / / set the final Block of the hidden Layer value under the void (^ completionBlock) () = ^ {starAnimationView. FillLayer. Hidden = NO. starAnimationView.emptyLayer.hidden = YES; starAnimationView.replicatedLayer.hidden = YES; // Execute the callback if (complete) {complete(); }}; If (animated) {/ / if you want to perform the animation, then set the animation Layer before the hidden value of starAnimationView. FillLayer. Hidden = NO; starAnimationView.emptyLayer.hidden = NO; starAnimationView.replicatedLayer.hidden = NO; / / execution animation [starAnimationView addShowAnimationCompletionBlock: ^ (BOOL finished) {completionBlock ();}]. } else {// Execute the final state completionBlock() without animation; }}}Copy the code

The hidden code is basically the same as the display, and the various states and hidden values can be reversed. See Github for all code.

There’s only so much code to write, isn’t it very simple!