Question

当我点击按钮时，我尝试制作一个单独的动画（快速成长）。

像这样的例子：

我成功制作了动画片，但我没有成功完成工作，因为我的icone按钮总是显示，我搜索只是为了让这个icone按钮在点击后上下成长，而不会消失< / p>

Answer 1

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

Answer 2

它不起作用，但他的想法在这里。目前我无法启动动画，因为动画等待启动，因此按钮不可见（动画的初始大小= 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,
                                       ),
                                     ),
                                   ),
                                )
                             ),
                          )
                       // ),
                      ],
                   )
                 )
              )
          ]
        )
     );
   }
 }

使动画在弹跳时弹跳

2 个答案: