Android?Flutter如何實現3D動畫效果

這篇文章主要講解了“Android Flutter如何實現3D動畫效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Android Flutter如何實現3D動畫效果”吧！

AnimatedWidget 簡介

AnimatedWidget是一個抽象的 StatefulWidget， 構造方法如下所示。

const AnimatedWidget({
    Key? key,
    required this.listenable,
  }) : assert(listenable != null),
       super(key: key);

主要在于接收一個 listenable 參數，通常會是 Animation 對象。在 AnimatedWidget 內部的_AnimatedState 類中，會添加該對象變化監聽回調，進而刷新界面。

class _AnimatedState extends State<AnimatedWidget> {
  @override
  void initState() {
    super.initState();
    widget.listenable.addListener(_handleChange);
  }

  @override
  void didUpdateWidget(AnimatedWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.listenable != oldWidget.listenable) {
      oldWidget.listenable.removeListener(_handleChange);
      widget.listenable.addListener(_handleChange);
    }
  }

  @override
  void dispose() {
    widget.listenable.removeListener(_handleChange);
    super.dispose();
  }

  void _handleChange() {
    setState(() {
      // The listenable's state is our build state, and it changed already.
    });
  }
  
  // ...
}

可以看到，只需要將 Animation 對象傳給 AnimatedWidget 對象后，就不需要我們之前那樣自己寫 addListener 之類的處理了。而整個動畫可以交給外部其他對象來控制，從而實現動畫組件的復用。

3D 旋轉動畫的實現

3D 旋轉的實現比較簡單，在 Container 組件有兩個參數控制轉換（transform），分別是：

• transform：Matrix4對象，可以實現圍繞 X、Y、Z軸的旋轉、平移，以及變形等效果。關于 Matrix4涉及到很多矩陣運算和線性代數的知識，可以參考 Matrix4的源碼自行溫習一下大學的數學知識。

• transformAlignment：轉換的對齊方式，可以理解為起點位置，可以使用 Alignment 對象來設置。

有了這個基礎，我們就可以定義3D 旋轉動效了，我們定義一個通用的組件，ThreeDAnimatedWidget：

class ThreeDAnimatedWidget extends AnimatedWidget {
  final Widget child;
  const ThreeDAnimatedWidget(
      {Key? key, required Animation<double> animation, required this.child})
      : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;

    return Center(
      child: Container(
        transform: Matrix4.identity()
          ..rotateY(2 * pi * animation.value)
          ..setEntry(1, 0, 0.01),
        transformAlignment: Alignment.center,
        child: child,
      ),
    );
  }
}

這里我們設置的是圍繞中心點繞 Y 軸旋轉，并使用 setEntry 設置了一定的傾斜角 （這會更有立體感）。實際我們也可以設置圍繞 X 軸或 Z 軸旋轉。接下來就是這個動畫組件的應用了，我們構建一個帶有陰影的文字（看起來像立體字）作為這個動畫的子組件，其他的控制和上一篇的是類似的，完整代碼如下：

class AnimatedWidgetDemo extends StatefulWidget {
  const AnimatedWidgetDemo({Key? key}) : super(key: key);

  @override
  _AnimatedWidgetDemoState createState() => _AnimatedWidgetDemoState();
}

class _AnimatedWidgetDemoState extends State<AnimatedWidgetDemo>
    with SingleTickerProviderStateMixin {
  late Animation<double> animation;
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(seconds: 3), vsync: this);
    animation = Tween<double>(begin: 0.0, end: 1.0).animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedWidget 動畫'),
      ),
      body: ThreeDAnimatedWidget(
        animation: animation,
        child: Text(
          '島上碼農',
          style: TextStyle(
            fontSize: 42.0,
            color: Colors.blue,
            fontWeight: FontWeight.bold,
            shadows: [
              Shadow(
                  blurRadius: 2,
                  offset: Offset(2.0, 1.0),
                  color: Colors.blue[900]!),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_arrow, color: Colors.white),
        onPressed: () {
          if (controller.status == AnimationStatus.completed) {
            controller.reverse();
          } else {
            controller.forward();
          }
        },
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

可以看到，這個 ThreeDAnimatedWidget 可以做到復用了，在需要這樣動效的場景里，按照上面的方式給它傳入 Animation 對象和子組件就可以了。例如我們將文字修改為一張圖片。

//...
body: ThreeDAnimatedWidget(
  animation: animation,
  child: Image.asset(
    'images/avatar.jpg',
    width: 100,
    height: 100,
  ),
),
//...

感謝各位的閱讀，以上就是“Android Flutter如何實現3D動畫效果”的內容了，經過本文的學習后，相信大家對Android Flutter如何實現3D動畫效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！