如何使用抖动动画缩放添加到扩展小部件中的图像?

时间:2019-03-06 08:25:41

标签: flutter flutter-animation

initState() {
...
controller = AnimationController(
    duration: const Duration(milliseconds: 300), vsync: this);

animation =
    Tween(begin: 1.0, end: 20.0 ).animate(controller);

animation.addListener(() {
  setState(() {});
});

controller.forward();
...  
}

build(context) {
...
    child: ScaleTransition(
              child: Text('Hello'),
              scale: animation,
            ),
...
}

它可以正常工作并缩放任何小部件。我尝试过文字和图像。

以颤动为例:

Widget _buildImageColumn() => Container(
  decoration: BoxDecoration(
    color: Colors.black26,
  ),
  child: Column(
    children: [
      _buildImageRow(1),
      _buildImageRow(3),
    ],
  ),
);

Widget _buildDecoratedImage(int imageIndex) => Expanded(
  child: Container(
    decoration: BoxDecoration(
      border: Border.all(width: 10, color: Colors.black38),
      borderRadius: const BorderRadius.all(const Radius.circular(8)),
    ),
    margin: const EdgeInsets.all(4),
    child: Image.asset('images/pic$imageIndex.jpg'),
  ),
);

Widget _buildImageRow(int imageIndex) => Row(
  children: [
    _buildDecoratedImage(imageIndex),
    _buildDecoratedImage(imageIndex + 1),
  ],
);

在此示例中,创建了四个图像。我可以在图像中添加InkWell并获取图像索引。但是,如何使一个图像从其位置缩放到屏幕尺寸?

0 个答案:

没有答案