首页 > 代码库 > 自己实现的输入框控件
自己实现的输入框控件
公司设计问我这样效果好不好做,正好赶上公司断网了,我就研究了下,感觉CAGroupAnimation加上CAShapeLayer可以实现,就写了下。最后也实现了。
先来拆分小动画,1.背景框收缩2,placeholder组动画。
①shapeLayer
CGRect roundRect =CGRectInset(self.bounds,0, 10);
self.backgroundLayer = [CAShapeLayerlayer];
self.backgroundLayer.frame = roundRect;
self.backgroundLayer.path = [selfbezierPathWithRect:roundRect].CGPath;
self.backgroundLayer.lineWidth =2.f;
self.backgroundLayer.strokeColor = [UIColororangeColor].CGColor;
self.backgroundLayer.fillColor = [UIColorclearColor].CGColor;
self.backgroundLayer.strokeEnd =1;
[self.layeraddSublayer:self.backgroundLayer];
路劲:
-(UIBezierPath*)bezierPathWithRect:(CGRect)rect{
UIBezierPath* path = [UIBezierPathbezierPath];
[path moveToPoint:CGPointMake(CGRectGetHeight(rect)/2.,0)];
CGPoint centerL =CGPointMake(CGRectGetHeight(rect)/2.,CGRectGetHeight(rect)/2.);
[path addArcWithCenter:centerLradius:CGRectGetHeight(rect)/2.startAngle:-M_PI_2endAngle:M_PI_2clockwise:0];
[path addLineToPoint:CGPointMake(CGRectGetWidth(rect) -CGRectGetHeight(rect)/2.,CGRectGetHeight(rect) )];
CGPoint centerR =CGPointMake(CGRectGetWidth(rect) -CGRectGetHeight(rect)/2.,CGRectGetHeight(rect)/2.);
[path addArcWithCenter:centerRradius:CGRectGetHeight(rect)/2.startAngle:M_PI_2endAngle:-M_PI_2clockwise:0];
[path addLineToPoint:CGPointMake(CGRectGetHeight(rect)/2.,0)];
[pathclosePath];
return path;
}
收缩动画:
-(CAAnimation*)shapeLayerStrokeEndAnimationWithStroke:(CGFloat)strokeEnd fromValue:(CGFloat)fm{
CABasicAnimation* animation = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];
animation.toValue = [NSNumbernumberWithFloat:strokeEnd];
animation.fromValue = [NSNumbernumberWithFloat:fm];
animation.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.duration =.3f;
animation.removedOnCompletion =YES;
animation.autoreverses =NO;
return animation;
}
周长计算:
self.contentWidth = [selfwidthWithHeight:CGRectGetHeight(self.placeholdLabel.frame)text:self.placeholdLabel.text label:self.placeholdLabel]+4; //文本宽度多四个像素
//获取周长
self.perimeter =M_PI*CGRectGetHeight(roundRect) + (CGRectGetWidth(roundRect) -CGRectGetHeight(roundRect))*2;
②文本动画组:
UILabel*label = [[UILabelalloc] initWithFrame:CGRectMake(CGRectGetHeight(roundRect)/2. + 2, (CGRectGetHeight(self.bounds) / 2. - 20/2.),35, 20)];
label.backgroundColor = [UIColorclearColor];
label.text =@"wmi";
label.textAlignment =NSTextAlignmentLeft;
label.textColor = [UIColorgrayColor];
[selfaddSubview:label];
self.placeholdLabel = label;
动画:
-(CAAnimation*)placeholdLabelGroupFromCenter:(CGPoint)fmCt center:(CGPoint)center{
CABasicAnimation* tfAnimation = [CABasicAnimationanimationWithKeyPath:@"transform.rotation"];
tfAnimation.removedOnCompletion =NO;
tfAnimation.fillMode =kCAFillModeForwards;
tfAnimation.toValue = [NSNumbernumberWithFloat: M_PI_2/3.];
tfAnimation.fromValue = [NSNumbernumberWithFloat: 0];
tfAnimation.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];
tfAnimation.duration =.2f;
tfAnimation.beginTime =0.0f;
CABasicAnimation* psAnimation = [CABasicAnimationanimationWithKeyPath:@"position"];
psAnimation.toValue = [NSValuevalueWithCGPoint:center];
psAnimation.fromValue = [NSValuevalueWithCGPoint:fmCt];
psAnimation.removedOnCompletion =NO;
psAnimation.fillMode =kCAFillModeForwards;
psAnimation.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];
psAnimation.duration =.2f;
psAnimation.beginTime =0.0f;
CABasicAnimation* tfAnimation1 = [CABasicAnimationanimationWithKeyPath:@"transform.rotation"];
tfAnimation1.toValue = [NSNumbernumberWithFloat:0];
tfAnimation1.removedOnCompletion =NO;
tfAnimation1.fillMode =kCAFillModeForwards;
tfAnimation1.fromValue = [NSNumbernumberWithFloat:M_PI_2/3.];
tfAnimation1.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];
tfAnimation1.duration =.2f;
tfAnimation1.beginTime =.2f;
CAAnimationGroup* group = [CAAnimationGroupanimation];
group.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];
group.duration =.4f;
group.animations =@[tfAnimation,psAnimation,tfAnimation1];
group.removedOnCompletion =NO;
group.fillMode =kCAFillModeForwards;
return group;
}
获取文本宽度
#pragma mark - 获取字符串的长度
-(CGFloat)widthWithHeight:(CGFloat)height text:(NSString*)text label:(UILabel*)label{
CGSize size = [text boundingRectWithSize:CGSizeMake(CGFLOAT_MAX, height)
options:NSStringDrawingTruncatesLastVisibleLine |NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:label.font,
NSForegroundColorAttributeName:label.textColor
} context:nil].size;
return size.width;
}
基本ok了,哈哈
自己实现的输入框控件