用Provider實現商品加入購物車的動畫效果

先上效果圖：

我這個項目用Provider來管理狀態，幾乎全部UI頁面都是extends StatelessWidget。當我初次接觸Animation,發現要實現動畫效果，就要with SingleTickerProviderStateMixin，天然就要extends StatefulWidget，但是我篇篇頁面都是StatelessWidget，不想由於實現動畫而打破這個常規，因而繼續往下找，終於讓我找到了，AnimatedContainer。

1.容器

以Stack做爲容器，將tab，表格，按鈕這些雜七雜八的組件都放在一個Container容器裏，AnimatedContainer單獨做爲一個容器，被包裹在Provider中，置於Container上層。AnimatedContainer與Container互不干擾。

2.孩子

孩子就是一張圓形圖片，數據保存的就是你點擊衣服的網絡(本地)路徑.

3.座標

要實現動畫，基本上少不了這三點：起始狀態，最終狀態，間隔時間。 我先講終止狀態，在我這就是目標座標，首先我說下，座標值用的是絕對座標值x和y。當我點擊了一件衣服，圓形圖片飛到了購物車位置，怎麼獲取購物車的絕對座標值呢，上圖

在購物車圖片的key中保存了globalKey，實例化和獲取值的邏輯我都放在Provider中了

接下來，我講下起始狀態也就是起始座標值。起始座標值是動態獲取，當我點擊一件衣服，就獲取我點擊位置的絕對座標值，

GestureDetector有不少關於手勢的參數，這些參數都保存了手勢操做的座標值

右邊我框的***Details中你能找到globalPosition，在globalPosition就能取到xy值。

間隔時間很簡單，我設爲1000 milliseconds。

4.1秒中AnimatedContainer幹了什麼

它更新了xy座標值，visibility

具體實現邏輯思路，圓形圖片一直存在，起初它是隱藏的，座標在(0,0)處。當我點擊了一件衣服，圓形圖片以100 milliseconds飛向我點擊的xy值，顯示圓形圖片，緊接着以1000 milliseconds飛向購物車xy值，隱藏圓形圖片。附上邏輯圖

本人新手，有不對之處，請指教。轉載請註明出處。