首页 > 代码库 > 自己实现的输入框控件

自己实现的输入框控件

技术分享



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








自己实现的输入框控件