animation a mask of a view - ios

Question

I want to use a mask to achieve the effect that the visible part of the View changes as the mask is moved.
and this is my demo code：
- (void)drawLayer{
CAShapeLayer *maskLayer = [CAShapeLayer layer];
self.maskLayer = maskLayer;
UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.underView.bounds];
CGRect frame = CGRectMake(-4, -5, (self.underView.frame.size.width+8) *0.5, self.underView.frame.size.height+10);
UIBezierPath *topPath = [UIBezierPath bezierPathWithRoundedRect:frame cornerRadius:frame.size.height *0.5];
NSLog(#"maskLayerframe:%#",NSStringFromCGRect(frame));
[path appendPath:topPath];
maskLayer.path = path.CGPath;
maskLayer.fillRule = kCAFillRuleEvenOdd;
self.underView.layer.mask = maskLayer;
}
///animation
/// - Parameter swipeToRight: Whether to slide to the right
- (void)startAnimation:(BOOL)swipeToRight{
CGFloat x = swipeToRight? self.underView.bounds.size.width *0.5-4:-4;
CGRect frame = CGRectMake(x, -5, (self.underView.frame.size.width+8) *0.5, self.underView.frame.size.height+10);
CAShapeLayer *maskLayer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.underView.bounds];
UIBezierPath *topPath = [UIBezierPath bezierPathWithRoundedRect:frame cornerRadius:frame.size.height *0.5];
[path appendPath:topPath];
maskLayer.path = path.CGPath;
maskLayer.fillRule = kCAFillRuleEvenOdd;
[CATransaction begin];
[CATransaction setDisableActions:NO];
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[CATransaction setAnimationDuration:0.5];
self.maskLayer.frame = frame;
[CATransaction commit];
}
But the final animation looks like this, I don't know what's wrong with it, can anyone tell me please?
before animation
animation to right
animation back to left

Answer 1

I found right way to implementation it~
- (void)startAnimation:(BOOL)swipeToRight{
CGFloat x = swipeToRight? self.underView.bounds.size.width *0.5-4:-4;
CGRect frame = CGRectMake(x, -4, (self.underView.frame.size.width+8) *0.5, self.underView.frame.size.height+8);
CAShapeLayer *maskLayer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.underView.bounds];
UIBezierPath *topPath = [UIBezierPath bezierPathWithRoundedRect:frame cornerRadius:frame.size.height *0.5];
[path appendPath:topPath];
maskLayer.path = path.CGPath;
maskLayer.fillRule = kCAFillRuleEvenOdd;
CABasicAnimation * basicAni = [CABasicAnimation animationWithKeyPath:#"path"];
basicAni.fromValue = (__bridge id _Nullable)(self.maskLayer.path);
basicAni.toValue = (__bridge id _Nullable)(maskLayer.path);
basicAni.duration = 0.4;
basicAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.underView.layer.mask addAnimation:basicAni forKey:#"path"];
[CATransaction begin];
[CATransaction setDisableActions:true];
self.maskLayer.path = maskLayer.path;
[CATransaction commit];
}