如何实现动画，如关闭电影学分？答案

【问题标题】：How to implement animation like closing movie credits in flutter?如何实现动画，如关闭电影学分？
【发布时间】：2020-01-18 12:28:00
【问题描述】：

我想制作动画滚动视图，例如关闭电影学分。这就是我做的。

这就是我想做的。

我的代码是：

import 'package:flutter/material.dart';

class AutoScrollPage extends StatefulWidget {
  @override
  AutoScrollPageState createState() => AutoScrollPageState();
}

class AutoScrollPageState extends State<AutoScrollPage> with TickerProviderStateMixin {
  ScrollController _scrollController = ScrollController();
  bool scroll = true;
  int speedFactor = 20;


  _scroll() {
    double maxExtent = _scrollController.position.maxScrollExtent;
    double distanceDifference = maxExtent - _scrollController.offset;
    double durationDouble = distanceDifference / speedFactor;

    _scrollController.animateTo(_scrollController.position.maxScrollExtent,
        duration: Duration(seconds: durationDouble.toInt()),
        curve: Curves.linear);
  }

@override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _scroll();
    });
    super.initState();
  }

    @override
  void dispose() {
    ///Don't forget to clean up resources when you are done using it
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    String val = '''
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
''';
    return Scaffold(
      backgroundColor: Colors.black,
      body: SingleChildScrollView(
          controller: _scrollController,
          child: Text(
            val,
            maxLines: 1000,
            style: TextStyle(color: Colors.yellow, fontSize: 25.0),
          ),
        ),
    );
  }
}

注意：当我的 ScrollView 到达终点时。它停止滚动。但在第二个视频示例中，文本永远不会停止滚动。它正在进入太空，直到变得非常小。

【问题讨论】：

标签： animation flutter scrollview transform

【解决方案1】：

您可以为此使用 Transform 小部件。

用 Transform Widget 包裹你的 SingleChildScrollView 并使用 transform 属性来旋转它。

查看下面的代码或查看 DartPade ClosingMovieCredits 的运行示例代码

Transform(
  transform: Matrix4.identity()
     ..setEntry(3, 2, 0.002)
     ..rotateX(-0.7),
  alignment: FractionalOffset.center,
  child: SingleChildScrollView(
     controller: _scrollController,
     child: Text(
        val,
        maxLines: 1000,
        style: TextStyle(color: Colors.yellow, fontSize: 25.0),
      ),
    )
  )
)

【讨论】：