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; }
网友评论