IOS仿最新版爱奇异loading动画

最新推荐文章于 2020-08-14 18:03:25 发布
最新推荐文章于 2020-08-14 18:03:25 发布
阅读量805 收藏
点赞数
分类专栏： ＩＯＳ 文章标签： IOS仿爱奇异loading效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/d06110902002/article/details/78064947
版权

爱奇异更新版本之后，那个loading效果比较简洁，却又不失美观，遂仿制一把，以供广大程序员交流学习，效果图如下，


效果图中是垂直效果，但只要在路径那里改一下即可，还有一个缩放动画未添加，留给看官们自己处理大笑大笑


动画分析：

圆弧动画：UIBezierPath +CAShapeLayer 

 其中UIBezierPath画出左右2边的圆弧，然后用基本动画的storkEnd或storkStart来驱动即可，达到动画效果

代码如下：


 CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 0.7f;
    animation.fromValue = @(1);
    animation.toValue = @(0.0);
    //animation.delegate = self;
    //animation.repeatCount = MAXFLOAT;
    
    // 保持动画结束时的状态
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [animation setValue:@"arcRotateAnim" forKey:@"animationName"];
    
    [self.leftArcLayer addAnimation:animation forKey:@""];
    [self.rightArcLayer addAnimation:animation forKey:@""];
    
    
    //画布旋转动画
    CABasicAnimation *BasicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    
    BasicAnimation.toValue=@(M_PI*2);
    BasicAnimation.duration= 0.7;
    
    //BasicAnimation.delegate=self;
    [BasicAnimation setValue:@"BasicAnimationRotation" forKey:@"animationName"];
    [self.layer removeAllAnimations];
    [self.layer addAnimation:BasicAnimation forKey:@"BasicAnimationRotation"];



图层分析 ：CAShapeLayer在强大之处这里不细说，本案例中主要有4个图层 ，分别使用懒加载实现，代码如下： 



/**
 重写get属性

 @return CAShapeLayer
 */
-(CAShapeLayer*) leftArcLayer{


    if (!_leftArcLayer) {
        _leftArcLayer = [CAShapeLayer layer];
        CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
        
        UIBezierPath *path = [UIBezierPath bezierPath];
        
        [path addArcWithCenter:center radius:25 startAngle: -PI / 2 endAngle:PI / 2 clockwise:YES];
        
        
        _leftArcLayer.borderColor = [UIColor blackColor].CGColor;
        _leftArcLayer.lineWidth = 1.f;
        _leftArcLayer.path = path.CGPath;
        _leftArcLayer.fillColor = [UIColor clearColor].CGColor;
        _leftArcLayer.strokeColor = [UIColor greenColor].CGColor;
    }
    return _leftArcLayer;
    
}


-(CAShapeLayer*) rightArcLayer{
    
    
    if (!_rightArcLayer) {
        _rightArcLayer = [CAShapeLayer layer];
        CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
        
        UIBezierPath *path = [UIBezierPath bezierPath];
        
        [path addArcWithCenter:center radius:25 startAngle: PI / 2 endAngle:-PI / 2 clockwise:YES];
        
        
        _rightArcLayer.borderColor = [UIColor blackColor].CGColor;
        _rightArcLayer.lineWidth = 1.f;
        _rightArcLayer.path = path.CGPath;
        _rightArcLayer.fillColor = [UIColor clearColor].CGColor;
        _rightArcLayer.strokeColor = [UIColor greenColor].CGColor;
    }
    return _rightArcLayer;
    
}


-(CAShapeLayer*) leftPointLayer{

    if (!_leftPointLayer) {
        _leftPointLayer = [CAShapeLayer layer];
        CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);

        _leftPointLayer.bounds = CGRectMake(0, 0, 2, 2);
        _leftPointLayer.position = center;
        _leftPointLayer.backgroundColor = [UIColor greenColor].CGColor;
    }
    return _leftPointLayer;
}

