Flutter動畫的簡單使用

Flutter動畫的簡單使用

Flutter的動畫咱們要記住三個點，AnimationController、 Thween、Forward()，一個簡單的動畫就是由這三個組成的

AnimationController：AnimationController用於控制動畫，開始、反向播放、暫停等等都是由AnimationController來控制的，Controller會在每一幀都生成出一個新的值

AnimationController({
  double value,
  this.duration,
  this.reverseDuration,
  this.debugLabel,
  this.lowerBound = 0.0,
  this.upperBound = 1.0,
  this.animationBehavior = AnimationBehavior.normal,
  @required TickerProvider vsync,
})
複製代碼

value:每一幀生成出來的值
duration:動畫持續的時間
lowerBound、upperBound:生成出來的數字區間，AnimationController在動畫期間會線性的生成出數字區間
vsync：接收一個TickerProvider，用來防止屏幕外動畫（指動畫不在屏幕內時-鎖屏這也算）消耗沒必要要的資源；Flutter在啓動的時候會綁定一個SchedulerBinding，經過SchedulerBinding能夠給每一次屏幕刷新一次回調，Ticker就是經過SchedulerBinding來添加屏幕刷新回調的，每次屏幕刷新都會調用到TickCallBack
簡單的使用方法以下：咱們設定了一個10秒的動畫控制器，我對vsync傳入this是由於我with了SingleTickerProviderStateMixin

AnimationController controller= AnimationController(vsync: this,duration: Duration(seconds: 10));
複製代碼

Tweed:咱們使用AnimationController能夠線性的生成出一段數字區間，可是若是咱們要生成的是顏色呢？或者其餘的呢？那咱們能夠使用Tweed來作到了，Thweed除了數字外還有其餘的子類能夠供咱們使用，Tween若是要使用還須要調用animatie傳入一個Animation

注意：color的就用ColorTween，要對應上，若是想要設置Color，卻用Tween，會報錯

Animation anmitiontween= ColorTween(begin:Colors.transparent,end:Colors.blue).animate(curved)..addListener((){
  setState(() {

  });
});
複製代碼

具體有哪些能夠用Tweed以下：

Curve:動畫的過程能夠是勻速的，能夠是加速，能夠是減速，或者先加後減，或者先減後加等等，你想怎麼玩就怎麼玩，速度咱們都是能夠經過CurvedAnimation來去設置他的曲線，Curve類給咱們提供了一些曲線，若是這其中不能知足咱們，咱們能夠本身去自定義曲線，繼承Curve，而後實現他的方法，返回一個double

• 使用Curve提供給咱們的方法：

CurvedAnimation curved=CurvedAnimation(parent: controller, curve: Curves.bounceIn);
//使用CurvedAnimation能夠將一個Controller與curve結合起來生成一個新的動畫對象
複製代碼

• 本身去定義Curve方法：

class ShakeCurve extends Curve {
  @override
  double transform(double t) {
    return math.sin(t * math.PI * 2);
  }
}
複製代碼

咱們在實際開發中，一些通用的動畫最好抽取出來，作成AnimationUtils,避免寫一些重複的動畫代碼
下面是一個顏色漸變的動畫的核心代碼

AnimationController controller;

  Animation anmitiontween;

  CurvedAnimation curved;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

   controller= AnimationController(vsync: this,duration: Duration(seconds: 5));
   
// curved=CurvedAnimation(parent: controller, curve: Curves.bounceIn);

   anmitiontween= ColorTween(begin:Colors.transparent,end:Colors.red).animate(controller)..addListener((){
     setState(() {

     });
   });
   controller.forward();

  }

  @override
    Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("CCCC"),
      ),
      body: Center(
        child: GestureDetector(
          child: Container(
            width: 100.0,
            height: 100.0,
            child: Text("111"),
            color: anmitiontween.value==null?Colors.transparent:anmitiontween.value,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    controller.dispose();
  }
複製代碼

效果以下：