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

问题描述

如何使这类动画变得扑朔迷离?

我附加了

这是完整的代码:

使用 PageView ，因此它也是可滚动的

 类ViwerWidget扩展了HookWidget {@override窗口小部件build(BuildContext context){最终大小= MediaQuery.of(context).size;ValueNotifier< double>页面= ValueNotifier(0.0);最终viewportFraction = 0.5;最后的pageWidth = size.width * 0.5;最后的pageController = usePageController(viewportFraction:viewportFraction，);pageController.addListener((){page.value = pageController.page !;});最终页= [图标(Icons.ac_unit，大小:100，)，图标(Icons.access_alarm_rounded，大小:100，)，图标(Icons.accessibility_new，大小:100，)，图标(Icons.account_box_rounded，大小:100，)，];返回脚手架(正文:列(孩子们: [SizedBox(高度:100)，容器(颜色:Colors.red，宽度:pageWidth，高度:300，子级:PageView.builder(控制器:pageController，itemCount:pages.length，pageSnapping:否，itemBuilder :(上下文，索引)=>ValueListenableBuilder(valueListenable:页面，生成器:(上下文，双精度值，子代){最终比例=(值-索引+ 1).abs()* 2;最终不透明度=(1-(((值-索引).abs())).clamp(0.0，1.0);返回不透明度(不透明度:不透明度，子级:Transform.scale(规模:规模，子:pages [index]，)，);}，)，)，)，空格键()，ValueListenableBuilder(valueListenable:页面，生成器:(上下文，双精度值，子代)=>滑块(值:值，最多: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屋！