为什么墨刀的动效这么酷炫?学会神奇移动，你也可以

为什么墨刀的动效这么酷炫？（学会神奇移动，你也可以）

神奇移动效果在实际的交互随处可见，比如手机相册、水波纹效果等。那么这种效果是怎么做出来的呢？

下面分享一篇来自刀友的投稿，分享他在墨刀设计原型时添加神奇移动效果的经验~

（带神奇移动效果）

（不带神奇移动效果）

一、什么是神奇移动？

神奇移动其实就是相同的元素在两个画布上的属性（如位置、大小、颜色等）发生了变化，这种变化是平滑过渡的效果，而不是生硬的切换。

将神奇移动进行基础拆解，你一下子就能明白其中的原理。

添加神奇移动效果，画布1和画布2跳转效果是平滑过渡的。

不加神奇移动，画布1和画布2跳转结果很生硬。

二、如何在墨刀里使用神奇移动

三、一个小案例带你掌握

登录注册切换

step1 ：该动效所用到的元素如下图

我们用文字、矩形、图片这些组件先搭建出如上界面。

其中注册面板和、登录面板分别组合一下。

step2：搭建好默认状态的界面。

在默认状态中，调整一下注册面板的位置及顺序，使其位于登录面板的下方。

step3：搭建好状态2的界面。

在状态2中，注册面板放大，登录面板缩小，且登录面板位于注册面板的下方。

「注册」二字变深，「登录」二字变浅。

step4：添加交互跳转。

点击注册跳转到状态2，点击登录跳转到状态1。

之后点击右上角运行按钮，即可查看运行效果。

四、你可能需要注意

神奇移动最基本的原理就是理清楚每一步动画中，同一个元素在起点和终点的属性。然后将这些动画根据时间点组合起来，就能达到你想要的效果了。

我们可以尽可能多的了解各种动效，分析其优缺点，需要用时随时能拿出手，不至于让动效限制你的思维。

但是也不要为了酷炫效果而设计一些华而不实的效果，如果影响了进程及重点、考验性能、或者对适配环境要求较高时，就需要重新权衡了。

">