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

标签： flutterflutter-layoutflutter-animation

Answer 1

基本上你做对了。

您所缺少的（并且在文档中没有完全解释清楚）是您需要TileMode在您的设备上设置 aSweepGradient以获得预期的结果。

这是一个工作示例：

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 您可以在此处找到文档。