文本输入框光标闪动键盘交互动效

教程内容:

通过制作时间为0的画板之间的循环跳转模拟光标闪动的交互效果


总览

这个案例制作于比较早的Adobe XD版本,目前更新的XD可通过制作一个光标的Lottie来替代这种做法了

BC6C0301-EE2D-4868-A476-4EF61543F690.png


制作弹出的内容

将充值一栏的背景矩形放大制作并放置好第二个画板的内容,添加一下点击交互,即可完成点击弹出的效果。

428B325F-39BA-4958-A100-2AB1C8725902.png

F11E8AB0-3A4E-4106-93DC-19BB27DBFBE3.png


制作光标效果

首先分解场景,我们总共需要4个场景,即未输入内容时光标闪动,输入1光标闪动,输入12光标闪动,输入123光标闪动

每个场景需要制作两个画板,1个画板有光标,1个画板没有光标


两个画板直接互相链接添加时间为0的交互动画,这样两个画板间就能无限循环从而模拟出光标的效果

66E20D23-05D2-43E5-8959-96737A5BE9E3.png

4D66BD60-102F-43D0-9963-0B0D27699C3A.png

根据以上的做法制作出以下8个画板

64EEB139-5F4A-4332-8B46-3835B7860F87.png

最后将键盘上对应的数字链接到对应的画板即可完成效果


源文件下载:

链接: https://pan.baidu.com/s/1983hancQqeH1GT5Ylc2GzA 提取码: 1k53

点击前往查看→查看视频教程


标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作