How to use iOS to imitate Douyin video to load animation effects

Editor to share with you how to use iOS imitation Douyin video to load animation effects, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Realization principle

First I create a view

@ interface ViewController () @ property (nonatomic, strong) UIView * playLoadingView;@end@implementation ViewController- (void) viewDidLoad {[super viewDidLoad]; / / init player status bar self.playLoadingView = [[UIView alloc] init]; self.playLoadingView.backgroundColor = [UIColor whiteColor]; [self.playLoadingView setHidden:YES]; [self.view addSubview:self.playLoadingView]; / / make constraintes [self.playLoadingView mas_makeConstraints: ^ (MASConstraintMaker * make) {make.center.equalTo (self.view); make.width.mas_equalTo (1.0f) / / wide 1 dp make.height.mas_equalTo (0.5f); / / height 0.5 dp}]; [self startLoadingPlayAnimation:YES]; / / call animation code}

Here we can see that what we are actually creating is a view with a 1pt width of 0.5 pt.

The code followed by the animation implementation

-(void) startLoadingPlayAnimation: (BOOL) isStart {if (isStart) {self.playLoadingView.backgroundColor = [UIColor whiteColor]; self.playLoadingView.hidden = NO; [self.playLoadingView.layer removeAllAnimations]; CAAnimationGroup * animationGroup = [[CAAnimationGroup alloc] init]; animationGroup.duration = 0.5; animationGroup.beginTime = CACurrentMediaTime () + 0.5; animationGroup.repeatCount = MAXFLOAT; animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; CABasicAnimation * scaleAnimation = [CABasicAnimation animation]; scaleAnimation.keyPath = @ "transform.scale.x"; scaleAnimation.fromValue = @ (1.0f) ScaleAnimation.toValue = @ (1.0f * ScreenWidth); CABasicAnimation * alphaAnimation = [CABasicAnimation animation]; alphaAnimation.keyPath = @ "opacity"; alphaAnimation.fromValue = @ (1.0f); alphaAnimation.toValue = @ (0.5f); [animationGroup setAnimations:@ [scaleAnimation, alphaAnimation]]; [self.playLoadingView.layer addAnimation:animationGroup forKey:nil];} else {[self.playLoadingView.layer removeAllAnimations]; self.playLoadingView.hidden = YES;}}

These are the only lines of code that are done.

In fact, there are only four lines of code at the core.

CABasicAnimation * scaleAnimation = [CABasicAnimation animation]; scaleAnimation.keyPath = @ "transform.scale.x"; scaleAnimation.fromValue = @ (1.0f); scaleAnimation.toValue = @ (1.0f * ScreenWidth)

The key is scaleAnimation.keyPath = @ "transform.scale.x"; here we are going to zoom along x

Zoom the value from 1 to the screen width, of course, the value can be controlled by yourself.

If @ "transform.scale.y" is scaled along the Y axis

Of course, if it is written as @ "transform.scale", then we can try to zoom XMagi Y together.

The above is all the contents of this article entitled "how to use iOS to imitate Douyin Video to load Animation effects". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!