返回 导航

Swift

hangge.com

Swift - 输入框抖动效果的实现（扩展UIView、支持所有UI组件）

作者：hangge | 2017-08-01 08:10
我们常常会看到这种动态表单验证特效：当用户输入错误或没有输入的时候点击提交按钮，有问题的输入框会抖动几下（左右震动），以提示用户此项有问题。
下面通过样式演示如何实现这种抖动效果。

1，效果图

（1）当我们点击“水平抖动”按钮时，上方的文本输入框会横向抖动。动画结束时会在控制台中打印结束信息。
（2）当我们点击“垂直抖动”按钮时，上方的文本输入框会纵向抖动。动画结束时会在控制台中打印结束信息。
            

2，扩展 UIView（UIView+Shake.swift）

（1）我这里的实现方法是通过扩展 UIView，在其上面增加 shake 方法。这样不仅是输入框，其他像是图片、按钮等 UI 组件都是可以抖动的。比如：界面上有个消息图标，当有新消息过来时，图标会抖动一下提醒用户。
（2）shake 方法支持用户传递一些参数来调整抖动效果，比如：抖动方向、抖动次数、抖动时间、抖动距离。
import UIKit

//抖动方向枚举
public enum ShakeDirection: Int {
    case horizontal  //水平抖动
    case vertical  //垂直抖动
}

extension UIView {
    
    /**
     扩展UIView增加抖动方法
     
     @param direction：抖动方向（默认是水平方向）
     @param times：抖动次数（默认5次）
     @param interval：每次抖动时间（默认0.1秒）
     @param delta：抖动偏移量（默认2）
     @param completion：抖动动画结束后的回调
     */
    public func shake(direction: ShakeDirection = .horizontal, times: Int = 5,
                      interval: TimeInterval = 0.1, delta: CGFloat = 2,
                      completion: (() -> Void)? = nil) {
        //播放动画
        UIView.animate(withDuration: interval, animations: { () -> Void in
            switch direction {
            case .horizontal:
                self.layer.setAffineTransform( CGAffineTransform(translationX: delta, y: 0))
                break
            case .vertical:
                self.layer.setAffineTransform( CGAffineTransform(translationX: 0, y: delta))
                break
            }
        }) { (complete) -> Void in
            //如果当前是最后一次抖动，则将位置还原，并调用完成回调函数
            if (times == 0) {
                UIView.animate(withDuration: interval, animations: { () -> Void in
                    self.layer.setAffineTransform(CGAffineTransform.identity)
                }, completion: { (complete) -> Void in
                    completion?()
                })
            }
            //如果当前不是最后一次抖动，则继续播放动画（总次数减1，偏移位置变成相反的）
            else {
                self.shake(direction: direction, times: times - 1,  interval: interval,
                           delta: delta * -1, completion:completion)
            }
        }
    }
}


3，使用样例 

import UIKit

class ViewController: UIViewController {

    //用来演示抖动效果的输入框
    @IBOutlet weak var textField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    //水平抖动按钮点击
    @IBAction func shakeHorizontally(_ sender: Any) {
        textField.shake(){
            print("水平抖动结束!")
        }
    }

    //垂直抖动按钮点击
    @IBAction func shakeVertically(_ sender: Any) {
        textField.shake(direction: .vertical, times: 4, interval: 0.1, delta: 1.2){
            print("垂直抖动结束!")
        }
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}
源码下载：hangge_1603.zip
评论

全部评论（0）

回到顶部