多态组件-一个画板制作底部tab导航栏交互动效!

教程内容:

使用一个画板,通过编辑组件的多种状态,并对组件中的元件分别做交互链接,呈现特别的导航交互动效


总览

这个案例只需要制作1个画板即可

3FBAF1A3-2ED7-4870-889F-497F8D5F250F.png


制作组件

首先准备好素材,即四个导航按钮,选定状态为图标白色文字白色粉色背景底。

339177CD-4202-4F8F-A769-362164A3722E.png

将所有素材框选制作组件,共需制作4种状态,默认状态即首页状态、频道、动态、我的

2FA12AB5-2832-4F5C-B3E8-4700B997FA6E.png

默认状态:

移动粉色背景底并将首页图标文本均改为白色,其余按钮文字透明度调整为0,并移动图标居中分部显示

5B9475B0-B608-4C65-A059-C95AB1206AB5.png

频道:

AD2D65D4-4AC3-4654-9716-1910CEB91554.png

动态:

C4D42175-D946-4E80-AC81-3B3339A091E2.png

我的:

04070344-3234-41F1-B350-7E3ED9DC99D5.png


制作交互

以[动态]状态为例,选中每一个状态都需要对其余三个按钮做交互链接,链接到每个组件状态

48F6C451-1BD0-4F87-BCF0-3175A8A90208.png

AC4E7E2C-8C92-491F-B107-105B9D38FAD4.png

B920B940-07AC-4FCB-99CF-F4EA897A411B.png

3A3ED818-684D-4AB7-BB85-65043DD10D85.png

按照以上的添加方式,将四个状态的交互都添加完毕即可


源文件下载:

链接: https://pan.baidu.com/s/1g00vZEjzYZfXsRDlH3R1ZQ 提取码: 9fjh

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



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