GIfatahTH / animator

A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.
BSD 3-Clause "New" or "Revised" License
227 stars 28 forks source link

Can it support delay/wait property ? #11

Closed zszen closed 4 years ago

GIfatahTH commented 5 years ago

can you be more explanatory! What do you mean by delay await in the context of animation.

zszen commented 5 years ago

@GIfatahTH
The animator is auto run when going into view. I want the animate delay for 500ms wait there.

SonQBChau commented 5 years ago

I would like this feature too. I find that the animator has triggerOnInit, but I don't know how to start the animation if it set to false. This is the effect I want to achieve

1_7rRMvWTms2t7FnR0kyJN3g

GIfatahTH commented 5 years ago

@SonQBChau @zszen Try this code

import 'dart:async';

import 'package:animator/animator.dart';
import 'package:flutter/material.dart';
import 'package:states_rebuilder/states_rebuilder.dart';

class InOutModel extends StatesRebuilder {
  var isFinished = false;
}

class InOutView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Injector<InOutModel>(
      models: [() => InOutModel()],
      builder: (_, __) => MaterialApp(
            home: Scaffold(
              body: _Scaffold(),
            ),
          ),
    );
  }
}

class _Scaffold extends StatelessWidget {
  final model = Injector.get<InOutModel>();
  @override
  Widget build(BuildContext context) {
    final widget = Container(
      margin: EdgeInsets.symmetric(vertical: 5, horizontal: 50),
      color: Colors.black,
      height: 40,
    );
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Animator(
          tween: model.isFinished
              ? Tween<Offset>(begin: Offset(0, 0), end: Offset(1, 0))
              : Tween<Offset>(begin: Offset(-1, 0), end: Offset(0, 0)),
          duration: Duration(milliseconds: 400),
          curve: Curves.ease,
          triggerOnInit: true,
          builder: (anim) => FractionalTranslation(
                translation: anim.value,
                child: Column(
                  children: <Widget>[widget, widget],
                ),
              ),
        ),
        Animator(
          tween: model.isFinished
              ? Tween<Offset>(begin: Offset(0, 0), end: Offset(1, 0))
              : Tween<Offset>(begin: Offset(-1, 0), end: Offset(0, 0)),
          duration: Duration(milliseconds: 800),
          triggerOnInit: true,
          curve: Curves.easeInOut,
          endAnimationListener: (animBloc) {
            model.isFinished = !model.isFinished;
            Timer(Duration(milliseconds: 500), () {
              model.rebuildStates();
            });
          },
          builder: (anim) => FractionalTranslation(
                translation: anim.value,
                child: widget,
              ),
        ),
      ],
    );
  }
}
SonQBChau commented 5 years ago

@GIfatahTH thanks for the sample code, it works