1. Bezier曲線
相關(guān)軟件:PaintCode:可以直接畫圖祠汇,軟件根據(jù)圖像生產(chǎn)Bezier曲線
相關(guān)概念:UIBezierPath和CGPath
方法1:- (void)moveToPoint:(CGPoint)point;? //設(shè)置Bezier曲線起始點(diǎn)猾担;對應(yīng)CGPath方法:CG_EXTERN void CGPathMoveToPoint(CGMutablePathRef __nullable path,const CGAffineTransform * __nullable m, CGFloat x, CGFloat y)
方法2:- (void)addLineToPoint:(CGPoint)point; // 線性Bezier曲線終點(diǎn)蜡镶;對應(yīng)CGPath方法:CG_EXTERN void CGPathAddLineToPoint(CGMutablePathRef __nullable path,const CGAffineTransform * __nullable m, CGFloat x, CGFloat y)
函數(shù):B(t) = (1-t)*P0 + t*P1;( 0 ≤ t ≤1 )
方法3:- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;? ? //二元Bezier曲線,與moveToPoint:(CGPoint)point;一起使用麦萤,point(P0點(diǎn))為起始點(diǎn)距贷,endPoint(P2點(diǎn))為中點(diǎn),controlPoint(P1點(diǎn))為控制點(diǎn)敞映;對應(yīng)CGPath方法:CG_EXTERN void CGPathAddQuadCurveToPoint(CGMutablePathRef __nullable path,const CGAffineTransform *__nullable m, CGFloat cpx, CGFloat cpy,?CGFloat x, CGFloat y)
函數(shù):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點(diǎn))為起始點(diǎn)崖堤,endPoint(P3點(diǎn))為終點(diǎn)侍咱,controlPoint1(P1點(diǎn))和controlPoint2(P2點(diǎn))為控制點(diǎn);對應(yīng)CGPath方法:CG_EXTERN void CGPathAddCurveToPoint(CGMutablePathRef __nullable path,const CGAffineTransform * __nullable m, CGFloat cp1x, CGFloat cp1y,CGFloat cp2x, CGFloat cp2y, CGFloat x, CGFloat y)
函數(shù):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密幔;//以某個點(diǎn)為圓心畫圓弧楔脯,center:圓心? radius:半徑? startAngle:起始角度? clockwise:結(jié)束角度 clockwise:是否順時針;
2. Bezier曲線+動畫
步驟:1. 創(chuàng)建Bezier曲線
2. 創(chuàng)建CAShapeLayer創(chuàng)建圖層胯甩,將圖層的path屬性設(shè)值為Bezier曲線的path昧廷,并設(shè)置該圖層的一些屬性
3. 創(chuàng)建動畫CABasicAnimation,并添加到CAShapeLayer創(chuàng)建的圖層中
其中:CABasicAnimation *checkAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];? keyPath:通過strokeStart和strokeEnd來確定起始點(diǎn)和結(jié)束點(diǎn)的動畫偎箫;CABasicAnimation中木柬,fromValue和toValue來分別確定起始點(diǎn)和結(jié)束點(diǎn)動畫的區(qū)域范圍
3. Layer的mask屬性應(yīng)用
頁面交互:- (void)animateTransition:(id)transitionContext;在這個代理方法中執(zhí)行:
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.設(shè)置toVC的mask為CAShapeLayer,并為這個CAShapeLayer添加屬性路徑以及動畫效果淹办;
5.在動畫結(jié)束時眉枕,移除mask值:- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag? ? {? ? [self.transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view.layer.mask = nil;? ? }