-(CAShapeLayer*) rightPointLayer{
    
    if (!_rightPointLayer) {
        _rightPointLayer = [CAShapeLayer layer];
        CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
        _rightPointLayer.bounds = CGRectMake(0, 0, 2, 2);
        _rightPointLayer.position = center;
        _rightPointLayer.backgroundColor = [UIColor greenColor].CGColor;
    }
    return _rightPointLayer;
}



圆点动画：基本动画中的位移动画：代码如下：

-(void) middlePointMoveAnim{

    CABasicAnimation *moveAnim = [CABasicAnimation animationWithKeyPath:@"position"];
    CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
    moveAnim.fromValue = [NSValue valueWithCGPoint:center];
    moveAnim.toValue = [NSValue valueWithCGPoint:CGPointMake(center.x , center.y  - 25)];
    moveAnim.duration = 0.5f;
    moveAnim.delegate = self;
    
    moveAnim.fillMode = kCAFillModeForwards;
    moveAnim.removedOnCompletion = NO;
    
    moveAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    //[self.leftPointLayer removeAllAnimations];
    [moveAnim setValue:@"positionAnimation" forKey:@"moveAnim"];
    [self.leftPointLayer addAnimation:moveAnim forKey:@""];
    
    
    
    CABasicAnimation *moveRightAnim = [CABasicAnimation animationWithKeyPath:@"position"];
   
    moveRightAnim.fromValue = [NSValue valueWithCGPoint:center];
    moveRightAnim.toValue = [NSValue valueWithCGPoint:CGPointMake(center.x , center.y  + 25)];
    moveRightAnim.duration = 0.5f;
    //moveRightAnim.delegate = self;
    moveRightAnim.fillMode = kCAFillModeForwards;
    moveRightAnim.removedOnCompletion = NO;
    moveRightAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    //[self.rightPointLayer removeAllAnimations];
    [self.rightPointLayer addAnimation:moveRightAnim forKey:@""];

}





全部代码如下：

.h文件


@interface ShapeLayer_BezierParh : UIView<CAAnimationDelegate>

@property(nonatomic,strong) CAShapeLayer* leftArcLayer;
@property(nonatomic,strong) CAShapeLayer* rightArcLayer;

@property(nonatomic,strong) CAShapeLayer* leftPointLayer;
@property(nonatomic,strong) CAShapeLayer* rightPointLayer;

-(void) startAnim;

-(void) middlePointMoveAnim;

@end

.m文件： 

#import "ShapeLayer_BezierParh.h"

#define PI 3.1415926

@implementation ShapeLayer_BezierParh


-(instancetype) initWithFrame:(CGRect)frame{

    if (self = [super initWithFrame:frame]) {
        
        [self.layer addSublayer:self.leftArcLayer];
        [self.layer addSublayer:self.rightArcLayer];
        [self.layer addSublayer:self.leftPointLayer];
        [self.layer addSublayer:self.rightPointLayer];
    }
    
    return self;

}


/**
 重写get属性

 @return CAShapeLayer
 */
-(CAShapeLayer*) leftArcLayer{


    if (!_leftArcLayer) {
        _leftArcLayer = [CAShapeLayer layer];
        CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
        
        UIBezierPath *path = [UIBezierPath bezierPath];
        
        [path addArcWithCenter:center radius:25 startAngle: -PI / 2 endAngle:PI / 2 clockwise:YES];
        
        
        _leftArcLayer.borderColor = [UIColor blackColor].CGColor;
        _leftArcLayer.lineWidth = 1.f;
        _leftArcLayer.path = path.CGPath;
        _leftArcLayer.fillColor = [UIColor clearColor].CGColor;
        _leftArcLayer.strokeColor = [UIColor greenColor].CGColor;
    }
    return _leftArcLayer;
    
}


