说个故事: UI设计对大家说:“我们拒绝炒现饭!"。 然后就加了一波特效。 程序员猝。
#####效果分析: 1.水波动画。 2.背景颜色渐变。
CGMutablePathRef
和三角函数画出波浪线,让后利用CADisplayLink
将内容实时更新到屏幕上。 2.背景颜色渐变,利用渐变层CAGradientLayer
将背景颜色由到深渐变,然后在利用定时器加三角函数实时变动起点和终点的颜色。
#####代码逻辑: 代码直接看demo吧DCGradientView 背景颜色渐变的核心代码如下:
#####关于颜色渐变尝试过的代码:
if (self.gradLayer == nil) {self.gradLayer = [CAGradientLayer layer];self.gradLayer.frame = self.bounds;}self.gradLayer.startPoint = CGPointMake(0, 0.8);self.gradLayer.endPoint = CGPointMake(1, 0.2);//create colors, important sectionNSMutableArray *colors = [NSMutableArray array];for (NSInteger deg = 0; deg <= 360; deg += 1) {UIColor *color;color = [UIColor colorWithHue:1.0 * deg / 360.0saturation:1.0brightness:1.0alpha:1.0];[colors addObject:(id)[color CGColor]];}[self.gradLayer setColors:[NSArray arrayWithArray:colors]];
复制代码
效果如下:
还尝试利用公式计算RGB。 Gradient = A + (B-A) / Step * N
每个RGB都要利用这个公式计算,A是开始值,B是结束值,Step分成的总份数,N是当前的份数。
NSMutableArray *colors = [NSMutableArray array];for (int i = 1; i<17; i ++) {float r = 37 + (13-37)/16*i;float g = 191 + (150-191)/16*i;float b = 191 + (173-191)/16*i;UIColor *color = [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1];[colors addObject:(id)[color CGColor]];}for (int i = 1; i<17; i ++) {float r2 = 13 + (37-13)/16*i;float g2 = 150 + (191-150)/16*i;float b2 = 173 + (191-173)/16*i;UIColor *color2 = [UIColor colorWithRed:r2/255.0 green:g2/255.0 blue:b2/255.0 alpha:1];[colors addObject:(id)[color2 CGColor]];}复制代码
颜色由浅到深,再由深到浅逐渐变化,所以对称着添加了一遍。这实现的效果跟最终效果很接近,但是仔细看会发现,颜色会有一条条的感觉,颜色分布不是很细腻。所以也放弃。
DCGradientView
怎么觉得代码清楚得连注释都不用写-_-``
转载请注明出处 © XDChang