【问题标题】:Issue with flare and flutter耀斑和颤振问题
【发布时间】:2019-11-16 01:00:05
【问题描述】:

您好,我尝试使用 Flutter 中的滑块实现耀斑动画。我创建了五个键(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");
              }
            });
          },
        ),
      ],
        ),

      )
    );
  }
}

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

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

在最后一个例子中,为什么我第一次按下按钮时一切都很好,第二次我松开平移轴?

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

【问题讨论】:

  • 它应该是什么样子?
  • 黑色形状应该始终显示在我调用的每个动画键上,但有时他会被移除我不知道为什么......
  • 我尝试用笔创建其他形状,但我遇到了同样的问题,而且还有更多时间。但是当我使用通用形状时,我没有问题
  • 当我改变滑块的值时,我也观察到偏移量。示例:key1 是 shape1 的平移,key 2 是 shape1 的旋转,但是当我更改滑块值时,shape1 会更改最后一个 relatif 原点的偏移量,而不是从他的初始原点开始

标签: flutter flare


【解决方案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");
              }

            });
          },
        ),

【讨论】:

    猜你喜欢
    • 2020-05-24
    • 1970-01-01
    • 2020-04-13
    • 2019-03-13
    • 2021-05-27
    • 2021-11-16
    • 2021-05-05
    • 2022-01-12
    • 2021-10-20
    相关资源
    最近更新 更多