# 實例：TurnBox 我們之前已經介紹過RotatedBox，但是它有兩個缺點：一是只能將其子節點以90度的倍數旋轉，二是當旋轉的角度發生變化時，旋轉角度更新過程沒有動畫。 本節我們將實現一個TurnBox，它可以以任意角度來旋轉其子節點，并且在角度發生變化時可以執行一個動畫過渡到新狀態，同時，我們可以手動指定動畫速度。 TurnBox的完整代碼如下： ``` import 'package:flutter/widgets.dart'; class TurnBox extends StatefulWidget { const TurnBox({ Key key, this.turns = .0, //旋轉的“圈”數,一圈為360度，如0.25圈即90度 this.speed = 200, //過渡動畫執行的總時長 this.child }) :super(key: key); final double turns; final int speed; final Widget child; @override _TurnBoxState createState() => new _TurnBoxState(); } class _TurnBoxState extends State<TurnBox> with SingleTickerProviderStateMixin { AnimationController _controller; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, lowerBound: -double.infinity, upperBound: double.infinity ); _controller.value = widget.turns; } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return RotationTransition( turns: _controller, child: widget.child, ); } @override void didUpdateWidget(TurnBox oldWidget) { super.didUpdateWidget(oldWidget); //旋轉角度發生變化時執行過渡動畫 if (oldWidget.turns != widget.turns) { _controller.animateTo( widget.turns, duration: Duration(milliseconds: widget.speed??200), curve: Curves.easeOut, ); } } } ``` 代碼比較簡單，我們主要是通過包裝(組合)RotationTransition來實現的。 下面我們測試一下TurnBox的功能，測試代碼如下： ``` import 'package:flutter/material.dart'; import '../widgets/index.dart'; class TurnBoxRoute extends StatefulWidget { @override _TurnBoxRouteState createState() => new _TurnBoxRouteState(); } class _TurnBoxRouteState extends State<TurnBoxRoute> { double _turns = .0; @override Widget build(BuildContext context) { return Center( child: Column( children: <Widget>[ TurnBox( turns: _turns, speed: 500, child: Icon(Icons.refresh, size: 50,), ), TurnBox( turns: _turns, speed: 1000, child: Icon(Icons.refresh, size: 150.0,), ), RaisedButton( child: Text("順時針旋轉1/5圈"), onPressed: () { setState(() { _turns += .2; }); }, ), RaisedButton( child: Text("逆時針旋轉1/5圈"), onPressed: () { setState(() { _turns -= .2; }); }, ) ], ), ); } } ``` 測試代碼運行后效果如下圖：  當我們點擊旋轉按鈕時，兩個圖標的旋轉都會旋轉1/5圈，但旋轉的速度是不同的，讀者可以自己運行一下示例看看效果。