[控件] 将字符串转换成贝塞尔曲线并执行动画

将字符串转换成贝塞尔曲线并执行动画

部分开源代码支持:

https://github.com/aderussell/string-to-CGPathRef

效果:

源码:

//

//  ShapeWordView.h

//  PathWord

//

//  Created by XianMingYou on 15/3/6.

//  Copyright (c) 2015年 XianMingYou. All rights reserved.

//



#import <UIKit/UIKit.h>

#import "UIBezierPath+TextPaths.h"



@interface ShapeWordView : UIView





@property (nonatomic, strong) NSString *text;

@property (nonatomic, strong) UIFont   *font;

@property (nonatomic, strong) UIColor  *lineColor;

@property (nonatomic, assign) CGFloat   lineWidth;





/**

 *  创建view

 */

- (void)buildView;





/**

 *  百分比

 *

 *  @param percent 百分比

 */

- (void)percent:(CGFloat)percent animated:(BOOL)animated;





@end

//

//  ShapeWordView.m

//  PathWord

//

//  Created by XianMingYou on 15/3/6.

//  Copyright (c) 2015年 XianMingYou. All rights reserved.

//



#import "ShapeWordView.h"



@interface ShapeWordView ()

@property (nonatomic, strong) CAShapeLayer  *shapeLayer;

@end



@implementation ShapeWordView



- (void)buildView {

    

    // 过滤数据

    CGFloat   lineWidth   = (self.lineWidth <= 0 ? 0.5 : self.lineWidth);

    UIFont   *font        = (self.font == nil ? [UIFont systemFontOfSize:18.f] : self.font);

    UIColor  *lineColor   = (self.lineColor == nil ? [UIColor blackColor] : self.lineColor);

    NSString *text        = self.text;

    if (text == nil || text.length == 0) {

        return;

    }

    

    // 初始化layer

    self.shapeLayer             = [CAShapeLayer layer];

    self.shapeLayer.frame       = self.bounds;

    self.shapeLayer.lineWidth   = lineWidth;

    self.shapeLayer.fillColor   = [UIColor clearColor].CGColor;

    self.shapeLayer.strokeColor = lineColor.CGColor;

    self.shapeLayer.path = [UIBezierPath pathForMultilineString:text

                                                       withFont:font

                                                       maxWidth:self.bounds.size.width

                                                  textAlignment:NSTextAlignmentCenter].CGPath;

    self.shapeLayer.bounds          = CGPathGetBoundingBox(self.shapeLayer.path);

    self.shapeLayer.geometryFlipped = YES;

    self.shapeLayer.strokeEnd       = 0.f;

    [self.layer addSublayer:self.shapeLayer];

}



- (void)percent:(CGFloat)percent animated:(BOOL)animated {

    if (animated) {

        if (percent <= 0) {

            self.shapeLayer.strokeEnd = 0;

        } else if (percent > 0 && percent <= 1) {

            self.shapeLayer.strokeEnd = percent;

        } else {

            self.shapeLayer.strokeEnd = 1.f;

        }

    } else {

        if (percent <= 0) {

            [CATransaction setDisableActions:YES];

            self.shapeLayer.strokeEnd = 0;

            [CATransaction setDisableActions:NO];

        } else if (percent > 0 && percent <= 1) {

            [CATransaction setDisableActions:YES];

            self.shapeLayer.strokeEnd = percent;

            [CATransaction setDisableActions:NO];

        } else {

            [CATransaction setDisableActions:YES];

            self.shapeLayer.strokeEnd = 1.f;

            [CATransaction setDisableActions:NO];

        }

    }

}



@end

使用:

//

//  ViewController.m

//  PathWord

//

//  Created by XianMingYou on 15/3/6.

//  Copyright (c) 2015年 XianMingYou. All rights reserved.

//



#import "ViewController.h"

#import "UIBezierPath+TextPaths.h"

#import "ShapeWordView.h"



@interface ViewController ()<UITableViewDelegate>

@property (nonatomic, strong) UITableView   *tableView;

@property (nonatomic, strong) ShapeWordView *shape;

@end



@implementation ViewController



- (void)viewDidLoad {

    [super viewDidLoad];

    

    

    self.tableView          = [[UITableView alloc] initWithFrame:self.view.bounds

                                                           style:UITableViewStylePlain];

    self.tableView.delegate = self;

    [self.view addSubview:self.tableView];

    

    self.shape = [[ShapeWordView alloc] initWithFrame:CGRectMake(10, 20, 290, 100)];

    self.shape.lineColor           = [UIColor redColor];

    self.shape.text                = @"YouXianMing";

    self.shape.lineWidth           = 0.5f;

    [self.shape buildView];

    

    [self.view addSubview:self.shape];

}



- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

    CGFloat offsetY = - scrollView.contentOffset.y;

    if (offsetY >= 0) {

        CGFloat percent = offsetY / 50;

        [self.shape percent:percent animated:NO];

    }

}



@end