為什麼墨刀的動效這麼酷炫？學會神奇移動，你也可以
摘要：
神奇移動效果在實際的互動隨處可見，比如手機相簿、水波紋效果等。那麼這種效果是怎麼做出來的呢？
下面分享一篇來自刀友的投稿，分享他在墨刀設計原型
時新增神奇移動效果的經驗~
（帶神奇移動效果）
（不帶神奇移動效果）
一、什...
神奇移動效果在實際的互動隨處可見，比如手機相簿、水波紋效果等。那麼這種效果是怎麼做出來的呢？
下面分享一篇來自刀友的投稿，分享他在墨刀設計原型 時新增神奇移動效果的經驗~
（帶神奇移動效果）
（不帶神奇移動效果）
一、什麼是神奇移動？
神奇移動其實就是相同的元素在兩個畫布上的屬性（如位置、大小、顏色等）發生了變化，這種變化是平滑過渡的效果，而不是生硬的切換。
將神奇移動進行基礎拆解，你一下子就能明白其中的原理。
新增神奇移動效果，畫布1和畫布2跳轉效果是平滑過渡的。
不加神奇移動，畫布1和畫布2跳轉結果很生硬。
二、如何在墨刀裡使用神奇移動
三、一個小案例帶你掌握
登入註冊切換
step1 ：該動效所用到的元素如下圖
我們用文字、矩形、圖片這些元件先搭建出如上介面。
其中註冊面板和、登入面板分別組合一下。
step2：搭建好預設狀態的介面。
在預設狀態中，調整一下注冊面板的位置及順序，使其位於登入面板的下方。
step3：搭建好狀態2的介面。
在狀態2中，註冊面板放大，登入面板縮小，且登入面板位於註冊面板的下方。
「註冊」二字變深，「登入」二字變淺。
step4：新增互動跳轉。
點選註冊跳轉到狀態2，點選登入跳轉到狀態1。
之後點選右上角執行按鈕，即可檢視執行效果。
四、你可能需要注意
神奇移動最基本的原理就是理清楚每一步動畫中，同一個元素在起點和終點的屬性 。然後將這些動畫根據時間點組合起來，就能達到你想要的效果了。
我們可以儘可能多的瞭解各種動效，分析其優缺點，需要用時隨時能拿出手，不至於讓動效限制你的思維。
但是也不要為了酷炫效果而設計一些華而不實的效果，如果影響了程序及重點、考驗效能、或者對適配環境要求較高時，就需要重新權衡了。