Question

在某些Flutter动画教程中，有些使用SyncrhonizationContext.Post和Tween对象。有些仅使用Animation。下面的两个代码似乎输出相同的结果。那么我们何时在动画中使用Tween，何时仅使用AnimationController？

具有补间和动画

AnimationController

没有补间和动画

import 'dart:core';
import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _State createState() {
    return _State();
  }
}

class _State extends State<Test> with TickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;
   bool faded = true;
  @override
  void initState() {
    super.initState();
    _animationController = new AnimationController(
        value:0.0,
        vsync: this,
        upperBound: 1.0,
        lowerBound: 0.0,
      duration: new Duration(seconds:1),
    );
    _animation = Tween(begin: 0.0, end: 1.0).animate(_animationController);

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        elevation: 0.5,
        title: new Text(
          "Testing views",
          style: Theme.of(context).textTheme.title,
        ),
      ),
      body: _buildBodyAnimationTest(),
//      body:  _buildTuto(),
    );
  }
  Widget _buildBodyAnimationTest(){
    return FadeTransition(
      opacity: _animation, //here is the difference
      child: InkWell(
        onTap: (){
          if(faded){
            faded = false;
            _animationController.reverse();
          }else{
            faded = true;
            _animationController.forward();
          }
        },
        child: new Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

Answer 1

背景是我的补间序列颜色。

Animatable<Color> background = TweenSequence<Color>(
      [
        TweenSequenceItem(
          weight: 1.0,
          tween: ColorTween(
            begin: colors[_Substance.dayEndBackground],
            end: colors[_Substance.dayStartBackground],
          ),
        ),
        TweenSequenceItem(
          weight: 1.0,
          tween: ColorTween(
            begin: colors[_Substance.dayStartBackground],
            end: colors[_Substance.dayEndBackground],
          ),
        ),
      ],
    );

这是我在initState()中定义的控制器，并且每秒钟更新一次：

bgUpdateController = AnimationController(
      value: _currentDateTime.hour / 24,
      upperBound: 1,
      lowerBound: 0,
      duration: const Duration(hours: 24),
      vsync: this,
    )..repeat();

我将上述背景和控制器用作AnimatedBuilder，如下所示：

AnimatedBuilder(
      animation: bgUpdateController,
      builder: (context, child) {
        return Scaffold(
          backgroundColor: background
              .chain(
                CurveTween(curve: Curves.easeInOutCirc),
              )
              .evaluate(
                AlwaysStoppedAnimation(bgUpdateController.value),
              ),
              ...

我的代码的结果是：

clock demo

结论

AnimationController 用于动画的持续时间以及如何从时间，上下边界进行控制，如何使用时间，长度，序列等来控制数据，而 AnimationTween < / strong>用于表示动画的时间，颜色，范围，序列等范围，只要动画持续的时间即可。

Answer 2

吐温被对象用于转化动画的输出（例如AnimationController）。

对于AnimationController，您通常具有0-1浮动值。但是你很少想要那个。吐温允许到0-1，以更具体的东西，例如映射为红色到蓝色，左到右，...

动画补间和动画控制器之间的区别

2 个答案: