конечная точка sweepGradient не анимируется - PullRequest
Новая
       5

конечная точка sweepGradient не анимируется

0 голосов
/ 11 февраля 2020

Я хочу анимировать угол градиента развертки, чтобы получить эффект движущегося цвета.

Я установил начальный угол на 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),
          ),
        ),
      ),
    );
  }
}

1 Ответ

0 голосов
/ 11 февраля 2020

По сути, вы все сделали правильно.

Что вам не хватало (и это не совсем хорошо объясняется в документации), так это то, что вам нужно установить 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 .

...