IOS 编辑框焦点失去与获取时提示文本的的动画

最新推荐文章于 2022-03-02 16:01:41 发布

原创最新推荐文章于 2022-03-02 16:01:41 发布 · 369 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IOS 编辑框的输入动画

ＩＯＳ专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一个扩展的 UIView，用于实现 UITextField 的动画效果。当 UITextField 获取焦点时，UILabel 动画缩放并上移；失去焦点且文本为空时，UILabel 恢复原状。通过 CABasicAnimation 和 CAAnimationGroup 实现移动和缩放动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、本文实现的效果如图
在这里插入图片描述
二、实现思路
扩展一个UIView ，内部使用一个UILabel与UITextFiled，其中UILabel 使用动画控制缩放与位移，在UITextFiled 获取焦点时启动动画，进行UILabel 缩放并往上移，失去焦点且文本内容为空时再使用动画控制UILabel恢复到原来的状态。源码如下：

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface AnimTextFiled : UIView

@property(nonatomic,strong) UILabel* hintLabel;
@property(nonatomic,strong) UITextField* editText;
@property(nonatomic,copy) NSString* hintStr;

- (instancetype)initWithFrame:(CGRect)frame hintStr:(NSString*) placeHolderTxt;

-(void) releaseFirstResponder;

@end

NS_ASSUME_NONNULL_END

。源文件

//
//  AnimTextFiled.m
//  ZacharyTextField
//
//  Created by liuxiaobing on 2019/4/25.
//  Copyright © 2019 gaogang. All rights reserved.
//

#import "AnimTextFiled.h"

@interface AnimTextFiled()<UITextFieldDelegate>
{
    
    BOOL isEditing;
    BOOL isOrigin;
}
@end


@implementation AnimTextFiled

- (instancetype)initWithFrame:(CGRect)frame hintStr:(NSString*) placeHolderTxt{
    self = [super initWithFrame:frame];
    if(self){
        self.hintStr = placeHolderTxt;
        [self initView:frame];

    }
    return  self;
}


- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if(self){
        [self initView:frame];
    }
    return  self;
}

-(void) initView:(CGRect)frame{
    isEditing = NO;
    isOrigin = YES;
    self.hintLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 1.0 / 3.0 * frame.size.height, frame.size.width, 2.0 / 3.0 * frame.size.height)];
    self.hintLabel.text = self.hintStr;
    self.hintLabel.textColor = [UIColor grayColor];
    //self.hintLabel.backgroundColor = [UIColor blueColor];
    [self addSubview:self.hintLabel];
    
    self.editText = [[UITextField alloc] initWithFrame:CGRectMake(0, 1.0 / 3.0 * frame.size.height, frame.size.width, 2.0 / 3.0 * frame.size.height)];
    //self.editText.backgroundColor = [UIColor greenColor];
    self.editText.delegate = self;
    [self addSubview:self.editText];
    
}


-(void) startHintAnim{
    
    if(isEditing){
        return;
    }
    isEditing = YES;
    isOrigin = NO;
    self.hintLabel.center = CGPointMake(0, 1.0 / 3.0 * self.frame.size.height);
    self.hintLabel.layer.anchorPoint = CGPointMake(0, 0);//缩小的中心点
    
    //移动动画
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];///.y的话就向下移动。
    animation.toValue = [NSNumber numberWithFloat:-(1.0 / 3.0 * self.frame.size.height)];
    
    //缩小动画
    CABasicAnimation *ZoomAnima = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    ZoomAnima.fromValue = [NSNumber numberWithFloat:1];
    ZoomAnima.toValue = [NSNumber numberWithFloat:0.8];
    
    CAAnimationGroup *AnimationGroup = [CAAnimationGroup animation];
    AnimationGroup.animations = @[animation,ZoomAnima];
    AnimationGroup.duration = 0.3;
    AnimationGroup.removedOnCompletion = NO;
    AnimationGroup.fillMode = kCAFillModeForwards;
    [self.hintLabel.layer addAnimation:AnimationGroup forKey:@"groupAnimation"];

}

-(void) stopEditingAnimaiton{
    
    if(isOrigin) return;
    isOrigin = YES;
    isEditing = NO;
    self.hintLabel.center = CGPointMake(0, 0);
    self.hintLabel.layer.anchorPoint = CGPointMake(0, 0);//缩小的中心点
    //移动动画
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];///.y的话就向下移动。
    animation.toValue = [NSNumber numberWithFloat:1.0 / 3.0 * self.frame.size.height];
    //缩小动画
    CABasicAnimation *ZoomAnima = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    ZoomAnima.fromValue = [NSNumber numberWithFloat:0.8];
    ZoomAnima.toValue = [NSNumber numberWithFloat:1];
    
    CAAnimationGroup *AnimationGroup = [CAAnimationGroup animation];
    AnimationGroup.animations = @[animation,ZoomAnima];
    AnimationGroup.duration = 0.3;
    AnimationGroup.removedOnCompletion = NO;
    AnimationGroup.fillMode = kCAFillModeForwards;
    [self.hintLabel.layer addAnimation:AnimationGroup forKey:@"groupAnimation"];
}

-(void) releaseFirstResponder{
    [self.editText resignFirstResponder];
    if([self.editText.text isEqualToString:@""]){
        [self stopEditingAnimaiton];
    }
}

#pragma  mark -- UITextFeildDelagete
- (void)textFieldDidBeginEditing:(UITextField *)textField{
    [self startHintAnim];
}


- (void)textFieldDidEndEditing:(UITextField *)textField{
    [self releaseFirstResponder];
}

- (BOOL)textFieldShouldReturn:(UITextField *)textField{
    [self releaseFirstResponder];
    return  YES;
}

@end

使用：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
//    CusTextField = [[ZacharyTextField alloc]initWithFrame:CGRectMake(40, 200, 200, 60)];
//    [self.view addSubview:CusTextField];
    
    tt = [[AnimTextFiled alloc]initWithFrame:CGRectMake(40, 200, 200, 60) hintStr:@"请输入手机号"];
    tt.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:tt];
    
}


- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    [super touchesBegan:touches withEvent:event];
    [tt releaseFirstResponder];
//    [CusTextField ZacharyResignFirstResponder];
//    [_CusTextField1 ZacharyResignFirstResponder];
    
}

源码：https://github.com/06110902002/AnimTextFiled_CircleChart.git