-(CAShapeLayer*) rightArcLayer{
    
    
    if (!_rightArcLayer) {
        _rightArcLayer = [CAShapeLayer layer];
        CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
        
        UIBezierPath *path = [UIBezierPath bezierPath];
        
        [path addArcWithCenter:center radius:25 startAngle: PI / 2 endAngle:-PI / 2 clockwise:YES];
        
        
        _rightArcLayer.borderColor = [UIColor blackColor].CGColor;
        _rightArcLayer.lineWidth = 1.f;
        _rightArcLayer.path = path.CGPath;
        _rightArcLayer.fillColor = [UIColor clearColor].CGColor;
        _rightArcLayer.strokeColor = [UIColor greenColor].CGColor;
    }
    return _rightArcLayer;
    
}


-(CAShapeLayer*) leftPointLayer{

    if (!_leftPointLayer) {
        _leftPointLayer = [CAShapeLayer layer];
        CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);

        _leftPointLayer.bounds = CGRectMake(0, 0, 2, 2);
        _leftPointLayer.position = center;
        _leftPointLayer.backgroundColor = [UIColor greenColor].CGColor;
    }
    return _leftPointLayer;
}

-(CAShapeLayer*) rightPointLayer{
    
    if (!_rightPointLayer) {
        _rightPointLayer = [CAShapeLayer layer];
        CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
        _rightPointLayer.bounds = CGRectMake(0, 0, 2, 2);
        _rightPointLayer.position = center;
        _rightPointLayer.backgroundColor = [UIColor greenColor].CGColor;
    }
    return _rightPointLayer;
}


-(void) startAnim{
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 0.7f;
    animation.fromValue = @(1);
    animation.toValue = @(0.0);
    //animation.delegate = self;
    //animation.repeatCount = MAXFLOAT;
    
    // 保持动画结束时的状态
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [animation setValue:@"arcRotateAnim" forKey:@"animationName"];
    
    [self.leftArcLayer addAnimation:animation forKey:@""];
    [self.rightArcLayer addAnimation:animation forKey:@""];
    
    
    //画布旋转动画
    CABasicAnimation *BasicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    
    BasicAnimation.toValue=@(M_PI*2);
    BasicAnimation.duration= 0.7;
    
    //BasicAnimation.delegate=self;
    [BasicAnimation setValue:@"BasicAnimationRotation" forKey:@"animationName"];
    [self.layer removeAllAnimations];
    [self.layer addAnimation:BasicAnimation forKey:@"BasicAnimationRotation"];

    
    
    dispatch_time_t delayTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.8 * NSEC_PER_SEC));
    dispatch_after(delayTime, dispatch_get_main_queue(), ^{
        [self middlePointMoveAnim];
        
    });

}

-(void) middlePointMoveAnim{

    CABasicAnimation *moveAnim = [CABasicAnimation animationWithKeyPath:@"position"];
    CGPoint center = CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2);
    moveAnim.fromValue = [NSValue valueWithCGPoint:center];
    moveAnim.toValue = [NSValue valueWithCGPoint:CGPointMake(center.x , center.y  - 25)];
    moveAnim.duration = 0.5f;
    moveAnim.delegate = self;
    
    moveAnim.fillMode = kCAFillModeForwards;
    moveAnim.removedOnCompletion = NO;
    
    moveAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    //[self.leftPointLayer removeAllAnimations];
    [moveAnim setValue:@"positionAnimation" forKey:@"moveAnim"];
    [self.leftPointLayer addAnimation:moveAnim forKey:@""];
    
    
    
    CABasicAnimation *moveRightAnim = [CABasicAnimation animationWithKeyPath:@"position"];
   
    moveRightAnim.fromValue = [NSValue valueWithCGPoint:center];
    moveRightAnim.toValue = [NSValue valueWithCGPoint:CGPointMake(center.x , center.y  + 25)];
    moveRightAnim.duration = 0.5f;
    //moveRightAnim.delegate = self;
    moveRightAnim.fillMode = kCAFillModeForwards;
    moveRightAnim.removedOnCompletion = NO;
    moveRightAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    //[self.rightPointLayer removeAllAnimations];
    [self.rightPointLayer addAnimation:moveRightAnim forKey:@""];

}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

    if([[anim valueForKey:@"animationName"] isEqualToString:@"arcRotateAnim"]){
    
        NSLog(@"144----------------arcRotateAnim:stop  %d",flag);
       
        if(flag){
            dispatch_time_t delayTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC));
            dispatch_after(delayTime, dispatch_get_main_queue(), ^{
               [self middlePointMoveAnim];
                
            });
        }
        
        
        
        
    }
    else if([[anim valueForKey:@"moveAnim"] isEqualToString:@"positionAnimation"]){
    
        NSLog(@"171----------------moveAnim:stop  :%d",flag);
        
        if(flag){
            dispatch_time_t delayTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC));
            dispatch_after(delayTime, dispatch_get_main_queue(), ^{
                [self startAnim];
            });

        }
        
    }

}


