Цепочка отдельных анимаций, которые работают с одинаковыми свойствами - PullRequest
Новая
       15

Цепочка отдельных анимаций, которые работают с одинаковыми свойствами

1 голос
/ 05 июля 2019

Я посмотрел на Пошаговые анимации для создания цепочек анимаций, но там они используют одну анимацию для свойств одного виджета, например, анимация непрозрачности контролирует появление, но что, если я хочу сначала добавить, а затем исчезнуть тот же виджет? Я имею в виду, что я уже создал постепенное исчезновение в анимации, и это используется для значения непрозрачности виджета как это: 

_opacityDontWorry = Tween(
  begin: 0.0,
  end: 1.0,
).animate(
  CurvedAnimation(parent: _animationController, curve: Interval(0.0, 0.75, curve: Curves.easeIn)),
);

так что эти двое теперь связаны вместе вот так: 

Opacity(
  opacity: _opacityDontWorry.value,
  child: Text("Don't worry"),
)

Эта работа прекрасно работает, и моя Непрозрачность исчезает, но после того, как она исчезает, я бы хотел, чтобы она исчезла после короткой паузы, но как я могу это сделать? Создать новый Tween и переписать _opacityDontWorry с этим, или? Я даже на правильном пути здесь, как мне объединить несколько анимаций, которые изменяют одни и те же свойства в виджете?

Спасибо
Сёрен

1 Ответ

1 голос
/ 05 июля 2019

Вы можете использовать addStatusListener на вашем Animation. Проверьте, когда анимация завершена, и затем наберите reverse() на вашем AnimationController.

Если хотите, вы можете позвонить reverse() внутри Future.delayed(), чтобы сделать паузу.

Я сделал этот пример для вас: 

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  AnimationController _animationController;
  Animation _opacityDontWorry;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(duration: Duration(seconds: 1), vsync: this);
    _opacityDontWorry = Tween(
      begin: 0.0,
      end: 1.0,
    ).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.easeIn),
    )..addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        Future.delayed(Duration(seconds: 3), () {
          _animationController.reverse();
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton.extended(
        label: Text('Animate'),
        onPressed: () => _animationController.forward(),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _opacityDontWorry,
          builder: (context, widget) {
            return Opacity(
              opacity: _opacityDontWorry.value,
              child: Text("Don't worry"),
            );
          },
        ),
      ),
    );
  }
}

UPDATE

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

  _firstAnimation = Tween(
    begin: 0.0,
    end: 1.0,
  ).animate(
    CurvedAnimation(parent: _animationController, curve: Interval(0.0, 0.20, curve: Curves.easeIn)),
  )..addListener(() {
      setState(() => _opacity = _firstAnimation.value);
    });

  // Leave an interval pause if you need
  _secondAnimation = Tween(
    begin: 1.0,
    end: 0.0,
  ).animate(
    CurvedAnimation(parent: _animationController, curve: Interval(0.40, 0.60, curve: Curves.easeIn)),
  )..addListener(() {
      setState(() => _opacity = _secondAnimation.value);
    });

В свойстве opacity вашего виджета вместо использования _firstAnimation.value используйте _opacity.

...