Dart Flutter：如何从作用域模型运行动画？

Posted 2023-02-23

【中文标题】Dart Flutter：如何从作用域模型运行动画？

【英文标题】：Dart Flutter : How to run animation from a scoped-model?

【发布时间】：2018-10-03 06:21:24

【问题描述】：

如何在作为 ScopedModeldescendant 的小部件中从 scoped-model 运行动画。我在这里有一个红色按钮，单击它时会显示一个正方形。方块在 3 秒后消失，这发生得很快。我想做的是让正方形在几秒钟内消失。我尝试了 AnimationController，但它需要一个“vsync：”参数，我看到该参数通常在 initState() 中作为“vsync：this”完成，并且在其他地方使用时会出错。

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:scoped_model/scoped_model.dart';

void main() 
  runApp(new MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      title: 'scoped model Opacity',
      home: new ScopedModel<MyScopedModel>(
        model: new MyScopedModel(),
        child: new MyPage(),
      ),
    );
  


class MyScopedModel extends Model 
  double myOpacity = 0.0;
  Timer myTimer;

  AnimationController myAnimationController;

  void myShowSquare() 
    myOpacity = 1.0;
    myTimer = new Timer(new Duration(seconds: 3), _removeSquare);
    notifyListeners();
  

  void _removeSquare() 
    myOpacity = 0.0;
    myTimer.cancel();
    notifyListeners();
  


class MyPage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new Container(
        color: Colors.grey,
        child: new ScopedModelDescendant<MyScopedModel>(
          builder: (context, child, model) => new Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  new GestureDetector(
                    onTap: model.myShowSquare,
                    child: new Stack(
                      alignment: Alignment.center,
                      children: <Widget>[
                        new Container(
                          constraints: new BoxConstraints.expand(
                              width: 50.0, height: 50.0),
                          color: Colors.deepOrange,
                        ),
                        new Text(
                          '+',
                          style: new TextStyle(color: Colors.black),
                        ),
                      ],
                    ),
                  ),
                  new Opacity(
                    opacity: model.myOpacity,
                    child: new Container(
                      constraints:
                          new BoxConstraints.expand(width: 50.0, 
                                height: 50.0),
                      color: Colors.amber,
                    ),
                  )
                ],
              ),
        ));
  

【参考方案1】：

我认为您正在寻找的是FadeTransition，我相信它可以为您处理使您的小部件淡出的艰巨工作。如果您还想更改大小，也可以使用 AnimatedCrossFade 小部件。

但是，如果您想自己制作动画，我建议您查看Animation documentation 和此Animation Tutorial，因为他们将解释其工作原理的详细信息。

【讨论】：

我可以使用 FadeTransition，我还打算做其他类型的动画。好吧，我想我必须阅读动画教程。谢谢。我正在寻找是否可以实现 TickerProvider 抽象类。

如果您扩展 SingleTickerProviderStateMixin，它会使您的小部件类成为股票提供者。我认为，出于性能原因，无论哪个小部件是股票提供者，都应该包含整个动画

我使用“实现 TickerProvider”将模型类设为 TickerProvider，我不得不 @override Ticker createTicker(TickerCallback onTick) // TODO: implement createTicker 这就是我所在的位置丢失。文档没有帮助。我想我会同意您使用 TickerProviderStatemixin 扩展小部件类的建议。

对此的简单回答是创建一个new Ticker() 并返回它，但是使用 SingleTickerProviderStateMixin 应该可以满足您的需要并在适当的时间处理诸如保存和处置 Ticker 之类的事情。 SingleTickerProviderStateMixin source 可能会帮助您了解他们在那里做什么。