自己实现的输入框控件

公司设计问我这样效果好不好做，正好赶上公司断网了，我就研究了下，感觉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了，哈哈