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

Posted

技术标签:

【中文标题】补间动画和动画控制器之间的区别【英文标题】:Difference between Animation Tween and Animation Controlller 【发布时间】:2019-06-27 00:10:27 【问题描述】:

在一些 Flutter 动画教程中,有些使用了 TweenAnimation 对象。有些只使用AnimationController。下面的两个代码似乎都输出相同的结果。那么我们什么时候使用 Tween 和动画,什么时候只使用 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,
        ),
      ),
    );
  

没有补间和动画

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

  

  @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: _animationController, //here is the difference
      child: InkWell(
        onTap: ()
          if(faded)
            faded = false;
            _animationController.reverse();
          else
            faded = true;
            _animationController.forward();
          
        ,
        child: new Container(
          color: Colors.red,
        ),
      ),
    );
  

【问题讨论】:

【参考方案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),
              ),
              ...

我的代码结果是:

结论

AnimationController是动画的长度,如何控制时间、上下边界,如何控制数据的时间、长度、顺序等,而AnimationTween 用于动画的范围,包括时间、颜色、范围、序列等,只要动画是 while。

【讨论】:

【参考方案2】:

Tweens 是用于转换动画输出的对象(例如 AnimationController)。

对于AnimationController,您通常有一个 0-1 的浮点值。但你很少想要那样。 Tweens 允许将 0-1 映射到更具体的东西,例如红色到蓝色,从左到右,...

【讨论】:

_animationController = new AnimationController( vsync: this, lowerBound: 0.0, value: 20.0, upperBound: 500.0, duration: new Duration(seconds: 1), ); _animationController.animateTo(300.0); 我已经看到我们可以使用animationController获得超过0-1的值 是的,但是补间可以映射到非双精度值。

以上是关于补间动画和动画控制器之间的区别的主要内容,如果未能解决你的问题,请参考以下文章

在flash里面形状动画和补间动画有啥区别?

Android中补间动画和属性动画

android中补间动画怎样循环执行

Android 中的动画有哪几类,它们的特点和区别是啥

04.Android之动画问题

android高级UI之补间动画和属性动画