web-dev-qa-db-fra.com

Comment changer la vitesse d'une animation de héros en flutter

J'ai fait une animation de héros simple en suivant les instructions de Site Web de Flutter

Cela fonctionne comme décrit dans les instructions mais dans mon cas, je voudrais qu'il s'anime beaucoup plus lentement du premier au deuxième écran. quelqu'un sait-il comment changer la vitesse de cette animation?

flutterflutter-layoutflutter-animation
15
Asger Lorenzen

Pour modifier la vitesse de transition, vous devrez ajuster la durée de transition PageRoute (comme déjà souligné par @diegoveloper).

Si vous souhaitez conserver la transition par défaut, vous pouvez créer une classe implémentant MaterialPageRoute . Si vous avez déjà votre propre transition ou si vous voulez en créer une, vous pouvez utiliser le PageRouteBuilder pour créer facilement votre propre transition. Ajustez simplement le transitionDuration.

Voici un petit exemple autonome, utilisant le PageRouteBuilder:

Transition Demo

import 'package:flutter/material.Dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Page1(),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            RaisedButton(
              child: Text('Page2'),
              onPressed: () => Navigator.Push(
                  context,
                  PageRouteBuilder(
                      transitionDuration: Duration(seconds: 2),
                      pageBuilder: (_, __, ___) => Page2())),
            ),
            Hero(tag: 'home', child: Icon(Icons.home))
          ],
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'home',
          child: Icon(
            Icons.home,
          ),
        ),
      ),
    );
  }
}
7
Niklas

1. Une solution possible

Je ne pense pas que la seule façon d'y parvenir soit de changer la durée de transition de PageRoute. Je pense que vous pouvez également obtenir le même effet en utilisant un AnimationController - cette réponse provient en grande partie des conférences # 149 et # 150 de Angela Yu's The Complete 2019 Flutter Development Bootcamp with Dart .

  1. Transformez votre écran en StatefulWidget.
  2. Si vous utilisez une seule animation, ajoutez with SingleTickerProviderStateMixin à votre classe d'état.
  3. Créez un contrôleur dans la classe d'état.
  4. Si votre animation est censée apparaître lors de l'initialisation de l'écran, utilisez la controller à l'intérieur de la méthode initState.
    • Le contrôleur possède une propriété appelée duration, vous pouvez donc la modifier à votre guise.

2. À quoi cela ressemblerait

Au final, tout devrait ressembler un peu à ceci:

class _NewScreenState extends State<HomeScreen> 
  with SingleTickerProviderStateMixin{

  AnimationController controller;

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

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

    controller.forward();

    controller.addListener((){
      setState(() {

      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return ...
  • vsync est obligatoire (@required) paramètre qui prend l'objet d'état (instance) lui-même (généralement).
  • addListener et setState sont là si vous souhaitez utiliser la valeur de controller (controller.value) à un moment donné dans le futur - par exemple, changer la hauteur de l'icône avec quelque chose comme height: finalHeight * controller.value.
  • Pour la transition vers cet écran, j'utilise simplement un FlatButton avec Navigator.pushNamed, rien de spécial.

3. Quelques informations importantes supplémentaires

  1. controller sera toujours actif même si vous changez d'écran plus tard. Donc, si vous avez une animation en boucle en arrière-plan, c'est une bonne idée de la supprimer lors du changement d'écran, de cette façon vous ne gaspillez pas les ressources du téléphone avec elle plus. Cela pourrait être réalisé avec: 
    @override
void dispose() {
  controller.dispose();
  super.dispose();
}
  2. Vous pouvez également personnaliser la façon dont l'exécution de l'animation ou son exécution. Une option consiste à utiliser un CurvedAnimation.
    1. Déclarer Animation animation; juste en dessous de votre controller.
    2. Sous votre controller, dans initState, ajoutez: 
      animation = CurvedAnimation( // the controller can't have upperBound > 1
  parent: controller, // the controller you created
  curve: Curves.decelerate,
);
  3. Une autre façon utile d'animer dans Flutter est d'utiliser TweenAnimations . Par exemple, si vous souhaitez effectuer une transition entre couleurs, vous pouvez utiliser ColorTween (sous votre controller, à l'intérieur initState): 
    animation = ColorTween(
  begin: Colors.red,
  end: Colors.blue,
).animate(controller);
0
Philippe Fanaro