It is a never-ending thing to discover that unrestrained expansion continues. This is the sixth installment in CAAnimation’s original plan of five, and there will be at least three more.

When I first shared the iOS Apprentice Notes, I planned to start with the basic parts, go through them in general, and then look for topics or parts I was interested in to dive into. Now I suddenly find that I have lost my original intention. When I see that some shares have many likes and many views, I unconsciously want to cater to the children.

I want to grasp some rhythm, or the network part, the database part and a lot of things to wait until the monkey horse month ~

Today, we will finish our CABasic Animation by completing a login interface that drives special effects. In this login interface, the login box, password box, login button slide in sequence, click the login button will have a flashing effect. The finished renderings are as follows:

Paste_Image.png

Then THE shameless myself added some personal work and reviewed the previous three articles about CABasic Animation.

CABasic Animation achievement display.gif

The source code can be downloaded here with OC and Swift versions. Git.oschina.net/atypical/CA…

Cabasic-animation for iOS (OC and Swift)

1. A smiley face with a twist

A smiley face with a sudden change in style. GIF

1.1 Animation Analysis

According to the GIF above, there are actually three parts to the animation. 1. Eyes call left and right and move down during animation. Two, the square for the mouth is bigger. 3. After the animation is finished, a text prompt “Scared to death baby!” appears. .

1.2 Animations included

1, there is a translation animation, the basic part can refer to: iOS animation series four: basic animation translation 2, there are zooming animation, the basic part can refer to: iOS animation series five: basic animation zooming & rotation 3, damping animation, is the blink of the eye position change.

1.3 Code Implementation

The amount of code is actually very small, so simply posted up at a draught. And then we’ll talk a little bit more.

- (void)viewDidLoad {
    [super viewDidLoad];

    // Set the text of the header header
    self.titleLabel.text = "Scared to death!";

    // Hide the header title for the time being until the animation is finished
    [self.titleLabel setHidden:YES];
}

// Touch screen after the trigger method
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

    __weak typeof(self) weakSelf = self;

    // Add damping animation
    [UIView animateWithDuration:0.8 delay:0.2 usingSpringWithDamping:0.6 initialSpringVelocity:0.8 options:UIViewAnimationOptionTransitionNone animations:^{

        // Change the center of the yellow
        weakSelf.yellowView.center = CGPointMake(weakSelf.view.bounds.size.width - weakSelf.yellowView.center.x, weakSelf.yellowView.center.y + 30);

        // Change the center of the blue
        weakSelf.greenView.center = CGPointMake(weakSelf.view.bounds.size.width - weakSelf.greenView.center.x, weakSelf.greenView.center.y + 30);

        // Change the mouth height and center y position
        CGRect frame = CGRectMake(weakSelf.mouseView.frame.origin.x, weakSelf.mouseView.frame.origin.y, weakSelf.mouseView.frame.size.width, 180);

        weakSelf.mouseView.frame = frame;

        // This sentence must be added, otherwise can not see the animation
        [weakSelf.view layoutIfNeeded];
    } completion:^(BOOL finished) {

        // Add damping animation
        [UIView animateWithDuration:0.2 delay:0 usingSpringWithDamping:0.6 initialSpringVelocity:0.8 options:UIViewAnimationOptionTransitionNone animations:^{
            // Set hidden title text to display state
            [weakSelf.titleLabel setHidden:NO];
        } completion:nil];
    }];

}Copy the code

1.3.1 Damped animation

We haven’t shared this yet, so the first one is how it works. The damping animation is done using the following method in UIView:

+ (void)animateWithDuration:(NSTimeInterval)**duration** delay:(NSTimeInterval)**delay** usingSpringWithDamping:(CGFloat)**dampingRatio** initialSpringVelocity:(CGFloat)**velocity** options:(UIViewAnimationOptions)**options** animations:(void(^) (void))**animations** completion:(void (^__nullable)(BOOL finished))**completion**;Copy the code

Duration: animations, delay: dampingRatio: the smaller the damping coefficient, the more elastic it becomes, the faster the velocity, the options for animations, All of the code that you need to write when you’re animating is in here, and this is a Block. Completion: The block to be executed after the animation is complete.

1.3.2 weakSelf

When you add an animation using UIView, you can actually see that the system is providing blocks. All of the animations we write are written in blocks.

In general, we use weakSelf instead of self to modify the block in order to avoid circular reference. Before using:

__weak typeof(self) weakSelf = self;Copy the code

In fact, there is no circular reference in this animation. There is no problem with using WeakSelf and self. But we specially use it in order to introduce weakSelf. We’ll talk about weak references and strong references later. This is just a foreshadowing. (Scheming Bitch)

