Giter Club home page Giter Club logo

hbshapelayerdemo's Introduction

HBShapeLayerDemo

###1. 加载框 先上效果图:

效果图1

再上代码:

  - (void)initSubLayer:(CGRect)frame
{
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.frame = frame;
        //延迟的时间
    replicatorLayer.instanceDelay = 0.6 / 5;
        //重复个数
    replicatorLayer.instanceCount = 5;
        //间隔
    replicatorLayer.instanceTransform = CATransform3DMakeTranslation(10,0,0);
    CAShapeLayer *shape = [CAShapeLayer layer];
    shape.frame = CGRectMake(0, 0, 3,40);
    shape.lineWidth = 3;
    shape.lineCap = kCALineCapRound;
    shape.strokeColor = [UIColor redColor].CGColor;
    
    UIBezierPath* path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(1.5, 0)];
    [path addLineToPoint:CGPointMake(1.5, shape.frame.size.height)];
    shape.path = path.CGPath;
    
    [shape addAnimation:[self extendAnimation] forKey:@"scaleAnimation"];
    
    [replicatorLayer addSublayer:shape];
    
    [self.layer addSublayer:replicatorLayer];
}
- (CABasicAnimation*)extendAnimation
{
    CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform"];
    scale.fromValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 0.0)];
    scale.toValue = [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 1, 1.0/5, 0.0)];
    scale.autoreverses = YES;
    scale.repeatCount = HUGE;
    scale.duration = 0.6;
    return scale;
}

在分析思路:

  1. 创建一个CAShapeLayer的条条,方式不限
  2. 加入动画改变scale的高度
  3. CAReplicatorLayer复制为多个

###2. 跳过框

使用场景之一:

示例图

先上效果图

效果图2 再上代码

       CGFloat radius =ceil(MIN(frame.size.width, frame.size.height)) / 2;
        self.shapeLayer = [CAShapeLayer layer];
        self.shapeLayer.fillColor = [[UIColor blackColor] colorWithAlphaComponent:0.2].CGColor;
            //设置线条的宽度和颜色
        self.shapeLayer.lineWidth = 2.0f;
        self.shapeLayer.strokeColor = [UIColor redColor].CGColor;
            //设置stroke起始点
        self.shapeLayer.strokeStart = 0;
        self.shapeLayer.strokeEnd = 1;
            //创建出圆形贝塞尔曲线
        UIBezierPath* circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(radius, radius) radius:radius startAngle: -M_PI_2 endAngle:  -M_PI_2 + 0.00000001   clockwise:NO];
        
        self.shapeLayer.path = circlePath.CGPath;
        
        [self.layer addSublayer:self.shapeLayer];

- (void)startAnimation {
    
    CABasicAnimation* animation =[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = 2;
    animation.toValue = @0;
    [self.shapeLayer addAnimation:animation forKey:nil];
    
}

再分析思路:

  1. 创建一个CAShapeLayer的圆形
  2. 设置好起始的角度
  3. 添加动画改变strokeEnd 属性

hbshapelayerdemo's People

Contributors

hustbroventure avatar

Stargazers

 avatar Hemin Won avatar  avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.