iOS vote PK animation

CAAnimation achieve PK animation

Show

https://github.com/lucifer717/JeroldPKView

1. Requirements:

1. The sides of the color stripe gradient
2. animation direction as shown, extend from both sides to the middle of
the strip 3. The sides of the irregular pattern

2. implementation:

1. Gradient
CAGradientLayer gradient can be achieved

- (CAGradientLayer *)leftLayer {
    if (!_leftLayer) {
        CAGradientLayer *itemLayer = [CAGradientLayer layer];
        //蓝色
        itemLayer.colors = @[(__bridge id) [self fmut_colorWithRGB:0x79C0FF].CGColor,
                             (__bridge id) [self fmut_colorWithRGB:0x589AFF].CGColor];
        itemLayer.locations = @[@0, @1.0];
        itemLayer.startPoint = CGPointMake(0, 0);//渐变色以x轴为方向渐变
        itemLayer.endPoint = CGPointMake(1.0, 0);
        _leftLayer = itemLayer;
    }
    return _leftLayer;
}

- (CAGradientLayer *)rightLayer {
    if (!_rightLayer) {
        CAGradientLayer *itemLayer = [CAGradientLayer layer];
        //红色
        itemLayer.colors = @[(__bridge id) [self fmut_colorWithRGB:0xFF73C9].CGColor,
                             (__bridge id) [self fmut_colorWithRGB:0xFF86DF].CGColor];
        itemLayer.locations = @[@0, @1.0];
        itemLayer.startPoint = CGPointMake(0, 0);//渐变色以x轴为方向渐变
        itemLayer.endPoint = CGPointMake(1.0, 0);
        _rightLayer = itemLayer;
    }
    return _rightLayer;
}

- (UIColor *)fmut_colorWithRGB:(uint32_t)rgbValue{
    return [UIColor colorWithRed:((rgbValue & 0xFF0000) >> 16) / 255.0f
                           green:((rgbValue & 0xFF00) >> 8) / 255.0f
                            blue:(rgbValue & 0xFF) / 255.0f
                           alpha:1];
}

2. Animation
To achieve this extended from both sides to the middle of the animation, I use CAAnimationGroup, two CABasicAnimation as a set animation. CAGradientLayer position is a position of animation, there is a bounds animation, the synthesis of a set of two, we will be able to achieve this demand. The key point is, position change CABasicAnimation is based on layer anchor is the center point of the object.

3. irregular shapes
to draw around irregularly shaped layer, we split it, the outer contour of view of realization with rounded corners cut, then the rest is how to draw the middle part of the hypotenuse. The key dot chain line Bessel manner to achieve, and then the mask layer left as CAShapeLayer

CAShapeLayer *shapLayerRight = [CAShapeLayer layer];
shapLayerRight.path = [self getPathByPoints:pointArray1].CGPath;
self.rightLayer.mask = shapLayerRight;

//利用关键点画贝塞尔线
- (UIBezierPath*)getPathByPoints:(NSArray*)points {
    UIBezierPath *path = [UIBezierPath bezierPath];
    for (int i = 0; i < points.count; i++) {
        CGPoint retrievedPoint = CGPointFromString([points objectAtIndex:i]);
        if (i == 0) {
            [path moveToPoint:retrievedPoint];
        }else
            [path addLineToPoint:retrievedPoint];
    }
    [path closePath];
    return  path;
}

3. Usage:

self.pkView = [[PKView alloc]initWithTotalNum:100 votedNum:50 frame:CGRectMake(15, 200, SCREEN_WIDTH-30, 36)];
self.pkView.layer.cornerRadius = 18;
self.pkView.layer.masksToBounds = YES;
[self.view addSubview:self.pkView];

Reproduced in: https: //www.jianshu.com/p/467f9b320825