Nativescript：具有浮動動作按鈕的模擬材料設計效果

Question

我正在使用Nativescript 1.6和此組件https://github.com/bradmartin/nativescript-floatingactionbutton

當您單擊此按鈕然后導航到另一頁面時，我希望具有一些不錯的“材料設計效果”。 這有點hacky，但是它確實可以完成工作並且看起來很不錯（當我在原生Android世界中時，我可能應該對共享元素使用片段過渡，但不是）

我目前的嘗試：

XML：

<FAB:fab tap="tap"
  loaded="buttonLoaded"
  row="1"
  icon="res://ic_add_white_24dp"
  rippleColor="#f1f1f1"
  class="fab-button" />

JS：

fabButton.icon = ""; // Error! ResourceNotFoundException
fabButton.animate({
  scale: { x: 20, y: 20 },
  translate: { x: -200, y: -200 },
  duration: 300
}).then(function(){
  navigation.goToDetailPage();

  fabButton.animate({ // reset button to original state
    scale: { x: 1, y: 1 },
    translate: { x: 0, y: 0 },
    delay: 100,
    duration: 0
  });
});

2個問題：

• 我怎樣才能刪除圖標，只是為了獲得更好的效果？ “”，{}，null不允許，我是否真的應該為此創建透明的png？
• 是否有更好的方法在動畫后還原/重置元素？

Answer 1

1. 如果該異常是ResourceNotFoundException ，則該異常看起來像拋出了本機異常，因此您似乎無法設置null值。 最好的選擇可能是空的.png。 我想插件可以檢查一個空值並繞過本機異常，但是現在不是這種情況。 如果需要，可以使用此功能進行PR。

2. 至於將元素重置為其原始狀態，您正在做的就是我要做的。 我認為不會有“更好”的方法，因為一旦更改了初始動畫的狀態，原生setTranslateX/Y和其他運行動畫的方法就會更改項目的位置/位置/顏色等。因此，您正在做的可能是最好的方法。

如果您不介意的話，我想看一下這個動畫，它看起來像其他開發人員可能想要的:)也許記錄一個.gif並附加在這里供其他人參考。 如果您沒有錄制.gif的工具，那么我將在這里使用它： http : //www.cockos.com/licecap/當我從模擬器錄制時。

希望這會有所幫助。