绘图与动画之使用自定义属性与颜色渐变实现色带加载动画
来源:互联网 发布:淘宝网男童运动套装 编辑:程序博客网 时间:2024/05/29 05:54
基础知识
本书用到的主要技术有自定义属性动画与颜色渐变。
自定义属性动画在 绘图与动画系列之使用自定义属性与图像掩膜实现灯泡开关动画一文中已经讲过,这里就不再解释。
颜色渐变
Quartz提供了两种创建颜色渐变的数据类型:CGShadingRef和CGGradientRef,而渐变的种类则分为轴向和径向两种,两种数据类型均可以绘制这两种渐变。
本文中用到的是CGGradientRef,创建CGGradientRef需要指定色域、分割点(包含起点和终点)相对位置、对应颜色组成以及分割点数量。
CGGradientRef myGradient;CGColorSpaceRef myColorspace;size_t num_locations = 2;CGFloat locations[2] = { 0.0, 1.0 }; //起点和终点相对位置CGFloat components[8] = { 1.0, 0.5, 0.4, 1.0, // 起点颜色 0.8, 0.8, 0.3, 1.0 }; // 终点颜色myColorspace = CGColorSpaceCreateDeviceRGB();myGradient = CGGradientCreateWithColorComponents (myColorspace, components, locations, num_locations);
- 轴向渐变
在起点和终点之间画线,颜色会沿着这条线渐变,位于这条线的同一条垂线上的点颜色相同。
创建轴向渐变需要指定起点和终点的坐标,并且可以通过options设置是否绘制超出起点和终点以外的部分。
CGPoint myStartPoint, myEndPoint;myStartPoint.x = 0.0;myStartPoint.y = 0.0;myEndPoint.x = 1.0;myEndPoint.y = 1.0;CGContextDrawLinearGradient (myContext, myGradient, myStartPoint, myEndPoint, 0);
- 径向渐变
简单来说就是两个圆环之间的渐变,包括点和圆环之间的渐变。
创建径向渐变除了起点和终点坐标以外,还需要起点和终点的半径(以绘制圆环)。
CGPoint myStartPoint, myEndPoint;CGFloat myStartRadius, myEndRadius;myStartPoint.x = 0.15;myStartPoint.y = 0.15;myEndPoint.x = 0.5;myEndPoint.y = 0.5;myStartRadius = 0.1;myEndRadius = 0.25;CGContextDrawRadialGradient (myContext, myGradient, myStartPoint, myStartRadius, myEndPoint, myEndRadius, kCGGradientDrawsAfterEndLocation);
引言
之前曾经看过一个色带加载的动画,大概效果是颜色从左向右循环渐变,于是在此也尝试做一个实现。
思路及算法
可以看出,动画的主体由一条渐变色带组成,色带上的颜色从左往右循环运动。
实现这种效果需要两个部分:创建渐变色带,定义一个颜色关于时间的周期函数。
本文中的色带包括五个分割点,而其颜色则在(1.0, 0.6, 0, 1.0)至(0.6, 1.0, 0, 1.0)之间变化,也就是red和green始终在0.6到1.0之间。
而颜色组成关于时间的函数则是一个周期函数:
代码实现
首先需要定义一个包含时间属性的CALayer
@interface IPZColorLoadLayer : CALayer@property int loadTime;@end
实现自定义属性动画、周期函数及渐变色带绘制
@implementation IPZColorLoadLayer@dynamic loadTime;+(BOOL)needsDisplayForKey:(NSString *)key{ if ([@"loadTime" isEqualToString:key]) { return true; } return [super needsDisplayForKey:key];}-(id<CAAction>)actionForKey:(NSString *)event{ if ([self presentationLayer]!=nil) { if ([@"loadTime" isEqualToString:event]) { CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"loadTime"]; animation.fromValue=[[self presentationLayer] valueForKey:@"loadTime"]; return animation; } } return [super actionForKey:event];}-(void)drawInContext:(CGContextRef)ctx{ CGGradientRef myGradient; CGColorSpaceRef myColorspace; size_t num_locations = 5; CGFloat locations[5] = { 0.0,0.25,0.5,0.75, 1.0 }; CGFloat components[20] = {[self getColor:0.6], [self getColor:1.0], 0.0, 1.0, // Start color [self getColor:0.7], [self getColor:0.9], 0.0, 1.0, // Second color [self getColor:0.8], [self getColor:0.8], 0.0, 1.0, // Third color [self getColor:0.9], [self getColor:0.7], 0.0, 1.0, // Fourth color [self getColor:1.0], [self getColor:0.6], 0.0, 1.0, // End color}; myColorspace = CGColorSpaceCreateDeviceRGB(); myGradient = CGGradientCreateWithColorComponents (myColorspace, components,locations, num_locations); CGPoint myStartPoint, myEndPoint; CGRect frame=self.bounds; myStartPoint.x = 0.0; myStartPoint.y = frame.origin.y; myEndPoint.x = frame.size.width; myEndPoint.y = frame.origin.y; CGContextDrawLinearGradient (ctx, myGradient, myStartPoint, myEndPoint, 0);}- (CGFloat)getColor:(CGFloat)originValue{ int offset=self.loadTime % 8 ; int value=originValue*10+offset; if (value>10) { value=10-value%10; } if (value<6) { int origin=originValue *10; value=6+(value -(10-origin))%4; } return value/10.0f;}@end
在view中通过间断赋值实现动画效果。
- (void)drawRect:(CGRect)rect { IPZColorLoadLayer *loadLayer=[IPZColorLoadLayer new]; loadLayer.frame=CGRectMake(rect.origin.x, rect.origin.y+300, rect.size.width, 2); [self.layer addSublayer:loadLayer]; _loadLayer=loadLayer; [NSTimer scheduledTimerWithTimeInterval:0.15 target:self selector:@selector(updateColor:) userInfo:nil repeats:true];}- (void)updateColor:(id)sender{ _loadTime++; _loadLayer.loadTime=_loadTime;;}
0 0
- 绘图与动画之使用自定义属性与颜色渐变实现色带加载动画
- 绘图与动画之使用自定义属性与Quartz实现扇形加载动画
- 绘图与动画之使用自定义属性与图像掩膜实现灯泡开关动画
- 安卓属性动画与自定义控件实现圆球移动并实现颜色渐变
- 绘图与动画之使用CAKeyframeAnimation实现仿WP水滴加载动画
- CSS3绘图与动画
- 文字颜色渐变与动画原理(仅webkit)
- 属性动画分析与使用
- Android开发之自定义控件与属性动画Animation的结合使用
- iOS swift-自定义转场动画_实现modal控制器显示与消失时的透明度渐变
- 使用属性动画实现一个简单的加载动画
- Android属性动画与自定义View——实现vivo x6更新系统的动画效果
- JS 颜色渐变动画
- 自定义控件三部曲之动画篇(十)——联合动画的XML实现与使用示例
- (4.1.23.12)自定义控件三部曲之动画篇(十)——联合动画的XML实现与使用示例
- 自定义控件三部曲之动画篇(十)——联合动画的XML实现与使用示例
- 自定义控件三部曲之动画篇(十)——联合动画的XML实现与使用示例
- Android 动画——帧动画与渐变动画
- 标题:快速排序
- redis事务及锁应用
- DX控件循环找控件
- Java拾遗------IO流
- 快速选择算法
- 绘图与动画之使用自定义属性与颜色渐变实现色带加载动画
- 心路历程(一)-自学java两个月心得
- POJ3321 Apple Tree(树状数组 + dfs + 线性表)
- HDU 5381 The sum of gcd 询问区间内所有子区间的GCD和 [暴力法]
- python2.7学习笔记(8) ——模块
- Android OkHttp文件上传与下载的进度监听扩展
- 1080. Graduate Admission (30)
- 在Ubuntu下修改sublime默认模板代码
- 在Centos中安装并配置phpMyAdmin