高仿抖音视频加载动画

动画效果:


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:线的透明度变化

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 CALayer IOS SDK详解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi阅读 5,216评论 3 23
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,267评论 4 61
  • 不管是工作,学习,还是其它,只要管住嘴,迈开实干的腿,都会取得一番成绩。把时间用在抱怨,空想上,只会消磨了的意志,...
    且惜且爱阅读 690评论 2 3
  • 升入大学以后,大家都非常高兴,觉得要开启自己下一步人生,宿舍里,大家互相帮助,谈天说地,一起学习,可是开始...
    狒狒1994阅读 375评论 2 1
  • D78 很多人都会觉得自己不够自律,容易放纵自己,很多时候已经意识到应该停止放纵,但还是输给了行动,最后后悔不已把...
    当额咧阅读 127评论 0 0