使用Paintcode2.0创建天猫Loading

前言

这段时间双十一双十二小伙伴们都在疯狂购物，天猫APP应该是用得不少，但是天猫加载数据的时候不知道大家有没有注意长什么样。下面我会简单的教大家怎么使用Paintcode2.0绘出图形以及实现动画

效果图

Paintcode绘制路径

首先打开Panitcode把画布width设为54 height设为27

宽高

然后使用钢笔工具画出路径，或者直接导入Ai文件

钢笔工具

完成之后直接拷贝下面的路径代码

路径代码

代码

• 背景路径
  刚才我们已经有了路径，这个路径我们要同时作为背景路径和小圆点运动的轨迹所以我写成了一个方法- (UIBezierPath *)path背景我使用CAShaplayer绘制

            CAShapeLayer *shapeLayer = [CAShapeLayer layer];
            shapeLayer.path          = [self path].CGPath;
            
            shapeLayer.fillColor   = [UIColor clearColor].CGColor;
            shapeLayer.strokeColor = [UIColor grayColor].CGColor;
            self.shapeLayer        =  shapeLayer;
            
            [self.layer addSublayer:shapeLayer];

然后添加了一个小圆点待会按照背景的轨迹运动

        UIView *ovalView         = [[UIView alloc]init];
        ovalView.backgroundColor = [UIColor blackColor];
        ovalView.ai_viewSize     = CGSizeMake(5, 5);
        ovalView.layer.cornerRadius = ovalView.ai_width * .5;
        ovalView.center          = CGPointMake(13.5, 2.5);
        self.ovalView            = ovalView;

• 动画
  动画选择CAKeyframeAnimation

- (void)animationWithLayer:(CALayer*)layer path:(UIBezierPath *)path {
    CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    [keyAnimation setValue:layer forKey:@"layer"];
    keyAnimation.path                 = path.CGPath;
    keyAnimation.repeatCount          = MAXFLOAT;
    keyAnimation.duration             = 5.;
    keyAnimation.removedOnCompletion  = NO;
    keyAnimation.fillMode             = kCAFillModeForwards;
    [layer addAnimation:keyAnimation forKey:nil];
}

还没有Paintcode2.0的小伙伴点击这里破解版

查看完整的源码第18个cell喜欢的点个star