使动画反弹的自来水与Flutter

c90pui9n  于 2023-06-30  发布在  Flutter
关注(0)|答案(2)|浏览(106)

当我点击一个按钮时,我尝试制作一个单独的boucing动画(快速向上和向下生长)。
比如这个例子:

我succeded使boucing动画,但我不succeded使自来水工作,因为我的图标按钮总是显示,我搜索只使这个图标按钮长大后,自来水上下,没有消失

s4n0splo

s4n0splo1#

SOURCE

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

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

class _Avatar extends State<Avatar> with TickerProviderStateMixin {
  AnimationController _controller;

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

    _controller = AnimationController(duration: const Duration(milliseconds: 700), vsync: this);
    _controller.repeat(reverse: true);
  }
  
  @override
  void dispose(){
     this._controller.dispose();
     super.dispose();
  }

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

wnvonmuf2#

它不工作,但想法他在这里。目前我不能启动动画,因为动画等待启动,所以按钮是不可见的(动画的初始大小= 0)。

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

class MyApp extends StatelessWidget {
  @override
 Widget build(BuildContext context) {
 return new MaterialApp(
  title: 'Flutter Demo',
  theme: new ThemeData(

    primarySwatch: Colors.blue,
   ),
   home: new MyHomePage(title: 'Flutter Demo Home Page'),
  );
 }
}


class MyHomePage extends StatefulWidget {
 MyHomePage({Key key, this.title}) : super(key: key);

final String title;

 @override
 _MyHomePageState createState() => new _MyHomePageState();
 }

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin{

 AnimationController _controller;
 Animation<double> _animation;


 @override
 void initState() {

_controller= new AnimationController(
  vsync: this,
  duration: const Duration(milliseconds: 2000),
);

   _animation = new CurvedAnimation(
    parent: _controller,

    curve: new Interval(0.8, 1.0, curve: Curves.elasticOut));
 }



  @override
  Widget build(BuildContext context) {

return new Scaffold(
  body:  new Stack(
      children: <Widget>[
        new Positioned(
          bottom: 16.0,
           right: 16.0,
            child: new Container(
             child: new Row(
              children: <Widget>[
              // new ScaleTransition(
                // scale: _animation, alignment: FractionalOffset.center,
                 // child :
               new Material(
                   color: Colors.green,
                    type: MaterialType.circle,
                     elevation: 6.0,
                      child: new GestureDetector(
                         child: new Container(
                         width : 50.0,
                         height: 50.0,
                           child: new InkWell(
                             onTap: (){
                               setState(() {
                                // _controller.forward();
                                 }
                               );
                             },
                           child: new Center(
                                 child: new Icon(
                                   Icons.phone,
                                   color: Colors.white,
                                       ),
                                     ),
                                   ),
                                )
                             ),
                          )
                       // ),
                      ],
                   )
                 )
              )
          ]
        )
     );
   }
 }

相关问题