如何实现动画，比如在flutter中关闭电影字幕？

Question

我想制作动画滚动视图，就像在flutter中关闭电影字幕一样。我就是这么做的。

​

​

这就是我想做的。

​

​

我的代码是：

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到达它的末尾时。它会停止滚动。但在第二个视频示例中，文本永远不会停止滚动。它一直移动到太空，直到变得非常小。

Answer 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),
      ),
    )
  )
)