2. The heartbeat

2.1 Animation Analysis

1, here we use zooming, the basic part can refer to: iOS animation series five: basic animation zooming & Rotation. 2. Hide the photo of this part of the animation, we modify the imageView alpha value to achieve.

2.2 Implementation Procedure

1. Extraction of public methods. As mentioned in the previous articles, you are fat and lazy. So we’ve extracted all the methods that we’re going to need to use over and over again. This time extracts the public method to create the Layer and the method to create the Animation. 2. Set the location of the heartbeat layer. As a refresher on CALayer, I didn’t create an imageView to load the heartbeat image. 3. CALayer cannot directly place the image of ❤️, and can only load the image through the method of background drawing. 4, add animation for ❤️. 5, set the fading picture, set the position, the fading animation.

2.3 Code Implementation

There’s a little bit more code, so let’s just cover the key parts here. The rest of the code can be downloaded from the link below. The comments in the source code can be written in detail.

    // Draw the ❤️ layer with an image
    heartLayer.contents = (__bridge id _Nullable)([heartImage CGImage]);

    // Set the animation for photos to disappear
    [UIView animateWithDuration:2.0 animations:^{
        photoImageView.alpha = 0;
    }];

    // The rhythm of the animation. The rhythm of the heartbeat. In order to have a more rhythmic sense, the use of fast in fast out mode.
    scaleAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];Copy the code

3. IOS practice: Implement an effective login interface

Smelly shameless, unexpectedly in front of entrap with so many illicit goods! Share the login screen only here. Ha ha ~

FreedomMobile is Canada’s super budget is cheap, nothing else. Its predecessor was Wind, but later in order to seek greater development, it must be a bad brand, so it started from a new brand. We do a lot of restaurants in China, change the name, the same people, change the name.

3.1 Animation Analysis

1. The non-typical geek is too lazy to add a layer. We’re using all the animation methods that UIView provides. 2. PhoneNumber and Pin are panning animations. 3. The login button flashes by damping the animation.

3.2 Implementation Procedure

1. UI construction for the login page, lazy use of StoryBoard. 2. Click event of login button: modal or PUSH can be used to pop up the login interface. 3. In the viewWillAppear method of the login interface, first change the position of the two input boxes and buttons, otherwise we can make these controls move to the correct position during animation. 4. In the viewDidAppear method, animate. Put the two input fields in the correct position and make the login button appear. 5, to achieve the login button click event: here is simulated login failure, the button will shake.

3.3 Some minor points to note

1, in order to have a relatively comfortable visual effect, the navigation bar is hidden. 2. Changed the color of the battery bar to make it look more comfortable in full screen. By default, the battery bar color is black. 3. Modified the rounded corners of each frame. If you have a large number of rounded corners, do not directly through this method, it will consume some performance. Just a few embellishments, of course, how convenient how to come. 4, remember to close and turn on the interactive effect when the login fails to interact. Don’t let in the animation playback process can keep clicking on the login button, if the animation playback time is long, the animation time will be accumulated 😯. The final flashing button is there to keep swinging left, right, bye bye hip ~

 // Hide the navigation bar
 [self.navigationController setNavigationBarHidden:YES];

 // Set the battery bar status to white
 - (UIStatusBarStyle)preferredStatusBarStyle{
 return UIStatusBarStyleLightContent;
 }

 // Set the rounded corners for login and registration of two BTN
 self.signBtn.layer.cornerRadius = 5;
 self.loginBtn.layer.cornerRadius = 5;

 // Close the button interaction until the animation has finished playing
 [weakSelf.loginBtn setEnabled:NO];Copy the code

If you’re still interested, check out the other articles in this series.

One of iOS animation series: Learn the principles of CALayer and Perspective in action. Animate a clock with a clock pointer (part 1)

IOS Animation Series 2: Learn the principles of CALayer and Perspective through actual combat. Animate a clock with a time, minute and second hand. Includes OC and Swift source code (below)

Core Animation: Core Animation This section introduces the common properties and methods of Core Animation.

Core Animation: Core Animation This section introduces the common properties and methods of Core Animation.

CABasic Animation IOS Animation series 4: Basic Animation panning

CABasic Animation. IOS Animation series 5: Basic Animation zooming & Rotation

Chapter 6: iOS Practice: Use CABasic Animation to complete the login interface of drawing special effects

CAKeyFrame Animation and CAAnimation Group

CAShapeLayer, CAReplicatorLayer, CAEmitterLayer and CAGradientLayer

CAShapeLayer, CAReplicatorLayer, CAEmitterLayer and CAGradientLayer

Chapter 10: Actual Combat series. I haven’t figured out what examples to incorporate from the previous chapters.