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

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

部分开源代码支持:

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