Question

你好，我尝试用flutter中的滑块实现flare动画。我创建了五个关键点（1、2、3、4、5），它们调用了在耀斑编辑器上运行良好的特定耀斑动画，但是当我启动该应用程序时，我遇到了某些动画问题，这些项会增加偏移或消失或出现，这是随机的...

我创建了一个简单的测试，使用不同的形状的弹药编辑器圆，六角形，钢笔创建了一个简单的测试，而我目前在使用钢笔工具创建形状时遇到了麻烦，它们消失或随机出现。

flare版本：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");
              }
            });
          },
        ),
      ],
        ),

      )
    );
  }
}

如果我中断具有更改状态的动画，这是另一个修改了初始原点的观察结果。我参考上一个位置动画观察到初始原点的偏移。.而不是重新启动初始原点

在此示例中，我不知道为什么平移使用最后的旋转原点，而旋转在印刷时保持初始原点。

在最后一个示例中，为什么我第一次按下按钮时一切都很好，而第二次我松动平移轴呢？

我以耀斑发布了问题，但可能我做错了事

Answer 1

我的丑陋解决方案。我为flareactor的每个键使用一个堆栈，当滑块更改值，键更改时，无论是否显示，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");
              }

            });
          },
        ),

爆发和颤动的问题

1 个答案: