sweepGradient端点未设置动画

Question

我想为Sweep渐变角设置动画，以便获得动态色彩效果。

我将起始角度设置为0，并将该角度设置为2 * math.pi。而我是在2 * math.pi声明终止角度并将其动画化为4 * math.pi;

当我这样做时，开始角度是动画，但结束角度不是动画。

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

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

class _DeleteState extends State<Delete> with SingleTickerProviderStateMixin {
  Animation<double> _animation;
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 5));
    _animation = Tween<double>(begin: 0, end: 2 * math.pi).animate(_controller)
      ..addListener(() {
        print(_animation.value);

        setState(() {});
      });

    _controller.repeat();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('hello'),
      ),
      body: Container(
        width: 180,
        height: 180,
        padding: EdgeInsets.all(20.0),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          gradient: SweepGradient(
            colors: [
              Colors.blue,
              Colors.green,
              Colors.yellow,
              Colors.red,
              Colors.blue
            ],
            //  stops: [0.0, 0.25, 0.5, 0.75, 1],
            center: Alignment(-0.35, -0.35),
            startAngle: _animation.value,
            endAngle: _animation.value + (2 * math.pi),
          ),
        ),
      ),
    );
  }
}

Answer 1

基本上您做对了。

您所缺少的（并且在文档中没有很好地解释，是您需要在TileMode上设置SweepGradient才能获得预期的结果。

这是一个有效的示例：

class Delete extends StatefulWidget {
  Delete({Key key}) : super(key: key);

  @override
  _DeleteState createState() => _DeleteState();
}

class _DeleteState extends State<Delete> with SingleTickerProviderStateMixin {
  Animation<double> _animation;
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 5));
    _animation = Tween<double>(begin: 0, end: 2 * math.pi).animate(_controller)
      ..addListener(() {
        setState(() {});
      });

    _controller.repeat();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('hello'),
      ),
      body: Container(
        width: 180,
        height: 180,
        padding: EdgeInsets.all(20.0),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          gradient: SweepGradient(
            colors: [Colors.blue, Colors.green, Colors.yellow, Colors.red, Colors.blue],
//              stops: [0.0, 0.25, 0.5, 0.75, 1],
            center: Alignment(-0.35, -0.35),
            startAngle: _animation.value,
            endAngle: _animation.value + (2 * math.pi),
            tileMode: TileMode.repeated,
          ),
        ),
      ),
    );
  }
}

您可以找到TileMode here的文档。