在页面下使用状态

页面状态的作用

页面状态可以用来实现页面内整体的交互动画。举个例子:
使用页面状态切换,我们可以让页面中一个图片(组件)的位置、大小、颜色发生改变。

%E9%A1%B5%E9%9D%A2%E7%8A%B6%E6%80%81.gif

页面状态切换和页面切换的区别

上图的状态切换会有组件平滑移动的效果,我们可以称之为神奇移动页面切换则没有这种平滑移动的效果,会是生硬的切换,就像这样:

%E9%A1%B5%E9%9D%A2%E5%88%87%E6%8D%A2.gif

页面状态设置与添加

设置面板的左边有几个按钮,点击第一个圆形按钮后就可以设置页面状态了。点击状态面板中的「新状态」按钮即可新建状态。

VcyUds06OL4j9OTg__thumbnail.png

默认状态和全局状态的作用

默认状态
当我们打开一个页面时,页面最开始呈现的样子(状态),就是页面的默认状态。
默认状态就像动画的第一帧(第一个画面)。
我们可以给默认状态的组件(元素)添加链接,让默认状态跳转到其它状态,产生动画效果。

QQ20190111-191052%402x.png

全局状态
制作动画,我们除了要考虑动画怎么动外,还要考虑动画里要用到哪些元素。全局状态就是用来「盛放」我们要用元素的容器。它跟动画怎么动没关系,它决定了默认状态和其它新建的状态里都有什么组件。

也就是说,当我们做状态切换时,如果需要往页面里添加组件,我们才需要用到全局状态——切换到全局状态这个「容器」当中添加组件。在全局状态添加完,其它状态里就会都有这个组件了。