sweepGradient 终点不是动画

Question

我想设置扫描渐变角度的动画，这样我就可以实现移动的颜色效果。

我将起始角度设置为 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

基本上你做对了。

您遗漏的（并且在文档中没有很好地解释）是您需要在 SweepGradient 上设置 TileMode 以获得预期结果。

这是一个工作示例：

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.

的文档

sweepGradient 终点不是动画

sweepGradient end point is not animating

flutter

flutter-layout

flutter-animation