Flutter实现重复的Elastic动画 [英] Flutter implementing repeat Elastic animation

问题描述

用于实现此动画

我在下面的代码中编写了此代码，但是，弹性动画在项目上不起​​作用，我不确定出现什么问题，

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

我想重复播放此动画

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

推荐答案

输出:

您可以使用duration和Tween对其进行细化.

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

这篇关于Flutter实现重复的Elastic动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！