@end



在vc中的测试代码如下：

-(void) testShapeLayer{

    
   self.bezierParhLayer = [[ShapeLayer_BezierParh alloc] initWithFrame:CGRectMake((CGRectGetWidth(self.view.frame) / 2) - 25, 100, 100, 100)];

    //self.bezierParhLayer.backgroundColor = [UIColor wh];
    
    [self.view addSubview:self.bezierParhLayer];
    
   
}

将开启动画放在一个按钮下，点击按钮进行动画启动： 

[self.bezierParhLayer middlePointMoveAnim];



其中属性：

@property(nonatomic,strong) ShapeLayer_BezierParh* bezierParhLayer;


劉胡來
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS 实现简单的加载等待动画示例（思路与实现）
01-04
先看下最后基本要实现的效果 总结一下自己的实现思路与所用到的类 1.这个肯定是要自定义的View类，起名为XDColorCircle吧，最后用的时候达到这样的效果 //创建XDColorCircle的实例化对象 XDColorCircle *circle=[[XDColorCircle alloc]initWithFrame:CGRectMake(0 ,100,self.view.frame.size.width,200)]; //添加到视图上展示 [self.view addSubview:circle]; 2.然后就是在XDColorCircle里面代码思路 需要先有一个渐变
iOS帅气加载动画、通知视图、红包助手、引导页、导航栏、朋友圈、小游戏等效果源码
sunnyaigd830的博客
01-30 400
iOS精选源码 如丝般顺滑的微信朋友圈（点赞，评论，图文混排表情，… 动态菜单第三版本:动态项，自适应方向 仿appstore首页滚动效果 iOS 透明导航栏方案 TransparentNavigation 一键合成APP引导页,包含不同状态下的引导页操作方式,同时… 很帅的数据加载动画（可以用于数据列表加载的展现） 实现通知视图，零耦合JMNotifyView DDGBannerS...
IOS 之loading效果——UIActivityIndicatorView
黄飞的博客专栏
07-19 7049
UIActivityIndicatorView 非常简单 ，就是一个转圈圈的控件，看上去像是菊花。初始化并设置显示样式initWithActivityIndicatorStyle是UIActivityIndicatorView唯一的初始化方法 属性值是一个枚举变量，只有三个值： UIActivityIndicatorViewStyleWhite; 白色圆圈，尺寸是（22，22）。 UIActi
iOS开发中常用的动画（今日头条闪动加载）
ericshen880412的博客
08-14 783
今日头条的加载页面有这么一个动画 image 效果不错，可以借鉴到APP中。不过网上没有现成OC的demo，就自己实现了一个， ok,直接上代码。 UILabel *lb = [[UILabel alloc]initWithFrame:CGRectMake(0, 100, 320, 70)]; lb.text = @"闪动加载"; lb.textColor = [UIColor lightGrayColor]; lb.font = [UIFont boldSystemFontOfSize:40]; [sel
ios开发之简单实现loading动画效果
zlyapple的博客
09-11 1670
类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的，是不是就是一个gif图片呢！我的回答当然是否定了，当然不排除也有人用gif图片啊！下面我就来罗列三种实现loading动画效果的方法。 方法一：使用UIImageView自带的方法来实现，这也是我推荐的实现方法。 [objc] view plaincopy NSMuta
Android仿ios加载loading菊花图效果
08-26
主要介绍了Android仿ios加载loading菊花图效果，本文通过实例代码效果图展示给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
iOS仿抖音视频加载动画效果的实现方法
08-26
主要给大家介绍了关于iOS视频加载动画效果的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，下面随着小编来一起学习学习吧
仿 IOS 截屏动画炫酷流畅
08-16
仿 IOS 截屏动画，demo 可直接复制运行看效果，详细文章可参看 https://blog.csdn.net/u012932409/article/details/99683806
iOS高仿微信相册界面翻转过渡动画效果
09-01
评论界面点击左上角的返回按钮会反方向翻转回图片界面，真正的实现方法，与传统的导航栏过渡其实只有一行代码的区别,下面小编通过本文给大家介绍下ios高仿微信相册界面翻转过渡动画效果，一起看看吧
iOS仿小红书呼吸灯动画(核心动画和定时器)两种方式实现
01-20
最近公司需求做个类似小红书的标签呼吸灯动画,经过一段时间研究使用两种方式实现了该效果… 第一种方式使用定时器加 UIView动画,核心方法如下 -(void)begigFlashAnimation { // 缩放 + 透明度动画 self....
ios-常用的加载动画.zip
07-11
1、CAShapeLayer的应用 2、CAReplicatorLayer的使用以及布局 3、一些常用的CABasicAnimation的动画实现 git地址：https://github.com/lzbgithubcode/LZBLoadingAnimation.git 简书地址：http://www.jianshu.com/p/59908d591a7e
ios-一款好用的网络加载过渡动画.zip
07-11
一款好用的网络加载过度动画
IOS开发实例-2、进度条、等待动画开始停止
07-27
IOS开发实例-2、进度条、等待动画开始停止
ios-仿百度贴吧加载动画 XLTieBaLoading.zip
07-11
GitHub地址：https://github.com/mengxianliang/XLTieBaLoading
IOS 仿网易 banner scrollview 到头后 手势 事件提交到下级 拉开界面的效果
05-16
效果可看博客地址: http://blog.csdn.net/li6185377/article/details/8935501 以前 总是想 uiscrollview 滚动到 边缘了 把手势 传递下去 可是 IOS 不支持自己 产生touch 事件 后来 发现 IOS5 之后 scrollview 自带了 pan手势 （英语差 不会打gesture） 多试了几次 发现 直接移动 scrollview 低层的 view 就不会出现 视差了 但是 偶尔会抖动 用了个 遮盖的方法 具体 看代码吧！
iOS CALayer组合动画实现loadingView
王颜华的博客
06-27 1368
前言 hihi，勇敢的小伙伴儿们，大家好，loadingView在生活中已经是很常见了，各大平台都有不同的loadingView，最常见的浏览器就能看到的如下图这种Google Chrome的等待动画， 还有很多种其他的loading动画需要我们学习， 有时候我们使用做好的gif就可以实现，那么我们为什么要学习动画的绘制呢？ 因为CALayer动画可以实现比UIView动画更丰富、...
ios-仿QQ TabBar 拖动动效.zip
07-11
实现QQ的TabBar拖拽动效 Demo: https://github.com/SherlockQi/HKTabBar_QQ
数十种漂亮的 loading gif 图片
04-02
数十种漂亮的 loading gif 图片
IOS控件系列二---优雅的UITableView的MVC模式设计,支持自定义下拉刷新/上提加载更多视图(含swift)
热门推荐
刘胡来
09-11 2万+
demo效果如下： 本小框架设计原则依旧按照之前的惯例： 1.扩展性好，代码不冗余（整个刷新的头部与底部代码不超过300行）。 2.逻辑清晰。 3.回调接口清晰。 4.移植性好。 对于扩展性本框架扩展点如下： 1.框架中的BaseTableView是直接扩展UITableView的
android仿ios桌面应用删除动画
最新发布
05-18
Android仿iOS桌面应用删除动画可以使用属性动画实现。以下是一个简单的实现步骤： 1. 创建一个布局文件，用于显示要删除的应用图标。在这个布局中，你可以使用ImageView来显示应用图标，然后添加一个TextView来显示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值