The preface

I believe you will be installed in the mobile phone to see a small video software, after all, now small video so hot. But as a developer, in addition to caring about video news and other information, of course, they will also pay attention to how people implement it. FOFMoviePlayer (FOFMoviePlayer, FOFMoviePlayer, FOFMoviePlayer) This implementation is the full screen video playback effect.

The effect

Implementation approach

Enter the animation

(In fact, animation is not a lot of time can think of all of a sudden, just point by point on the basis of cumulative realization, so we in the process of realizing animation at the beginning do not eat fat, think of a perfect realization. So this is an animation that the author is doing over and over and over and over and over and over and over and over and over and over again

The first step is basically implemented

In the beginning, the idea was simple: rotate + scale. Indeed, this is fundamental. But there are three problems:

  • The rotation position is not correct, so the default is to rotate at the center of the attempt, which we expect to rotate at the top right corner
  • Wrong scaling, we expect the long model to scale exactly to the screen size
  • We’re not in the right position after the rotation, so we expect to try to pan to the edge of the screen after the rotation

The second detail optimization

For the above three problems, our solutions are as follows:

  • Rotational position
snapshot.layer.anchorPoint = CGPointMake(0, 0);
Copy the code

The anchorPoint of the layer, the anchorPoint, is the center of the attempt, and any layer animation we do is centered around it.

  • Size Scales to the screen size
CABasicAnimation *animal = [CABasicAnimation animationWithKeyPath:@"transform.scale.x"];
animal.fromValue = @(1);
animal.toValue = @(screenHeight/width);
CABasicAnimation *animal3 = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];
animal3.fromValue = @(1);
animal3.toValue = @(screenwidth/height);
Copy the code

Here we control the scaling of x and y coordinates in detail. Calculated by the width of the attempted and the width of the screen

  • Wrong position of rotation
CABasicAnimation *animal4 = [CABasicAnimation animationWithKeyPath:@"position"];
animal4.fromValue = @(snapshot.frame.origin);
animal4.toValue = @(CGPointMake(screenwidth, 0));
Copy the code

We’re going to animate position to move it to the edge of the screen, but notice that the x value of toValue is screenWidth

Through the above two steps to achieve the animation entry. Next we implement the returned animation

Return to the animation

Our return animation is also based on the above 2 steps. If you understand how to get into animation, you can write most of it back into animation. One thing to note, though, is that it’s forced to rotate 90 degrees in SecondViewController

self.view.transform = CGAffineTransformRotate(CGAffineTransformIdentity,M_PI_2);
Copy the code

So when we took a screenshot, we took the image before the rotation. Therefore, before we do animation, we also need to rotate the screenshot, and then on this basis for the following animation

UIView *iv = fromView.subviews[0];
iv = [iv snapshotViewAfterScreenUpdates:NO];
CGAffineTransform transform = CGAffineTransformRotate(CGAffineTransformIdentity, M_PI_2);
iv.transform = transform;
iv.frame = CGRectMake(0, 0, screenwidth, screenHeight);
Copy the code

Here we’re going to go back and animate it based on the rotation. UIView’s CGAffineTransformRotate is on top of the transform

[UIView animateWithDuration:0.3 animations:^{CGAffineTransform transform2 = CGAffineTransformRotate(transform, -M_PI_2); iv.transform = transform2; }];Copy the code

The complete code

You can download the complete code by making detailed research, the above parts are part of the key core FullScreenTransitionAnimal

My blog

FlyOceanFish’s technology blog