加载 Logo 动画 试玩
来源:互联网 发布:wps数据有效性设置取消 编辑:程序博客网 时间:2024/06/07 04:28
传送门:https://github.com/azheng51714/LogoLoadingView
无意间从 Dribbble 上看到一个logo 设计图,感觉非常有意思,所以决定拿来玩玩;
;
分析其构造,基本确定有2部分组成,分别是:外环圆以及内部的三个收尾相连贝塞尔曲线;
设计:以外切圆心为中心点,构造一个等边三角形,计算三个顶点,pointA,pointB 以及 pointC,然后以三个顶点绘制三条贝塞尔曲线;
@interface LoadingView(){ CGFloat _turnR;//旋转半径 CGPoint _pointA; CGPoint _pointB; CGPoint _pointC;}@property (nonatomic,strong) CAShapeLayer *bgLayer;@property (nonatomic,strong) CAShapeLayer *circleLayer;@property (nonatomic,strong) CAShapeLayer *leftLayer;@property (nonatomic,strong) CAShapeLayer *rightLayer;@property (nonatomic,strong) CAShapeLayer *bottomLayer;@property (nonatomic,strong) CABasicAnimation *animation;@property (nonatomic,strong) CABasicAnimation *turnAnimation;-(void)setUp{ _turnR = 30.0f; _pointA = CGPointMake(self.centerX-_turnR*cos(M_PI_2/3.0), self.centerY+_turnR*sin(M_PI_2/3.0));//A点 _pointB = CGPointMake(self.centerX, self.centerY-_turnR);//B点 _pointC = CGPointMake(self.centerX+_turnR*cos(M_PI_2/3.0), self.centerY+_turnR*sin(M_PI_2/3.0));//C点 [self.layer addSublayer:self.bgLayer]; [self.bgLayer addSublayer:self.circleLayer]; [self.bgLayer addSublayer:self.leftLayer]; [self.bgLayer addSublayer:self.rightLayer]; [self.bgLayer addSublayer:self.bottomLayer]; [self.bgLayer addAnimation:self.turnAnimation forKey:nil];}-(CAShapeLayer *)bgLayer{ if (!_bgLayer) { _bgLayer = [CAShapeLayer layer]; _bgLayer.frame = self.frame; _bgLayer.backgroundColor = [UIColor clearColor].CGColor; } return _bgLayer;}-(CAShapeLayer *)circleLayer{ if (!_circleLayer) { UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:self.center radius:80.0f startAngle:0 endAngle:M_PI*2 clockwise:YES]; [circlePath closePath]; _circleLayer = [CAShapeLayer layer]; _circleLayer.path = circlePath.CGPath; _circleLayer.backgroundColor = [UIColor clearColor].CGColor; _circleLayer.fillColor = [UIColor clearColor].CGColor; _circleLayer.strokeColor = [UIColor whiteColor].CGColor; _circleLayer.lineWidth = 5.0f; _circleLayer.lineCap = kCALineCapRound; _circleLayer.lineJoin = kCALineJoinRound; [_circleLayer addAnimation:self.animation forKey:nil]; } return _circleLayer;}-(CABasicAnimation *)animation{ if (!_animation) { _animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; _animation.fromValue = @0.0; _animation.toValue = @1.0; _animation.autoreverses = NO;//default _animation.duration = 1.5; } return _animation;}-(CABasicAnimation *)turnAnimation{//开始旋转 if (!_turnAnimation) { _turnAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; _turnAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ]; _turnAnimation.duration = 1.5; _turnAnimation.cumulative = YES; // _turnAnimation.delegate = self; _turnAnimation.repeatCount = MAXFLOAT; } return _turnAnimation;}-(CAShapeLayer *)leftLayer{ if (!_leftLayer) { CGPoint controlPoint = CGPointMake(self.centerX - _turnR/cos(M_PI_2/3.0), self.centerY-_turnR*sin(M_PI_2/3.0)) ; UIBezierPath *leftPath = [UIBezierPath bezierPath]; [leftPath moveToPoint:CGPointMake(_pointA.x-5.0, _pointA.y+25.0)]; [leftPath addQuadCurveToPoint:_pointB controlPoint:controlPoint]; _leftLayer = [CAShapeLayer layer]; _leftLayer.path = leftPath.CGPath; _leftLayer.backgroundColor = [UIColor clearColor].CGColor; _leftLayer.fillColor = [UIColor clearColor].CGColor; _leftLayer.strokeColor = [UIColor whiteColor].CGColor; _leftLayer.lineWidth = 20.0f; [_leftLayer addAnimation:self.animation forKey:nil]; } return _leftLayer;}-(CAShapeLayer *)rightLayer{ if (!_rightLayer) { CGPoint controlPoint = CGPointMake(self.centerX, self.centerY+_turnR) ; UIBezierPath *rightPath = [UIBezierPath bezierPath]; [rightPath moveToPoint:CGPointMake(_pointC.x+25.0, _pointC.y-5.0)]; [rightPath addQuadCurveToPoint:_pointA controlPoint:controlPoint]; _rightLayer = [CAShapeLayer layer]; _rightLayer.path = rightPath.CGPath; _rightLayer.backgroundColor = [UIColor clearColor].CGColor; _rightLayer.fillColor = [UIColor clearColor].CGColor; _rightLayer.strokeColor = [UIColor whiteColor].CGColor; _rightLayer.lineWidth = 20.0f; [_rightLayer addAnimation:self.animation forKey:nil]; } return _rightLayer;}-(CAShapeLayer *)bottomLayer{ if (!_bottomLayer) { CGPoint controlPoint = CGPointMake(self.centerX + _turnR/cos(M_PI_2/3.0), self.centerY-_turnR*sin(M_PI_2/3.0)) ; UIBezierPath *bottomPath = [UIBezierPath bezierPath]; [bottomPath moveToPoint:CGPointMake(_pointB.x-20.0, _pointB.y-20.0)]; [bottomPath addQuadCurveToPoint:_pointC controlPoint:controlPoint]; _bottomLayer = [CAShapeLayer layer]; _bottomLayer.path = bottomPath.CGPath; _bottomLayer.backgroundColor = [UIColor clearColor].CGColor; _bottomLayer.fillColor = [UIColor clearColor].CGColor; _bottomLayer.strokeColor = [UIColor whiteColor].CGColor; _bottomLayer.lineWidth = 20.0f; [_bottomLayer addAnimation:self.animation forKey:nil]; } return _bottomLayer;}
0 0
- 加载 Logo 动画 试玩
- Android 开机logo动画
- 开机logo.开机动画
- Android kernel LOGO 动画
- css动画LOGO
- Andoird自定义View贝塞尔曲线入门用法:仿天猫LOGO加载动画
- DirectShow 加载logo水印
- android开机动画与logo
- mtk编译 , 开机动画/logo
- android 修改开机logo、动画
- 修改开机logo和动画
- android 开机logo 开机动画
- android 开机动画logo介绍
- 安卓开机LOGO动画
- 自定义开关机动画,开机logo
- 玩转PS路径,轻松画logo!
- 第二十一篇玩转【斗鱼直播APP】系列之加载数据动画
- 加载动画
- menu 菜单层级关系MAP组装
- vimrc文件的配置
- LeetCode 12. Integer to Roman
- js闭包
- 机器人驱动介绍(2)
- 加载 Logo 动画 试玩
- mysql出现Connection.close() has already been called. Invalid operation in this state.
- 图像显示
- 关于伺服电机的控制方式
- 自动化运维的基石CMDB
- canvas开发专题-第二天
- Mysql ID生成器
- Oracle迭代查询无限下级
- 数据存储/加载指令