iOS Bezier曲线

https://www.jianshu.com/p/2316f0d9db65

1. Bezier曲线

相关软件：PaintCode:可以直接画图，软件根据图像生产Bezier曲线

相关概念：UIBezierPath和CGPath

方法1：- (void)moveToPoint:(CGPoint)point;  //设置Bezier曲线起始点；对应CGPath方法：CG_EXTERN void CGPathMoveToPoint(CGMutablePathRef __nullable path,const CGAffineTransform * __nullable m, CGFloat x, CGFloat y)

方法2：- (void)addLineToPoint:(CGPoint)point; // 线性Bezier曲线终点；对应CGPath方法：CG_EXTERN void CGPathAddLineToPoint(CGMutablePathRef __nullable path,const CGAffineTransform * __nullable m, CGFloat x, CGFloat y)

函数：B(t) = (1-t)*P0 + t*P1;( 0 ≤ t ≤1 )

方法3：- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;    //二元Bezier曲线,与moveToPoint:(CGPoint)point;一起使用，point（P0点）为起始点，endPoint（P2点）为中点，controlPoint（P1点）为控制点；对应CGPath方法：CG_EXTERN void CGPathAddQuadCurveToPoint(CGMutablePathRef __nullable path,const CGAffineTransform *__nullable m, CGFloat cpx, CGFloat cpy, CGFloat x, CGFloat y)

函数：B(t) = (1-t)*(1-t)*P0 + 2t*(1-t)*P1 + t*t*P2;( 0 ≤ t ≤1 )

 

方法4：- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;  //三元Bezier曲线，与与moveToPoint:(CGPoint)point;一起使用，point（P0点）为起始点，endPoint（P3点）为终点，controlPoint1（P1点）和controlPoint2（P2点）为控制点；对应CGPath方法：CG_EXTERN void CGPathAddCurveToPoint(CGMutablePathRef __nullable path,const CGAffineTransform * __nullable m, CGFloat cp1x, CGFloat cp1y,CGFloat cp2x, CGFloat cp2y, CGFloat x, CGFloat y)

函数：B(t) = (1-t)*(1-t)*(1-t)*P0 + 3t*(1-t)(1-t)P1 + 3t*t*(1-t)P2 +t*t*t*P3;( 0 ≤ t ≤1 )

 

方法5：- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise；//以某个点为圆心画圆弧，center：圆心  radius：半径  startAngle：起始角度  clockwise：结束角度 clockwise：是否顺时针；

2. Bezier曲线+动画

步骤：1. 创建Bezier曲线

2. 创建CAShapeLayer创建图层，将图层的path属性设值为Bezier曲线的path，并设置该图层的一些属性

3. 创建动画CABasicAnimation，并添加到CAShapeLayer创建的图层中

其中：CABasicAnimation *checkAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];  keyPath:通过strokeStart和strokeEnd来确定起始点和结束点的动画；CABasicAnimation中，fromValue和toValue来分别确定起始点和结束点动画的区域范围

3. Layer的mask属性应用

页面交互：- (void)animateTransition:(id)transitionContext;在这个代理方法中执行：

1.获取fromVC:ViewController * fromVC = (ViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKe

2.获取toVC：SecondViewController *toVC = (SecondViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];

3.添加到containerView：UIView *contView = [transitionContext containerView];

[contView addSubview:toVC.view];

4.设置toVC的mask为CAShapeLayer，并为这个CAShapeLayer添加属性路径以及动画效果；

5.在动画结束时，移除mask值：- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag    {    [self.transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view.layer.mask = nil;    }

 

 

2人点赞

 

日记本