如何在flutter中制作从右到左的图片动画

Question

如何在flutter中制作这种类型的动画？

我附上了一个YouTube video。我制作了很多动画，但没有一个能解决我现在面临的这个问题。

请导入：awesome_slider: ^0.1.0

这是我试过的代码：

  class Submits extends StatefulWidget {
  Submits({Key key}) : super(key: key);

  @override
  _SubmitsState createState() => _SubmitsState();
}

class _SubmitsState extends State<Submits> {

  int valuess = 0;
   List itemWidget = [
           AnimatedContainer(
                           transform:Matrix4.translationValues(0, 0, 0) ,
                    // Use the properties stored in the State class.
                      key: UniqueKey(),
                       child: Center(
                         child: Padding(
                          padding: const EdgeInsets.fromLTRB(10,240,0,0),
                         
                      ),
                       ),
                    
                    width: 400,
                    height: 300,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(colors: [Colors.red,Colors.red]),
                   
                     color: Colors.blue,
                
                    ),
                    // Define how long the animation should take.
                    duration: Duration(seconds: 0),
                    // Provide an optional curve to make the animation feel smoother.
                    curve: Curves.elasticInOut,
                  ),
        AnimatedContainer(
               transform:Matrix4.translationValues(10, 0, 0) ,
                    // Use the properties stored in the State class.
                      key: UniqueKey(),
                        child: Center(
                        child: Padding(
                          padding: const EdgeInsets.fromLTRB(10,240,0,0),
                          child: Text("To a very little extent"),
                        ),
                      ),
                    width: 400,
                    height: 300,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(colors: [Colors.red,Colors.orange]),
                     image: DecorationImage(image: AssetImage("assets/images/Artboard 1.png")),
                     color: Colors.blue,),
                    // Define how long the animation should take.
                    duration: Duration(seconds: 0),
                    // Provide an optional curve to make the animation feel smoother.
                    curve: Curves.elasticInOut,
                  ),

                   AnimatedContainer(
                      transform:Matrix4.translationValues(10, 0, 0) ,
                    // Use the properties stored in the State class.
                      key: UniqueKey(),
                       child: Center(
                         child: Padding(
                          padding: const EdgeInsets.fromLTRB(10,240,0,0),
                          child: Text("To a little extent"),
                      ),
                       ),
                    width: 400,
                    height: 300,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(colors: [Colors.orange,Colors.yellow]),
                     image: DecorationImage(image: AssetImage("assets/images/Artboard 2.png")),
                     color: Colors.blue, ),
                    // Define how long the animation should take.
                    duration: Duration(seconds: 0),
                    // Provide an optional curve to make the animation feel smoother.
                    curve: Curves.elasticInOut,
                  ),

                       AnimatedContainer(
                          transform:Matrix4.translationValues(0,0, 0) ,
                    // Use the properties stored in the State class.
                      key: UniqueKey(),
                       child: Center(
                         child: Padding(
                          padding: const EdgeInsets.fromLTRB(10,240,0,0),
                          child: Text("To some extent"),
                      ),
                       ),
                    width: 400,
                    height: 300,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(colors: [Colors.orange,Colors.green]),
                     image: DecorationImage(image: AssetImage("assets/images/Artboard 3.png")),
                     color: Colors.blue,
                
                    ),
                    // Define how long the animation should take.
                    duration: Duration(seconds: 0),
                    // Provide an optional curve to make the animation feel smoother.
                    curve: Curves.elasticInOut,
                  ),

                    AnimatedContainer(
                       transform:Matrix4.translationValues(0,0, 0) ,
                    // Use the properties stored in the State class.
                      key: UniqueKey(),
                       child: Center(
                         child: Padding(
                          padding: const EdgeInsets.fromLTRB(10,240,0,0),
                          child: Text("To a great extent"),
                      ),
                       ),
                    width: 400,
                    height: 300,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(colors: [Colors.yellow,Colors.green]),
                     image: DecorationImage(image: AssetImage("assets/images/Artboard 4.png")),
                     color: Colors.blue,
                
                    ),
                    // Define how long the animation should take.
                    duration: Duration(seconds: 0),
                    // Provide an optional curve to make the animation feel smoother.
                    curve: Curves.elasticInOut,
                  ),

                        AnimatedContainer(
                    // Use the properties stored in the State class.
                      key: UniqueKey(),
                       child: Center(
                         child: Padding(
                          padding: const EdgeInsets.fromLTRB(10,240,0,0),
                          child: Text("To a very great extent"),
                      ),
                       ),
                    width: 400,
                    height: 300,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(colors: [Colors.green,Colors.green]),
                     image: DecorationImage(image: AssetImage("assets/images/Artboard 5.png")),
                     color: Colors.blue,
                
                    ),
                    // Define how long the animation should take.
                    duration: Duration(seconds: 0),
                    // Provide an optional curve to make the animation feel smoother.
                    curve: Curves.elasticInOut,
                  ),
                    
  ];



   @override
  Widget build(BuildContext context) {
    return Scaffold(

body: Center(
  child:   Container(
                                    child: Column(children: [
                                  Container(
              height:300,
              width: 400,
              child: AnimatedSwitcher(
                switchInCurve: Curves.linear,
                 child: itemWidget[valuess],
                 duration: Duration(seconds: 1), ), ),
  
             AwesomeSlide(
  
                    value: valuess.toDouble(),
                    min: 0, 
                    max: 5,
                    thumbSize: 80.0,
                    inactiveLineColor: Colors.grey,
                    activeLineColor:Color(0xffe64a19),
                    child: Material(
  
                                type: MaterialType.card,
                                color: Colors.transparent,
                                child: Image.asset( "assets/images/SliderTop.png"),),
  
                        onChanged: (value) {
  
                        valuess = value.toInt();
                            setState(() {
                              
                            });   },
  
                  ),
   ], ), 
  ),
),

    );
  }
}

