如何在颤动中从右到左制作图片动画 [英] how to make animation of pictures from right to left in flutter

问题描述

如何制作这种类型的动画?

我附上了

这是完整的代码:

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

类 ViwerWidget 扩展 HookWidget {@覆盖小部件构建(BuildContext 上下文){最终大小 = MediaQuery.of(context).size;ValueNotifier<double>page = ValueNotifier(0.0);最终视口分数 = 0.5；最终页面宽度 = size.width * 0.5;最终页面控制器 = 使用页面控制器(视口分数:视口分数，);pageController.addListener(() {page.value = pageController.page!;});最后一页= [图标(Icons.ac_unit,尺寸:100，),图标(Icons.access_alarm_rounded,尺寸:100，),图标(Icons.accessibility_new,尺寸:100，),图标(Icons.account_box_rounded,尺寸:100，),];返回脚手架(正文:列(孩子们: [大小盒(高度:100)，容器(颜色:颜色.红色，宽度:页面宽度，身高:300，孩子:PageView.builder(控制器:页面控制器，itemCount: pages.length,页面捕捉:假，itemBuilder: (context, index) =>ValueListenableBuilder(valueListenable:页面，builder: (context, double value, child) {最终比例 = (值 - 索引 + 1).abs() * 2;最终不透明度 = (1 - ((值 - 索引).abs())).clamp(0.0, 1.0);返回不透明度(不透明度:不透明度，孩子:Transform.scale(规模:规模，孩子:页面[索引]，),);},),),),间隔()，ValueListenableBuilder(valueListenable:页面，builder: (context, double value, child) =>滑块(价值:价值，最大值:pages.length - 1，分钟:0.0，onChanged:(值){page.value = 值；pageController.jumpTo(value * pageWidth * viewportFraction);},),)],),);}}

当然，您可以更多地使用这些值来获得所需的结果.

How to make this type of animation in a flutter?

I attached a YouTube video. I have made many animations but not any of them solve this issue which I'm facing now.

Please import this: awesome_slider: ^0.1.0

Here the code that I tried:

  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(() {
                              
                            });   },
  
                  ),
   ], ), 
  ),
),

    );
  }
}

解决方案

This can be done by PageView, ListVeiw or Stack.

this is the full code:

Using PageView so it's also scrollable

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

    ValueNotifier<double> page = ValueNotifier(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(
                valueListenable: page,
                builder: (context, double 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(
            valueListenable: page,
            builder: (context, double value, child) => Slider(
              value: value,
              max: pages.length - 1,
              min: 0.0,
              onChanged: (value) {
                page.value = value;
                pageController.jumpTo(value * pageWidth * viewportFraction);
              },
            ),
          )
        ],
      ),
    );
  }
}

Of course you can play more with the values to achieve the desired result.

这篇关于如何在颤动中从右到左制作图片动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！