多语言展示
当前在线:452今日阅读:2今日分享:38

墨刀怎么用页面状态做交互动画?

页面状态的作用页面状态可以用来实现页面内整体的交互动画。举个例子:使用页面状态切换,我们可以让页面中一个图片(组件)的位置、大小、颜色发生改变。页面状态切换和页面切换的区别上图的状态切换会有组件平滑移动的效果,我们可以称之为神奇移动。页面切换则没有这种平滑移动的效果,会是生硬的切换,因此以下步骤方法教你如何做出效果极佳的交互动画:
工具/原料

墨刀

方法/步骤
1

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

2

默认状态和全局状态的作用默认状态当我们打开一个页面时,页面最开始呈现的样子(状态),就是页面的默认状态。默认状态就像动画的第一帧(第一个画面)。我们可以给默认状态的组件(元素)添加链接,让默认状态跳转到其它状态,产生动画效果。全局状态制作动画,我们除了要考虑动画怎么动外,还要考虑动画里要用到哪些元素。全局状态就是用来「盛放」我们要用元素的容器。它跟动画怎么动没关系,它决定了默认状态和其它新建的状态里都有什么组件。也就是说,当我们做状态切换时,如果需要往页面里添加组件,我们才需要用到全局状态——切换到全局状态这个「容器」当中添加组件。在全局状态添加完,其它状态里就会都有这个组件了。

注意事项

全局状态除了用来添加组件还可以在全局状态下修改或增加一个组件,其它所有状态都会随之修改或增加。如果我们需要统一修改某个组件在所有状态中的外观、位置时,我们可以在全局状态下修改。

推荐信息