在 PageView 子级之间切换期间颤振缩小和放大

Question

在 Flutter 中，我找到了很多 PageView 儿童的动画，但我找不到任何用于在 flutter 中实现以下视频的库。

上看到一个简单的视频

我可以使用哪个库来实现？

Answer 1

我添加一个示例...这是工作..当用户开始更改页面时页面缩小，当用户更改页面时...缩放到 1

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: MyHome(),
        ),
      ),
    );
  }
}
class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  PageController pc = PageController();
  int _current = 0;
  double lastOffset = 0;
  bool smaller = false;

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

      if(pc.offset != lastOffset){
        setState(() {
          smaller = true;
        });
      }
      if(pc.offset % MediaQuery.of(context).size.width == 0){
        setState(() {
          smaller = false;
        });
        lastOffset = pc.offset;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: pc,
      onPageChanged:(value) {
        setState(() {
          _current = pc.page.round();
        });
      },
      children: List.generate(4, (index) {
        return Transform.scale(
          scale: smaller ? 0.9 : 1,
          child: Container(color: Colors.red[index*100 + 100],),
        );
      }),
    );
  }
}

编辑

我在上面的代码中添加了动画[=12=]

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: MyHome(),
        ),
      ),
    );
  }
}
class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> with TickerProviderStateMixin{
  PageController pc = PageController();
  int _current = 0;
  double lastOffset = 0;
  bool smaller = false;

  AnimationController _controller;
  Animation<double> _animation;

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


    _controller = AnimationController(
        duration: const Duration(milliseconds: 300), vsync: this,);
    _animation = Tween<double>(begin: 1 , end: 0.9).animate(CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn));


    pc.addListener(() {

      if(pc.offset != lastOffset){
        _controller.forward();
      }
      if(pc.offset % MediaQuery.of(context).size.width == 0){
        _controller.reverse();
        lastOffset = pc.offset;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: pc,
      onPageChanged:(value) {
        setState(() {
          _current = pc.page.round();
        });
      },
      children: List.generate(4, (index) {
        return ScaleTransition(
          scale: _animation,
          child: Container(color: Colors.red[index*100 + 100],),
        );
      }),
    );
  }

  @override

  dispose() {
    _controller.dispose();
    super.dispose();
  }

}

在 PageView 子级之间切换期间颤振缩小和放大

Flutter scale-down and scale-up during switch between PageView children

flutter

flutter-animation