Flutter实现重复弹性动画

Question

用于实现此动画

我在下面写了这段代码，但是弹性动画在项目上不起作用，我不确定是什么问题，

我想重播这个动画

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
              ),
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

Tween 的 begin 和 end 值应该是您想要在其间设置动画的值。然后，您需要在布局中的某处使用动画值。

例如，将 Tween 更改为 Tween(begin: 50.0, end: 100.0)，将 Container 更改为

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

别忘了在小部件的 dispose():

中处理动画控制器

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

  super.dispose();
}

Answer 2

添加这个依赖项https://pub.dev/packages/animator

试试这个代码。

        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",
                            ),
                            ),
                        ),
                        ),
                    ),
                    );
                },
                )),
            ),
            );
        }
        }

Answer 3

输出：

您可以使用 duration 和 Tween 来细化它。

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)),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Flutter实现重复弹性动画

Flutter implementing repeat Elastic animation

flutter

flutter-animation