前言
前段時間學習Flutter動畫時接觸了Transform類，查詢官方文件時無意間看到了時鐘翻頁動畫覺得也挺好玩的，所以就想知道自己動手使用動畫和Transform來實現翻頁特效。
思路
開始前自己也思考過如果實現翻頁動畫，但實際操作時卻發現思路不太正確最後只好作罷。還是參考了已有翻頁實現方式才知道其實方法很簡單，通過Transform對數字上部分進行矩陣變化操作實現頁面翻轉效果。下面通過圖片繪製更好的解釋實現過程。
圖解
下圖所展示內容是從橫切面看到的效果圖。正常情況下是從示例圖左邊到右邊的檢視視角?。
|
|
|
|
|
|
|
|
|
- STEP1
首先可以使用ClipRect元件將數字分割成兩部分。A、D分別代表用ClipRect分割數字上部分和數字下部分，並且用A和D來顯示翻頁的下一個數字。C和B則顯示當前準備翻轉的數字。開始時我們看到就是C和B組成的數字。 - STEP2
然後C使用Transform對C進行變形處理達到向上翻轉動畫效果：setEntry進行變形處理，rotateX向X軸做旋轉操作，翻轉角度為90度。 - STEP3
接著當C旋轉90度的過程中底部A數字上部分就慢慢呈現出來。當C旋轉到90度之後，開始是垂直不可見的D也進行90度向X軸旋轉操作。這個過程中上個數字的下部分B就慢慢被遮蓋。 - STEP4
最後D旋轉了90度後，當前整個動畫週期結束當前數字顯示就是下一個值了。最終同時將A、B、C、D分別更改為下次需要顯示的數值並將C、D重置回原來的位置進行下一輪動畫。
程式碼部分
- 數字分割部分
ClipRect(
child: Align(
alignment: _alignment,
heightFactor: 0.5,
child: Container(
alignment: Alignment.center,
width: 100,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
child: Text(
"$_value",
style: TextStyle(
fontSize: 80,
color: Colors.white,
fontWeight: FontWeight.w700,
),
),
),
),
)
複製程式碼- 數字整體
Column(
mainAxisSize: MainAxisSize.min,
children: [
Stack(
children: <Widget>[
//下一個數字的上部分
ClipRectText(_stateNum + 1, Alignment.topCenter),
//當前數字的上部分，當_isReversePhase為true時和平面呈90度角相當於隱藏
Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.006)
..rotateX(_isReversePhase ? pi / 2 : _animation.value),
alignment: Alignment.bottomCenter,
child: ClipRectText(_stateNum, Alignment.topCenter)),
],
),
Padding(
padding: EdgeInsets.only(top: 2.0),
),
Stack(
children: <Widget>[
//當前數字的下部分
ClipRectText(_stateNum, Alignment.bottomCenter),
//下個數字的下部分，當_isReversePhase為true時才執行翻轉動畫否則一直和平面呈90度
Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.006)
..rotateX(_isReversePhase ? -_animation.value : pi / 2),
alignment: Alignment.topCenter,
child: ClipRectText(_stateNum + 1, Alignment.bottomCenter)),
],
)
],
)
複製程式碼- 動畫實現
_controller = new AnimationController(
duration: Duration(milliseconds: 450), vsync: this)
..addStatusListener((status) {
//動畫正向執行,正向執行結束後進行反向執行
if (status == AnimationStatus.completed) {
_controller.reverse();
_isReversePhase = true;
}
//動畫反向執行，反向執行結束後一次動畫翻轉週期結束。當前數字更新到最新的
if (status == AnimationStatus.dismissed) {
_isReversePhase = false;
_stateNum += 1;
}
})
..addListener(() {
setState(() {});
});
//動畫數值使用0度角到90度角
_animation = Tween(begin: _zeroAngle, end: pi / 2).animate(_controller);
複製程式碼- 動畫觸發條件
@override
void didUpdateWidget(FlipNumText oldWidget) {
//當元件的數字num發生改變時執行動畫控制器
if (this.widget.num != oldWidget.num) {
_controller.forward();
_stateNum = oldWidget.num;
}
super.didUpdateWidget(oldWidget);
}
複製程式碼最後
翻頁動畫效果實現中很多運用到了數學演算法。如Pi角度、Transform的2D、3D變換、Matrix矩陣使用等都離不開數學計算。目前對於Matrix還只停留在使用上，後續需要深入理解其原理才能更好的運用。同時也希望有小夥伴一起交流共同進步??。