flutter - 无法 'forward ' flutter 动画

标签 flutter dart flutter-animation

我有这段代码,当按下开始/停止按钮时,它使用 AnimationController Tween 沿Z轴旋转容器。问题是它仅在第一次之后才转发动画,无论我按下按钮多少次它都无济于事,并且容器保持静止。
curveanimation.dart 具有所有动画逻辑

import 'package:flutter/material.dart';
import 'dart:math' as math;


class CurvedAnimationExample extends StatefulWidget {
  CurvedAnimationExample({Key key}) : super(key: key);
  @override
  CurvedAnimationExampleState createState() => CurvedAnimationExampleState();
}

class CurvedAnimationExampleState extends State<CurvedAnimationExample>
    with SingleTickerProviderStateMixin {
  Animation<double> _animation;
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();

    _animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 5))
          ..addListener(() {
            setState(() {});
          });

    final Animation curve =
        CurvedAnimation(parent: _animationController, curve: Curves.easeIn);

    _animation = Tween<double>(begin: 0, end: math.pi * 2).animate(curve);
  }

  void startStopAnimation() {                      
    print(_animationController.isAnimating.toString());
    if (_animationController.isAnimating)
      _animationController.stop();
    else {
      _animationController.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Transform(
          alignment: Alignment.center,
          transform: Matrix4.identity()..rotateZ(_animation.value),
          child: Container(
            color: Colors.pinkAccent,
            width: 200,
            height: 200,
          ),
        ),
        RaisedButton(
          child: const Text("Start/Stop Animation"),
          elevation: 15,
          color: Colors.blueGrey,
          onPressed: () => startStopAnimation(),
        )
      ],
    ));
  }

  @override
  void dispose() {
    _animationController.dispose();
    print("Curved Animation Example : dispose is called");
    super.dispose();
  }
}

main.dart 文件
import 'package:flutter/material.dart';
import 'curvesanimations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomeScaffold(
        title: "Curved Animation Example",
      ),
    );
  }
}

class MyHomeScaffold extends StatelessWidget {
  final String title;
  MyHomeScaffold({this.title});
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: CurvedAnimationExample(),
      ),
    );
  }
}

最佳答案

这是因为您的动画已经到达其端点。一旦到达终点,您将无法继续前进。一个简单的解决方法是检查动画是否已经在端点处,如果是,则将其重置为开始处:

void startStopAnimation() {                      
    print(_animationController.isAnimating.toString());
    if (_animationController.isAnimating)
      _animationController.stop();
    else {
      print("forward");
      if(_animationController.isCompleted) {//Check if animation is at endpoint
        _animationController.value = 0;
      }
      _animationController.forward();
    }
  }

关于flutter - 无法 'forward ' flutter 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63632967/

相关文章:

json - 解析 JSON API 响应

firebase - *运行Gradle时出错:ProcessException:进程 “E:\Flutter\login_demo\android\gradlew.bat”异常退出:

firebase - 如何使用 flutter 和 firebase 将 'Read' 功能添加到消息传递应用程序中

flutter - 如何制作 marquee flutter 图像小部件

flutter - 小部件的尺寸放大动画

flutter - flutter 地播放 Assets 中的视频

sockets - 如何响应 Dart 上的套接字

dart - 在 Dart 单元测试中,如何模拟或验证打印调用?

ios - Flutter Spinkit 进度指示器

dart - 使用 json_serializable 包生成 dart 文件