Flutter implementing repeat Elastic animation

问题

for implementing this animation

i wrote this below code but, Elastic animation doesn't work on project and i'm not sure whats problem,

i want to have repeat of this animation

import 'package:flutter/material.dart';

void main()=>runApp(MaterialApp(home: Avatar(),));

class Avatar extends StatefulWidget {
  @override
  State<StatefulWidget> createState()=>_Avatar();
}

class _Avatar extends State<Avatar> with TickerProviderStateMixin{
  AnimationController avatarController;
  Animation<double> avatarSize;

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

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

    avatarSize = new Tween(begin: 0.0, end: 1.0).animate(
      new CurvedAnimation(
        parent: avatarController,
        curve: new Interval(
          0.100,
          0.400,
          curve: Curves.elasticOut,
        ),
      ),
    );

    avatarController.repeate();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit:StackFit.expand,
        children: <Widget>[
          AnimatedBuilder(
            animation: avatarController,
            builder: (context, widget) => Align(
              child: Container(
                width: 50.0,
                height: 50.0,
                color:Colors.green
              ),
            ),
          )
        ],
      ),
    );
  }
}

回答1:

Output:

---

You can play with duration and Tween to fine grain it.

void main() => runApp(MaterialApp(home: Avatar()));

class Avatar extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _Avatar();
}

class _Avatar extends State<Avatar> with TickerProviderStateMixin {
  AnimationController _controller;
  Tween<double> _tween = Tween(begin: 0.75, end: 2);

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

    _controller = AnimationController(duration: const Duration(milliseconds: 700), vsync: this);
    _controller.repeat(reverse: true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Align(
            child: ScaleTransition(
              scale: _tween.animate(CurvedAnimation(parent: _controller, curve: Curves.elasticOut)),
              child: SizedBox(
                height: 100,
                width: 100,
                child: CircleAvatar(backgroundImage: AssetImage(chocolateImage)),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

回答2:

Add this dependency https://pub.dev/packages/animator

Try this code.

        class BounceAnimation extends StatefulWidget {
        @override
          _BounceAnimationState createState() => _BounceAnimationState();
        }

        class _BounceAnimationState extends State<BounceAnimation>
            with SingleTickerProviderStateMixin {
        @override
        Widget build(BuildContext context) {
            return Scaffold(
            backgroundColor: Colors.grey,
            appBar: AppBar(title: Text("Bouncing Animation example")),
            body: Center(
                child: Container(
                    child: Animator(
                duration: Duration(seconds: 1),
                curve: Curves.elasticOut,
                builder: (anim) {
                    return Transform.scale(
                    origin: Offset(00, -59),
                    scale: anim.value,
                    child: Transform.translate(
                        offset: Offset(00, -65),
                        child: CircleAvatar(
                        radius: 86,
                        backgroundColor: Colors.white,
                        child: CircleAvatar(
                            radius: 84,
                            backgroundColor: Colors.grey,
                            child: CircleAvatar(
                            radius: 80,
                            backgroundColor: Colors.white,
                            foregroundColor: Colors.black,
                            backgroundImage: NetworkImage(
                                "https://i1.wp.com/devilsworkshop.org/wp-content/uploads/sites/8/2013/01/enlarged-facebook-profile-picture.jpg?w=448&ssl=1",
                            ),
                            ),
                        ),
                        ),
                    ),
                    );
                },
                )),
            ),
            );
        }
        }

回答3:

The Tween's begin and end values should be the values you want to animate between. You then need to use the animated value somewhere in your layout.

For example, change your Tween to Tween(begin: 50.0, end: 100.0) and your Container to

Container(
  width: avatarSize.value,
  height: avatarSize.value,
  color:Colors.green
)

Don't forget to also dispose of the animation controller within your widget's dispose():

@override
void dispose() {
  avatarController.dispose();

  super.dispose();
}

来源：https://stackoverflow.com/questions/57553062/flutter-implementing-repeat-elastic-animation