沿Xamarin形式的圓形路徑動畫一個按鈕形式

我想讓一個按鈕移動到一個圓形路徑的Xamarin Forms頁面上。該按鈕應該從屏幕的左下角開始，然後向右移動屏幕，然後左側以圓形移動，就好像在屏幕左側追蹤半個圓圈一樣。該按鈕然後會停在路徑上的某個點上。該按鈕需要在整個移動過程中保持水平（因此不能旋轉），就好像沿着路徑滑動一樣。沿Xamarin形式的圓形路徑動畫一個按鈕形式

我玩過TranslateTo方法，使它從底部到頂部，從左到右，然後從右向左移動，使用SinOut/SinIn緩動功能，但它並沒有給我一個圓形路徑。

我也嘗試旋轉它與負面的錨點這種工作，但按鈕旋轉，我不能讓它反轉，因爲我只能設置錨點一次。

我想如果我可以使用動畫循環，那麼我可以在每個循環中增加Y位置，並使x位置跟隨正弦波值來獲得圓圈（或類似的東西 - 原諒我過期數學技能），但我只能看到Xamarin表單上可用的Translate，Rotate，Fade等功能。

有沒有人有過這方面的經驗，或者有關如何實現這一效果的任何建議？

在此先感謝您的任何建議或幫助。

最好的問候，鋁。

來源

2016-10-04 Alan Kell

使用兩個單獨的動畫是一個很好的舉措，你應該堅持下去。然而，你是對的，它不會讓按鈕移動到一個完美的圓圈，這是因爲沒有適當的寬鬆。您必須使用[this]（https://developer.xamarin.com/guides/xamarin-forms/user-interface/animation/）爲自己的運動編寫自定義動畫，沿着X軸和Y軸。你需要一些高中數學。 – nicks

準確地描繪出你想要達到什麼樣的動作，並且我會幫你解除功能。 – nicks

感謝您的回覆尼卡。我正在嘗試實現此[鏈接]中顯示的效果（https://s-media-cache-ak0.pinimg.com/originals/7b/c3/cc/7bc3cc61ff0b090fbd937e12d8d2a9af.gif）。我將使用一個按鈕來替換每個圖像（格式化看起來像一個圖像），並且會有一些按鈕在沿着圓形路徑的不同點停下來。我會通過您提供的鏈接進行瀏覽，並且非常感謝您提供任何幫助。謝謝，Al。 –

最簡單的解決方案是使用2個旋轉動畫。第一次繪製路徑，第二次保持對象平整。由於兩個動畫需要不同的AnchorX和AnchorY，因此您必須將對象包裝到ContentView中，並在該對象上具有「路徑」動畫。

請注意：以下部分可能無法正常工作，或者未提供您想要的結果，但這將是一個有趣的實驗。

另一種方法是濫用TranslateTo並定義您自己的Easing。緩解功能爲（0,1）定義，但要動畫上（-pi/2，π/ 2），所以這應該是這樣的：

var yEasing = new Easing(r=>Math.Sin(r * Math.PI - Math.PI/2)); 
var xEasing = new Easing(r=>Math.Cos(r * Math.PI - Math.PI/2));

這是緩和功能嚴重濫權，因爲xEasing的值是0-> 1-> 0而不是0-> 1，並且該對象可以在動畫結束時一直跳到最右邊;並且yEasing從-1開始，並且該對象可以在動畫開始時跳躍，但這可以通過在yEasing上添加+1和/2來調整。玩的開心。

UPDATE

但是，如果你定義2步動畫（從移動左下到右中，然後右中側頂部左），你可以有有效的緩解。我很確定你可以自己計算Easing方法，通過改變上方提供的符號和因子。

來源

2016-10-05 09:29:07

感謝您的建議Stephane。我設法使用Nika在上面的鏈接中建議的自定義動畫擴展方法創建效果（[link]（https://developer.xamarin.com/guides/xamarin-forms/user-interface/animation/custom/））。我得到了數學基礎上從這個[鏈接]（http://stackoverflow.com/questions/11462239/how-to-move-point-along-circle）的一個圓圈更新的位置，這一切都很好地合在一起。 –

沿Xamarin形式的圓形路徑動畫一個按鈕形式

回答

相關問題