带有 TextField 的 Rivers 状态机

Posted 2023-02-23

【中文标题】带有 TextField 的 Rivers 状态机

【英文标题】：Rive's stateMachine with TextFiled

【发布时间】：2021-11-02 20:25:54

【问题描述】：

我喜欢创建跟随TextField 文本的动画，这是来自 Flutter YouTube 的视频。

现在我该如何跟随目标。

这是我在 rive.app 或 GitHub 和设计上的 rive 文件。

【参考方案1】：

我们需要一个 StateMachineController 和 SMIInput<double> 来负责跟进文本。

结果

OutPutVideo

滑块结果

您可以关注GitHub Repository或

class TextFieldWithRive extends StatefulWidget 
  TextFieldWithRive(Key? key) : super(key: key);

  @override
  _TextFieldWithRiveState createState() => _TextFieldWithRiveState();


class _TextFieldWithRiveState extends State<TextFieldWithRive> 
  StateMachineController? controller;

  SMIInput<double>? valueController;
  Artboard? _riveArtboard;

  double sliderVal = 0.0;

  /// change value based on size>Width
  final double strengthOverTextFiled = 1.5;

  final TextEditingController textEditingController = TextEditingController();

  @override
  void initState() 
    super.initState();

    rootBundle.load("rives/eyeMovement.riv").then((value) async 
      final file = RiveFile.import(value);

      final artboard = file.mainArtboard;

      controller = StateMachineController.fromArtboard(artboard, "eyeMovement");

      if (controller != null) 
        print("got state");
        setState(() 
          artboard.addController(controller!);
          valueController = controller!.findInput('moevement_controll');
          controller!.inputs.forEach((element) 
            print(element.name);
          );
        );
      

      _riveArtboard = artboard;
    );

    ///* eye controll with textFiled
    textEditingController.addListener(() 
      print(textEditingController.text);

      if (valueController != null) 
        valueController!.value =
            textEditingController.text.length * strengthOverTextFiled;
      
    );
  

  @override
  void dispose() 
    textEditingController.removeListener(() );
    textEditingController.dispose();
    controller!.dispose();
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Center(
        child: LayoutBuilder(
          builder: (context, constraints) => Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                height: constraints.maxWidth * .5,
                width: constraints.maxWidth * .5,
                child: _riveArtboard == null
                    ? CircularProgressIndicator()
                    : Rive(
                        artboard: _riveArtboard!,
                      ),
              ),
              SizedBox(
                width: constraints.maxWidth * .8,
                child: TextField(
                  controller: textEditingController,
                  decoration: InputDecoration(hintText: "keep typing"),
                ),
              ),
            ],
          ),
        ),
      ),
    );