animation - 使动画随着 flutter 而弹跳

标签 animation flutter

当我点击一个按钮时,我尝试制作一个弹跳动画(快速上下移动)。

像这个例子:

enter image description here

我成功制作了弹跳动画但是我没有成功制作点击,因为我的icone按钮总是显示,我搜索只是为了让这个icone按钮在点击后上下增长,没有消失

最佳答案

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(){
     super.dispose();
     this._controller.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)),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关于animation - 使动画随着 flutter 而弹跳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50889509/

相关文章:

ios - 设置 UIProgressView 进度时不需要的高度约束动画

javascript - Animatable 重新渲染动画 React Native

javascript - 是否可以将动画 svg 分配给 google Maps JavaScript API 中的标记符号?

asynchronous - 如何在 flutter 应用程序中显示 5 分钟不可停止的计时器?

objective-c - 如何在代码完成之前停止执行 FOR 循环

css - 为什么我的 CSS 动画不工作?

flutter - BottomNavigationBar 标题未显示在 Flutter 中

flutter - 如何在属于另一个选项卡的页面中添加选项卡

dart - 有没有什么办法可以让标签栏固定在顶部,而工具栏会滚动?

ios - 未找到模块 'audio_session'