close

galaxy world map

這對於XD是比較新的功能，2018/10上線。至今僅2個多月，還不健全。目前只支援desktop preview和mobile preview，就是無法用瀏覽器開來看。

大概的做法如下：

  1. 將你的畫面和元件複製一份
  2. 把第二份的元件調整到滑動結束時的狀態
  3. 切換到prototype模式
  4. 設定連結，從物件連到另一個畫面
  5. 改連結選項：把"tap"換成"drag"，第二個項目選"auto-animate"
  6. 設定另一個連結，讓兩個畫面可以滑過去，也可以滑回來
  7. 完成

這是小弟的sample，供各位參考：

補充：轉場特效（easing）可用選項

  1. None（無特殊效果）
  2. Ease-in（開始時放慢）
  3. Ease-out（結束時放慢）
  4. Ease-in-out（頭尾都放慢）
  5. Snap（折返）：結束時，會超過一點，再拉回
  6. Wind up（發條衝刺）：開始時，會倒抽一點，再前進
  7. Bounce（彈跳）：好像球掉到地上，會反彈幾次才停止
arrow
arrow
    文章標籤
    adobe xd auto animate autoanimate bounce easing swipe slide snap windup wind up prototype ease in ease out
    全站熱搜

    Frank 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