Answer 1

这可以通过 PageView、ListVeiw 或 Stack 来完成。

这是完整代码：

使用 PageView 所以它也是可滚动的

class ViwerWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    ValueNotifier<double> page = useValueNotifier(0.0);

    final viewportFraction = 0.5;

    final pageWidth = size.width * 0.5;

    final pageController = usePageController(
      viewportFraction: viewportFraction,
    );

    pageController.addListener(() {
      page.value = pageController.page!;
    });

    final pages = [
      Icon(
        Icons.ac_unit,
        size: 100,
      ),
      Icon(
        Icons.access_alarm_rounded,
        size: 100,
      ),
      Icon(
        Icons.accessibility_new,
        size: 100,
      ),
      Icon(
        Icons.account_box_rounded,
        size: 100,
      ),
    ];

    return Scaffold(
      body: Column(
        children: [
          SizedBox(height: 100),
          Container(
            color: Colors.red,
            width: pageWidth,
            height: 300,
            child: PageView.builder(
              controller: pageController,
              itemCount: pages.length,
              pageSnapping: false,
              itemBuilder: (context, index) => ValueListenableBuilder<double>(
                valueListenable: page,
                builder: (context, value, child) {
                  final scale = (value - index + 1).abs() * 2;

                  final opacity = (1 - ((value - index).abs())).clamp(0.0, 1.0);

                  return Opacity(
                    opacity: opacity,
                    child: Transform.scale(
                      scale: scale,
                      child: pages[index],
                    ),
                  );
                },
              ),
            ),
          ),
          Spacer(),
          ValueListenableBuilder<double>(
            valueListenable: page,
            builder: (context, value, child) => Slider(
              value: value,
              max: pages.length - 1,
              min: 0.0,
              onChanged: (value) {
                page.value = value;
                pageController.jumpTo(value * pageWidth * viewportFraction);
              },
            ),
          )
        ],
      ),
    );
  }
}

当然你可以多玩一些数值来达到想要的效果。

如何在flutter中制作从右到左的图片动画

how to make animation of pictures from right to left in flutter

animation

slider

flutter