A library for handling animation warmup generically

Last update: Nov 19, 2022

Related tags

Overview

warmup_routine

A library for handling animation warmup generically as discussed in: https://github.com/flutter/flutter/issues/76180

This solution is not very scalable for applications with many animations to warm up and is meant mostly as an example of an approach applications could take to warmup their animations until a more permanent solution is available.

Usage

Warmup overlay

The most common way to warmup animations is to use a pseudo splash screen that executes the animations while the application is starting up.

import 'package:warmup_routine/warmup_overlay.dart';
import 'package:warmup_routine/warmup_animation.dart';

// Example of showing an overlay under which the animations are executing.
class WarmupOverlayExample extends StatefulWidget {
  _WarmupOverlayExampleState createState() => _WarmupOverlayExampleState();
}

class _WarmupOverlayExampleState extends State<WarmupOverlayExample> {
  bool _shouldShowOverlay = true;

  @override
  Widget build(BuildContext context) {
    if (_shouldShowOverlay) {
      return WarmupOverlay(
        onComplete: () {
          setState(() {
            _shouldShowOverlay = false;
          });
        },
        builder: (context) {
          return Container(
            child: Center(
              child: CircularProgressIndicator(),
            ),
          );
        },
        animations: [
          WarmupAnimation(
            builder: (context, complete) {
              // Replace with your animation of choice
              return OpenContainerAnimation(onComplete: complete);
            },
            repeat: 4,
          ),
        ],
      );
    }
  } else {
    // Start rest of application
    MyApp();
  }
}

Warmup routine

If an overlay is not desired, a warmup routine can be executed anywhere in your existing directly:

class WarmupRoutineExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WarmupRoutine(
      animations: [
        WarmupAnimation(
          builder: (context, complete) {
            // Replace with your animation of choice
            return OpenContainerAnimation(onComplete: complete);
          },
          repeat: 4,
        ),
      ],
      onComplete: () {
        // Start rest of application
      },
    );
  }
}

Navigator example

// The overlay will remain on top of the application above navigation events, so Navigator.push/pop
// can be warmed up as well:

class NavigationWarmupScreen extends StatefulWidget {
  final Function onComplete;

  NavigationWarmupScreen({@required this.onComplete});

  _NavigationWarmupScreenState createState() => _NavigationWarmupScreenState();
}

class _NavigationWarmupScreenState extends State<NavigationWarmupScreen> {
  initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (BuildContext context) {
            return YourWidget();
          },
          fullscreenDialog: true,
        ),
      );

      Future.delayed(
        // Adjust duration as needed
        Duration(milliseconds: 400),
        () {
          Navigator.pop(context);
          Future.delayed(
            Duration(milliseconds: 400),
            () {
              widget.onComplete();
            },
          );
        },
      );
    });
  }

  @override
  build(context) {
    return Container();
  }
}

class WarmupOverlayNavigationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WarmupOverlay(
      onComplete: () {
        // Start rest of application
      },
      builder: (context) {
        return Container(
          child: Center(
            child: CircularProgressIndicator(),
          ),
        );
      },
      animations: [
        WarmupAnimation(
          builder: (context, complete) {
            return NavigationWarmupScreen(onComplete: complete);
          },
          repeat: 2,
        ),
      ],
    );
  }
}

Full examples in GitHub repo

🔥🔥🔥 Easy to build an animation set

✨ Flutter Animation Set [Lanuage ~~] English | 中文文档 Simplified Flutter stagger animation.To drive the Flutter stagger animation through a timeline in

Oct 31, 2022

3Rein Parallax animation

A Parallax behavior for any Flutter Scrollable This plugin enable a parallax effect in any Scrollable, simply wrap your Scrollable in a ParallaxArea a

Oct 21, 2022

A Flutter app with flip animation to view profiles of friends. 🌟

Flip View Made with 🔥 in India This flutter app is based on the design made Dmytro Prudnikov for Yalantis on Dribble.He describes the design as: Just

Sep 23, 2022

Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Jan 4, 2023

🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations

🐱‍👤 Staggered Animations made with algeria ❤

Nov 22, 2022

Flutter Animation 🐱‍👤 Made with algeria By DZ-TM071

Oct 23, 2022

Flutter Animation 🐱‍👤 Made with algeria 🖤

Flutter-awesome-login-page-animated-fastCode 🐱‍👤 Fast code and awesome design-ui for Login Page ! 🔥 Getting Started # First you need to add simple_

Oct 24, 2022

Flutter Animation - Grocery App UI

Jan 5, 2023

Flutter Animation liquid 🐱‍👤 Made with algeria By DZ-TM071

Flutter Animated Loading liquid progress 🚀 🔥 🔥 screen screen # Usage First you need to add liquid_progress_indicator 0.4.0 Or + in the dependency a

Jan 10, 2022

Comments

God bless you - where do I make start the App

First of all thank you for saving us all and making it so easy.

I have a question, I'm using your example to test the Open Container and returning the rest of my app inside the "onComplete" function, but I'm still seeing the blue container overlaying on top of my app. I'm sure that the problem is on my end and I'm doing something wrong. I know that you're making a new example so I'll wait for that and see if I can find my error there or I'll wait for your answer if you'll respond.

Anyway thank you so much again, you're saving us from many struggles

opened by DavideDessi319 1
A couple of interesting findings
Hi, thank you for the amazing preliminary work in tackling this issue with this workaround.

I have a couple of hints to share with you regarding the best approach to perform the warmup routine as fast and efficiently as possible:

The animations can be stacked, you don't need to play them sequentially. Even more I've discovered that you can also stack the same animation twice o three times with a little delay between them in order to maximize the chance of hitting all the frames and thus all the needed frames.

You can place the warmup overlays below all the other visible overlays, as long as you create the OverlayEntry with maintainsState = true.

if you instead apply a transform that moves your overlay entry outside the screen, the shaders will be optimized away.

You can actually execute all the routine inside a completely separate engine. The interesting thing is that this enables you to keep the "real" flutter view that you are displaying completely responsive even during this animation dance. Below some example code to possibily launch early inside the appdelegate:

let engine = FlutterEngine(name: "warmup") engine.run(withEntrypoint: "warmup") let warmupController = FlutterViewController(engine: engine, nibName: nil, bundle: nil) let rootBounds = controller.view.bounds warmupController.view.frame = rootBounds.applying(.init(translationX: rootBounds.width, y: 0)) controller.addChild(warmupController) controller.view.addSubview(warmupController.view) warmupController.didMove(toParent: controller) DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(15)) { warmupController.willMove(toParent: nil) warmupController.view.removeFromSuperview() warmupController.removeFromParent() }
opened by sroddy 7
Does the animations array work?
On WarmupOverlay, there exists a prop called animations, which is an array. Just wondering if that means that we can pass multiple animations to that array and they are run sequentially/in parallel?

I can't seem to get it to work.

I think this is handled on warmup_routine.dart, where I see the following:

class _WarmupAnimationState extends State<WarmupRoutine> { int _animationIndex = 0; _onWarmupAnimationComplete() { if (_animationIndex < widget.animations.length - 2) { setState(() { _animationIndex += 1; }); } else { widget.onComplete(); } } @override build(context) { return WarmupAnimationData( onComplete: _onWarmupAnimationComplete, child: widget.animations[_animationIndex], ); } }

I dont understand this line, however if (_animationIndex < widget.animations.length - 2) { ?

Am I missing something?

Thanks for the package, btw!
opened by MiguelSOliveira 7
Example for navigator animation

Thanks for this package! It would be great if you could add more examples.

I'm especially interested in the preloading of the default navigator animation.

opened by DFelten 3