使用FontAwesome
https://github.com/PrideChung/FontAwesomeKit
为什么要使用FontAwesome呢,其实,它的字体就是矢量图,无论是放大还是缩小都不失真的矢量图哦.
1. 下载源码,导入文件夹FontAwesomeKit,然后引入头文件FontAwesomeKit.h
2. 使用
// 取得固定的icon以及设定尺寸
FAKZocial *twitterIcon = [FAKZocial stackoverflowIconWithSize:50];
// 设定相关的属性
[twitterIcon addAttribute:NSForegroundColorAttributeName
value:[UIColor redColor]];
// 在UILabel上显示
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
label.attributedText = [twitterIcon attributedString];
[self.view addSubview:label];
label.center = self.view.center;使用是非常简单的哦,效果如下:
3. 高级应用
你以为就显示出来就没了么?非也,你想过把字体转换为路径么,转换为路径后就可以执行各种CoreAnimation的动画了呢:)
先来试一下CAshapeLayer的动画路径:
// 取得固定的icon以及设定尺寸
FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:100];
// 设定相关的属性
[twitterIcon addAttribute:NSForegroundColorAttributeName
value:[UIColor blackColor]];
// 将icon转换为贝塞尔曲线
UIBezierPath *path = [UIBezierPath pathFromAttributedString:[twitterIcon attributedString]];
// 创建shapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
// 获取path
shapeLayer.path = path.CGPath;
// 根据这个path来设定尺寸
shapeLayer.bounds = CGPathGetBoundingBox(shapeLayer.path);
// 几何反转
shapeLayer.geometryFlipped = YES;
// 一些颜色的填充
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor cyanColor].CGColor;
// 设定layer位置
shapeLayer.position = self.view.center;
[self.view.layer addSublayer:shapeLayer];
// 定时器动画
_timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
[_timer event:^{
shapeLayer.strokeEnd = arc4random()%100/100.f;
} timeInterval:NSEC_PER_SEC];
[_timer start];
// 取得固定的icon以及设定尺寸
FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:100];
// 设定相关的属性
[twitterIcon addAttribute:NSForegroundColorAttributeName
value:[UIColor blackColor]];
// 将icon转换为贝塞尔曲线
UIBezierPath *path = [UIBezierPath pathFromAttributedString:[twitterIcon attributedString]];
// 创建shapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
// 获取path
shapeLayer.path = path.CGPath;
// 根据这个path来设定尺寸
shapeLayer.bounds = CGPathGetBoundingBox(shapeLayer.path);
// 几何反转
shapeLayer.geometryFlipped = YES;
// 一些颜色的填充
shapeLayer.fillColor = [UIColor blackColor].CGColor;
shapeLayer.strokeColor = [UIColor clearColor].CGColor;
shapeLayer.position = CGPointMake(50, 50);
// 渐变颜色图层
CAGradientLayer *colorLayer = [CAGradientLayer layer];
colorLayer.bounds = CGRectMake(0, 0, 120, 120);
colorLayer.mask = shapeLayer;
colorLayer.colors = @[(id)[UIColor redColor].CGColor,
(id)[UIColor greenColor].CGColor,
(id)[UIColor yellowColor].CGColor];
colorLayer.position = self.view.center;
// 设定layer位置
[self.view.layer addSublayer:colorLayer];
// 定时器动画
_timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
[_timer event:^{
colorLayer.speed = 0.5;
colorLayer.colors = @[(id)[UIColor colorWithRed:arc4random()%255/255.f
green:arc4random()%255/255.f
blue:arc4random()%255/255.f
alpha:1].CGColor,
(id)[UIColor colorWithRed:arc4random()%255/255.f
green:arc4random()%255/255.f
blue:arc4random()%255/255.f
alpha:1].CGColor,
(id)[UIColor colorWithRed:arc4random()%255/255.f
green:arc4random()%255/255.f
blue:arc4random()%255/255.f
alpha:1].CGColor,
(id)[UIColor colorWithRed:arc4random()%255/255.f
green:arc4random()%255/255.f
blue:arc4random()%255/255.f
alpha:1].CGColor,
(id)[UIColor colorWithRed:arc4random()%255/255.f
green:arc4random()%255/255.f
blue:arc4random()%255/255.f
alpha:1].CGColor];
} timeInterval:NSEC_PER_SEC];
[_timer start];
// 取得固定的icon以及设定尺寸
FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:100];
// 设定相关的属性
[twitterIcon addAttribute:NSForegroundColorAttributeName
value:[UIColor blackColor]];
// 将icon转换为贝塞尔曲线
UIBezierPath *path = [UIBezierPath pathFromAttributedString:[twitterIcon attributedString]];
// 创建shapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
// 获取path
shapeLayer.path = path.CGPath;
// 根据这个path来设定尺寸
shapeLayer.bounds = CGPathGetBoundingBox(shapeLayer.path);
// 几何反转
shapeLayer.geometryFlipped = YES;
// 一些颜色的填充
shapeLayer.fillColor = [UIColor redColor].CGColor;
shapeLayer.strokeColor = [UIColor clearColor].CGColor;
shapeLayer.position = CGPointMake(50, 50);
// 渐变颜色图层
CAGradientLayer *colorLayer = [CAGradientLayer layer];
colorLayer.bounds = CGRectMake(0, 0, 120, 120);
colorLayer.mask = shapeLayer;
colorLayer.colors = @[(id)[UIColor redColor].CGColor,
(id)[UIColor greenColor].CGColor,
(id)[UIColor yellowColor].CGColor];
colorLayer.position = self.view.center;
// 设定layer位置
[self.view.layer addSublayer:colorLayer];
// 旋转
CABasicAnimation *basicAni = \
[CABasicAnimationList animationWithRotationZFromValue:-2*M_PI_2 toValue:2*M_PI_2];
basicAni.duration = 1.0f;
basicAni.repeatCount = HUGE_VALF;
[shapeLayer addAnimation:basicAni forKey:nil];
// 定时器动画
_timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
[_timer event:^{
colorLayer.colors = @[(id)[UIColor colorWithRed:arc4random()%255/255.f
green:arc4random()%255/255.f
blue:arc4random()%255/255.f
alpha:1].CGColor,
(id)[UIColor colorWithRed:arc4random()%255/255.f
green:arc4random()%255/255.f
blue:arc4random()%255/255.f
alpha:1].CGColor,
(id)[UIColor colorWithRed:arc4random()%255/255.f
green:arc4random()%255/255.f
blue:arc4random()%255/255.f
alpha:1].CGColor,
(id)[UIColor colorWithRed:arc4random()%255/255.f
green:arc4random()%255/255.f
blue:arc4random()%255/255.f
alpha:1].CGColor,
(id)[UIColor colorWithRed:arc4random()%255/255.f
green:arc4random()%255/255.f
blue:arc4random()%255/255.f
alpha:1].CGColor];
} timeInterval:NSEC_PER_SEC];
[_timer start];
附录:
FAKFontAwesome *starIcon = [FAKFontAwesome asteriskIconWithSize:50];
FAKFoundationIcons *bookmarkIcon = [FAKFoundationIcons bookmarkIconWithSize:15];
FAKZocial *twitterIcon = [FAKZocial twitterIconWithSize:15];
FAKIonIcons *mailIcon = [FAKIonIcons ios7EmailIconWithSize:48];
