简单的 BounceIn 图像颤动动画答案

【问题标题】：Simple BounceIn Image Flutter Animation简单的 BounceIn 图像颤动动画
【发布时间】：2022-01-16 06:35:00
【问题描述】：

我想要什么？

我想用这张图片做简单的动画。

这是什么意思？

如果我点击它，它应该会变得平滑，例如动画中的反弹。我以开放的方式实现这种效果。

我尝试了什么？

我以为 AnimatedContainer 会完成，但 curve: 参数没有做任何事情。

ps。 我是初学者

import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Poppy App',
      theme: ThemeData(
        primarySwatch: Colors.brown,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

double _imgwidth = 200;
double _imgheight = 200;

class _MyHomePageState extends State<MyHomePage> {
  void poopAnimationIn() async {
    setState(() {
      _imgheight = 300;
      _imgwidth = 300;
    });
    await Future.delayed(const Duration(milliseconds: 500), () {
      setState(() {
        _imgheight = 200;
        _imgwidth = 200;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      color: const Color.fromARGB(164, 117, 81, 1),
      child: Center(
        child: GestureDetector(
          onTap: () {
            poopAnimationIn();
          },
          child: AnimatedContainer(
              curve: Curves.bounceIn,
              duration: const Duration(milliseconds: 200),
              child: Image.network(
                'https://picsum.photos/250?image=9',
                width: _imgwidth,
                height: _imgheight,
              )),
        ),
      ),
    ));
  }
}

【问题讨论】：

标签： flutter dart user-interface animation

【解决方案1】：

您需要指定 AnimatedContainer 的大小并在 setState 中更改该大小。

这是编辑后的代码：我建议你使用像 easeIn 这样的其他曲线而不是bounceIn 来获得更平滑的动画

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Poppy App',
      theme: ThemeData(
        primarySwatch: Colors.brown,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}


class _MyHomePageState extends State<MyHomePage> {

  double initialHeight = 200;
  double initialImageHeight = initialHeight;
  double expandedImageHeight = 300;
  void poopAnimationIn() async {
    setState(() {
      initialImageHeight = expandedImageHeight;
    });
    await Future.delayed(const Duration(milliseconds: 500), () {
      setState(() {
        initialImageHeight = initialHeight;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: const Color.fromARGB(164, 117, 81, 1),
        child: Center(
          child: GestureDetector(
              onTap: () async {
                poopAnimationIn();
              },
              child: AnimatedContainer(
                  height: initialImageHeight,
                  curve: Curves.bounceIn,
                  duration: const Duration(milliseconds: 200),

                  child: Image.network(
                    'https://picsum.photos/250?image=9',
//                 width: _imgwidth,
//                 height: _imgheight,
                  ))),
        ),
      ),
      // ),
    );
  }
}

【讨论】：