神奇移动效果在实际的交互随处可见，比如手机相册、水波纹效果等。那么这种效果是怎么做出来的呢？
下面分享一篇来自刀友的投稿，分享他在墨刀设计原型时添加神奇移动效果的经验~
（带神奇移动效果）
（不带神奇移动效果）
一、什么是神奇移动？
神奇移动其实就是相同的元素在两个画布上的属性（如位置、大小、颜色等）发生了变化，这种变化是平滑过渡的效果，而不是生硬的切换。
将神奇移动进行基础拆解，你一下子就能明白其中的原理。
看完文章的你，想要一些AE、ps学习资料或者有不懂的都可以找我咨询，加我建立的UI学习q群：930958328，进群可以找我领取相应的笔刷素材大礼包，还可以跟群里的其他设计大佬和学习者一起交流学习，获取更多其他软件学习资料。 想学UI设计的小白或者零基础都可以领取到学习资料ps笔刷神器+ps和AE软件
添加神奇移动效果，画布1和画布2跳转效果是平滑过渡的。
不加神奇移动，画布1和画布2跳转结果很生硬。
二、如何在墨刀里使用神奇移动
三、一个小案例带你掌握
登录注册切换
step1 ：该动效所用到的元素如下图
我们用文字、矩形、图片这些组件先搭建出如上界面。
其中注册面板和、登录面板分别组合一下。
step2：搭建好默认状态的界面。
在默认状态中，调整一下注册面板的位置及顺序，使其位于登录面板的下方。
step3：搭建好状态2的界面。
在状态2中，注册面板放大，登录面板缩小，且登录面板位于注册面板的下方。
「注册」二字变深，「登录」二字变浅。
step4：添加交互跳转。
点击注册跳转到状态2，点击登录跳转到状态1。
之后点击右上角运行按钮，即可查看运行效果。
四、你可能需要注意
神奇移动最基本的原理就是理清楚每一步动画中，同一个元素在起点和终点的属性。然后将这些动画根据时间点组合起来，就能达到你想要的效果了。
我们可以尽可能多的了解各种动效，分析其优缺点，需要用时随时能拿出手，不至于让动效限制你的思维。
但是也不要为了酷炫效果而设计一些华而不实的效果，如果影响了进程及重点、考验性能、或者对适配环境要求较高时，就需要重新权衡了。
网友评论