03
构建交互
第一步:设置出现效果
选中橙色的1月形状,在动画选项卡下,我们选择触发,选择通过点击,矩形3.
注意:这里的矩形3名字是不固定的,是系统自命名的。
如果你想查看每个元素的名字,可以在开始选项卡,点击选择、选择窗格当中找到每个元素的名字。
同样的,选中橙色的2月形状,在动画选项卡下,我们选择触发,选择通过点击,矩形4.
设置完之后,我们就可以在全屏放映的模式下,通过点击黑色的1月和黑色的2月。
我们点击黑色的1月,就会出现橙色的2月,我们点击黑色的2月,就会出现橙色的2月。
第二步:设置退出效果
通过刚才的设置,我们只是能让橙色的形状出来,但我们希望达到的效果是,我们点击黑色的1月形状, 橙色的1月形状出现,橙色的2月形状消失。
这时候,我们就需要分别给两个橙色的形状,再添加一个退出的动画效果,在退出动画效果当中,我们就选择消失。
之后就按照我们的逻辑,将橙色2月的消失动画,连接在矩形3触发器的下方,将橙色1月的消失动画,连接在矩形4触发器的下方。
这样我们在全屏放映的试图下,出来的效果是这样的:
我们点击黑色的矩形1月,那么就会出现橙色的矩形1月,同时橙色的2月消失。
我们点击黑色的矩形2月,那么就会矩形橙色的矩形2月,同时橙色的1月消失。
04
构建第二组交互
同样的原理,如果你想图表跟月份按钮衔接起来,点击相应的月份,就会出现该月份的图表。
那么就将该图表的出现动画与该按钮就行绑定,然后将两外一个图表的消失动画也跟这个按钮进行绑定。
最终设置的逻辑如下:
点击黑色的形状1月,橙色的1月形状出现,橙色的2月形状消失,1月份图表出现,2月份图表消失。
点击黑色形状2月,橙色的2月形状出现,橙色的1月形状消失,2月份图表出现,1月份图表消失。
以上就是整个交互图表设计的逻辑,如果你想添加图表,那么就在这个逻辑后面继续添加就可以了。
之后,你再把橙色的形状1月和橙色的形状2月覆盖在黑色形状1月和黑色形状2月上面,这样就看不出来是四个形状了。
最终你对图表进行了美化之后,就能做出下图这样的效果!