根據動畫的內容，需要把它分成幾部分：
其中的動畫，其實只涉及氣缸，左側的發動機主檢視是氣缸上下運動，右側的發動機側檢視是氣缸的上下運動外加連桿的左右旋轉
拆分了結構，下面就來布局，這裡面大量使用了container
這麼多部件疊在一起，所以很直觀的就想到了stack widget，建立乙個容器container，然後child是stack，上面說的各個部件，都放在stack裡，並通過position來指定位置
發動機上蓋
發動機上蓋是個長方形container，通過decoration設定了上部的兩個圓角，以及灰色的背景色。還有就是需要在上蓋上，掏出四個空間，來放置氣缸。
氣缸和連桿
氣缸和連桿，使用的是乙個column來封起來幾個container，氣缸用了5個container來實現活塞環的效果，連桿細長，並且底部有圓角 動畫我們下一節說
曲軸曲軸分成幾部分：曲軸主軸，每個活塞拉桿的連線部分，連線部分包括兩個片狀container和中間的掏空部分（掏空其實就是設定成背景顏色，看起來是掏空的）
這裡只有氣缸和連桿需要有動畫，實現了乙個氣缸的動畫，那四個氣缸也差不多了
活塞的上下運動很簡單，運用補間動畫tween，讓他的值從0～2*pi之間變化，通過sin函式，就可以實現活塞的往復運動
top: shellheight -
cylinderheight -
crankshaftradius -
crankshaftradius * sin(positiontween.evaluate(animation)),
複製**
右側發動機側檢視的連桿旋轉著實費了些腦筋，倒不是動畫困難，而是曲軸往復運動，與連桿的旋轉角度之間的關係，最後通過測試，發現從0～pi的時候，線性旋轉，pi～2*pi的時候，三角函式旋轉，擬合度比較高，至於旋轉的方法，使用transform widget
transform(
transform:
matrix4.rotationz(connectrodangle(maxangle, positiontween.evaluate(animation))),//旋轉角度
alignment: alignment.topcenter,
child: container(
height: connectrodheight,
width: connectrodwidth,
decoration: boxdecoration(
color: cylindercolor,
borderradius: borderradius.only(
bottomleft: radius.circular(connectrodwidth / 2),
bottomright: radius.circular(connectrodwidth / 2))),),)
複製**
const engineheight = 170.0;
const shellwidth = 200.0;
const shellwidthleft = 70.0;
const shellheight = 100.0;
const shellpadding = 12.0;
const cylinderheight = 18.0;
const cylinderwidth = 35.0;
const connectrodheight = 60.0;
const connectrodwidth = 6.0;
const crankshaftradius = 20.0;
const crankshaftradiuswithborder = crankshaftradius + 3;
const crankshaftrodradius = 5.0;
const crankshaftflatwidth = 4.0;
const cylindercount = 4;
const shellcolor = colors.grey;
const backgroundcolor = colors.yellow;
const cylindercolor = colors.red;
const crankshaftcolor = colors.grey;
複製**
Flutter 動畫使用
效果預覽 旋轉動畫 透明度變換動畫 在android中，可以通過view.animate 對檢視進行動畫處理，那在flutter中怎樣才能對widget進行處理 在flutter中，可以通過動畫庫給widget新增動畫。在android中，您可以通過xml建立動畫或在檢視上呼叫.animate 在f...
Flutter 動畫使用
旋轉動畫 透明度變換動畫 在android中，可以通過view.animate 對檢視進行動畫處理，那在flutter中怎樣才能對widget進行處理 在flutter中，可以通過動畫庫給widget新增動畫。在android中，您可以通過xml建立動畫或在檢視上呼叫.animate 在flutte...
Flutter 動畫入門
flutter動畫基本與前端動畫一致，都是在一定時間內，將乙個值變到另乙個值，利用這個值的變化來實現對介面的控制。class myhomepage extends statefulwidget super key key override myhomepagestate createstate my...