您好，我尝试在 flutter 中使用 slider 实现耀斑动画。我创建了五个键(1、2、3、4、5)，它们调用特定的耀斑动画，它们在耀斑编辑器上工作得很好，但是当我启动应用程序时，我遇到了添加偏移或消失或出现的某些动画项目的问题, 是随机的...

我用不同的形状创建了一个简单的测试，这些形状是用不同的工具创建的，包括光晕编辑器圆圈、六边形、钢笔，我目前在使用钢笔工具创建形状时遇到了问题，这些形状会消失或随机出现。

耀斑版本:flare_flutter: ^1.5.2

chronology of the gif
value=0.0 black shape is showed  // all is good
value=25.0 black shape is showed  // all is good
value=0.0 black shape disepear // not good
value=25.0 black shape disepear // not good
value=0.0 black shape disepear // not good
value=25.0 black shape disepear // not good

reload app
value=0.0 black shape is showed  // all is good
value=25.0 black shape is showed  // all is good

这是例子

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final FlareControls controls = FlareControls();
   double slidervalue;

   @override
  void initState() {
     slidervalue=0.0;
     controls.play("1");
     super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
        new Container (
        width:150,
            height: 150,
            child :new FlareActor("assets/flare_test.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"idle" , controller:controls,
            )
        ),
          Slider(
          value: slidervalue,
          min: 0,
          max: 100,
          divisions: 4,
          label: "$slidervalue",
          onChanged: (value) {
            setState(() {
              slidervalue = value;

              if(slidervalue==0.0){
                controls.play("1");
              }

              if(slidervalue==25){
                controls.play("2");
              }

              if(slidervalue==50){
                controls.play("3");
              }

              if(slidervalue==75){
                controls.play("4");
              }

              if (slidervalue==100){
                controls.play("5");
              }
            });
          },
        ),
      ],
        ),

      )
    );
  }
}

如果我用改变状态中断动画，这里是另一个修改初始原点的观察结果。我在引用最后一个位置动画时观察到初始原点的偏移量。而不是重新启动初始原点

在这个例子中，我不知道为什么翻译使用最后一个旋转原点，而旋转在按下时保持初始原点。

在最后一个例子中，为什么我第一次按下按钮时一切正常，而第二次我松开平移轴？

我在 flare 中发布了这个问题，但可能我做错了

最佳答案

我丑陋的解决方案。我为 flareactor 的每个键使用一个堆栈，当 slider 改变值时，键改变并且我使可见或不可见，flareactor 取决于所选键。工作，但它并不漂亮...

final FlareControls _controls = FlareControls();
  final FlareControls _controls2 = FlareControls();
  final FlareControls _controls3 = FlareControls();
  final FlareControls _controls4 = FlareControls();
  final FlareControls _controls5 = FlareControls();

  bool visibilitanim1;
  bool visibilitanim2;
  bool visibilitanim3;
  bool visibilitanim4;
  bool visibilitanim5;

double slidervalue; 
  @override
  void initState() {
    slidervalue=0;
     visibilitanim1=true;
    visibilitanim2=false;
    visibilitanim3=false;
    visibilitanim4=false;
    visibilitanim5=false;
    super.initState();
  }





  void _changed(bool visibility, String field) {
    setState(() {

      if (field == "anim1"){
        visibilitanim1 = visibility;
      }

      if (field == "anim2"){
        visibilitanim2 = visibility;
      }
      if (field == "anim3"){
        visibilitanim3 = visibility;
      }
      if (field == "anim4"){
        visibilitanim4 = visibility;
      }
      if (field == "anim5"){
        visibilitanim5 = visibility;
      }


    });
  } //modifi


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
new Stack (
  children: <Widget>[
    visibilitanim1 ? new Container (
        width:150,
        height: 150,
        child :new FlareActor("assets/flare_test.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"1" , controller:_controls,
        )
    ) : Container(),
      visibilitanim2 ? new Container (
        width:150,
        height: 150,
        child :new FlareActor("assets/flare_test.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"2" , controller:_controls2,
        )
    ): Container(),
    visibilitanim3 ? new Container (
        width:150,
        height: 150,
        child :new FlareActor("assets/flare_test.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"3" , controller:_controls3,
        )
    ): Container(),
    visibilitanim4 ? new Container (
        width:150,
        height: 150,
        child :new FlareActor("assets/flare_test.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"4" , controller:_controls4,
        )
    ): Container(),
    visibilitanim5 ? new Container (
        width:150,
        height: 150,
        child :new FlareActor("assets/flare_test.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"5" , controller:_controls5,
        )
    ): Container(),
  ],
),

          Slider(
          value: slidervalue,
          min: 0,
          max: 100,
          divisions: 4,
          label: "$slidervalue",
          onChanged: (value) {
            setState(() {
              slidervalue = value;

              if(slidervalue==0.0){
                _changed(true, "anim1");
                _controls.play("1");
                _changed(false, "anim2");
                _changed(false, "anim3");
                _changed(false, "anim4");
                _changed(false, "anim5");
              }

              if(slidervalue==25){
               _changed(true, "anim2");
                _controls2.play("2");
                _changed(false, "anim1");
                _changed(false, "anim3");
                _changed(false, "anim4");
                _changed(false, "anim5");

              }

              if(slidervalue==50){
                _changed(true, "anim3");
                _controls3.play("3");
                _changed(false, "anim1");
                _changed(false, "anim2");
                _changed(false, "anim4");
                _changed(false, "anim5");
              }


              if(slidervalue==75){
                _changed(true, "anim4");
                _controls4.play("4");
                _changed(false, "anim1");
                _changed(false, "anim2");
                _changed(false, "anim3");
                _changed(false, "anim5");
              }

              if (slidervalue==100){
                _changed(true, "anim5");
                _controls5.play("5");
                _changed(false, "anim1");
                _changed(false, "anim2");
                _changed(false, "anim3");
                _changed(false, "anim4");
              }

            });
          },
        ),

关于flutter - 耀斑和 flutter 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56902274/