Animation with UIBezierPath - ios

Question

I searched a lot for this topic, all answers said that i have to use CAShapeLayer or Layers and ... . the problem is i don't really know how to use them, and i know a solution to my problem; i'd just like to know if there's any way to do this without CAShapeLayer.
I'm trying to make a Star shaped rating view. there's a star, and a rectangle inside it from bottom to top indicating percentage of the rated star.
here is my .h file:
IB_DESIGNABLE
#interface FSStarRatingView : UIView
#property (assign, nonatomic) IBInspectable BOOL transparentInside;
#property (assign, nonatomic) IBInspectable CGFloat innerRadius; // between 0-1
#property (assign, nonatomic) IBInspectable CGFloat percentage; // between 0-1
#property (strong, nonatomic) IBInspectable UIColor *fillColor;
#property (strong, nonatomic) IBInspectable UIColor *unfilledColor; // works if transparentInside is YES
#property (strong, nonatomic) IBInspectable UIColor *strokeColor;
- (void)setPercentage:(CGFloat)percentage withAnimationDuration:(CGFloat)duration;
and here is my .m file
- (UIBezierPath *)starShapedBezierPath {
CGPoint points[10];
// points[0] = CGPointMake(self.center.x, 0);
CGFloat outterRadius = self.frame.size.width / 2;
CGFloat startDegree = 3.0 * M_PI_2;
CGPoint center = CGPointMake(outterRadius, outterRadius * 2.0/1.85);
for (int i = 0; i < 10; i+=2) {
points[i] = CGPointMake(center.x + outterRadius * cos(startDegree),
center.y + outterRadius * sin(startDegree));
startDegree += 0.4 * M_PI;
}
CGFloat innerRadius = self.innerRadius * outterRadius;
startDegree = M_PI_2;
for (int i = 5; i < 15; i+=2) {
points[i%10] = CGPointMake(center.x + innerRadius * cos(startDegree),
center.y + innerRadius * sin (startDegree));
startDegree += 0.4 * M_PI;
}
UIBezierPath *star = [UIBezierPath bezierPath];
[star moveToPoint:points[0]];
for (int i = 1; i < 10; i++)
[star addLineToPoint:points[i]];
[star closePath];
return star;
}
- (void)setPercentage:(CGFloat)percentage {
_percentage = percentage;
[self setNeedsDisplay];
}
- (void)setPercentage:(CGFloat)percentage withAnimationDuration:(CGFloat)duration{
[UIView
animateWithDuration:duration
animations:^{
self.percentage = percentage;
}];
}
- (void)drawRect:(CGRect)rect {
UIBezierPath *star = [self starShapedBezierPath];
star.lineWidth = 1.0;
[self.strokeColor setStroke];
[star stroke];
[star addClip];
CGFloat topBottomOffset = 0.15 * self.frame.size.width / 4.0;
CGFloat availableHeight = self.frame.size.height - 2.0 * topBottomOffset;
CGFloat usedHeight = availableHeight * self.percentage;
if (! self.transparentInside) {
UIBezierPath *unusedPercentageRect = [UIBezierPath bezierPathWithRect:CGRectMake(0, topBottomOffset, self.frame.size.width, availableHeight - usedHeight)];
[self.unfilledColor setFill];
[unusedPercentageRect fill];
}
UIBezierPath *usedPercentageRect = [UIBezierPath bezierPathWithRect:CGRectMake(0, topBottomOffset + availableHeight - usedHeight, self.frame.size.width, usedHeight)];
[self.fillColor setFill];
[usedPercentageRect fill];
[star addClip];
}
I know it is possible to do it with 2 subviews and animating their frame with animation, just wondering if there's a way to do it directly with Bezierpaths...
thanks