IOS 編輯框焦點失去與獲取時提示文本的的動畫

一、本文實現的效果如圖

二、實現思路
擴展一個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