Как добавить две разные анимации с разной продолжительностью в Flutter? - PullRequest
Новая
       6

Как добавить две разные анимации с разной продолжительностью в Flutter?

0 голосов
/ 23 января 2020

У меня есть следующий код анимации любого widget

import 'dart:async';
import 'package:flutter/material.dart';

class AnimElasticOut extends StatefulWidget {
  final Widget child;
  final int delay;
  final Key key;
  final startAnimation;

  AnimElasticOut(
      {@required this.key,
      @required this.child,
      this.delay,
      this.startAnimation});

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

class AnimElasticOutState extends State<AnimElasticOut>
    with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;
  int duration = 1000;

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

    controller = AnimationController(
        vsync: this, duration: Duration(milliseconds: duration));

    animation = CurvedAnimation(
      parent: controller,
      curve: Curves.elasticOut,
    );

    if (widget.startAnimation != null) {
      if (widget.delay == null) {
        controller.forward();
      } else {
        Timer(Duration(milliseconds: widget.delay), () {
          controller.forward();
        });
      }
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      child: widget.child,
      scale: animation,
    );
  }
}

Пример использования 

AnimElasticOut(
                        key: counterElasticOutKey,
                        child: Container(
                          height: 35,
                          padding: EdgeInsets.only(
                              left: 5, top: 5, bottom: 5, right: 15),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              Icon(
                                Icons.add_alarm,
                                color: Colors.amber,
                              ),
                              SizedBox(
                                width: 10,
                              ),
                              Counter(
                                key: counterKey,
                              ),
                            ],
                          ),
                        ),
                      ),

Я запускаю анимацию, используя следующий код. 

counterElasticOutKey.currentState.controller.forward(from: 0);

Теперь он прекрасно анимирует виджет.

У меня также есть другой код для реверсирования анимации. 

counterElasticOutKey.currentState.controller.reverse();

Я хочу использовать другую анимацию при реверсировании. Также какая-то другая продолжительность. Например, я хочу Curves.easeInOutCubic в качестве кривой анимации с продолжительностью milliseconds: 500

Как я могу это сделать?

1 Ответ

0 голосов
/ 24 января 2020

Есть свойство reverseDuration в AnimationController & reverseCurve в Animation<T>

    controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 1000),
      reverseDuration: Duration(milliseconds: 250),
    );

    animation = CurvedAnimation(
      parent: controller,
      curve: Curves.elasticOut,
      reverseCurve: Curves.easeInQuad,
    );
...