高仿抖音视频加载动画

动画效果:

loadingView.gif

由于GIF图压缩的问题看起来不好看,在真机和模拟器上看是没有问题的

• 这个动画实现起来还是很容易的,原理其实就是利用CGAffineTransformScale()函数来进行大小缩放,具体开始看代码吧,个人觉得抖音的产品确实厉害,一个小小的加载动画都这么用心,比如之前仿写的 高仿拍摄按钮动画地址

直接上代码:

    // 创建加载视图
    UIView *loadingView = [[UIView alloc]init];
    loadingView.frame = CGRectMake(0, 0, 1, 1.0/[UIScreen mainScreen].scale);
    loadingView.center = CGPointMake(CGRectGetWidth(self.view.bounds)/2.0, CGRectGetHeight(self.view.bounds) / 2.0);
    loadingView.backgroundColor = [UIColor redColor];
    [self.view addSubview:loadingView];
    
    static const CGFloat LINE_ANIMATION_DURATION = 0.7; // 动画时长
    static const CGFloat LINE_SCALE_HEIGHT = 1.5; // 高度缩放倍数
    static const CGFloat LINE_ALPHA = 0.2; // 透明度
    // 执行加载动画
    [UIView animateKeyframesWithDuration:LINE_ANIMATION_DURATION
                                   delay:0
                                 options:UIViewKeyframeAnimationOptionRepeat
                              animations:^{
                                  loadingView.transform = CGAffineTransformScale(loadingView.transform, CGRectGetWidth(self.view.bounds), LINE_SCALE_HEIGHT);
                                  loadingView.alpha = LINE_ALPHA;
                              } completion:nil];

如果效果不符合需求,可以分别更改如下几个参数,来达到要求:

• LINE_ANIMATION_DURATION:动画时长
• LINE_SCALE_HEIGHT:缩放时线的高度缩放倍数
• LINE_ALPHA:线的透明度变化

如果觉得有用,请多多点赞哦!