在顫動中點擊影片時如何切換影片

我是riveand的初學者flutter。我正在構建一個最喜歡的專案頁面flutter。如果收藏夾中沒有任何內容，我需要riveAnimation在螢屏上顯示。我已經實作了幾乎所有animation在螢屏上顯示的東西。但是當用戶點擊影片時，我需要切換一個跳躍影片，這真的很酷。現在我有“空閑”模式的影片

您可能需要參考rive檔案 =>

代碼和影像可能會大一點。對于那個很抱歉

class Favourites extends StatefulWidget {
  Favourites({Key? key}) : super(key: key);

  @override
  State<Favourites> createState() => _FavouritesState();
}

class _FavouritesState extends State<Favourites> {
  String animation = 'idle';
  SMIInput<String>? _birdInput;
  Artboard? _birdArtboard;

  void jump() {
    setState(() {
      _birdInput?.value = 'Pressed';
    });
  }

  @override
  void initState() {
    super.initState();
    rootBundle.load('assets/rive/bird.riv').then(
      (data) {
        final file = RiveFile.import(data);
        final artboard = file.mainArtboard;
        var controller = StateMachineController.fromArtboard(
          artboard,
          'Bird',
        );
        if (controller != null) {
          artboard.addController(controller);
          _birdInput = controller.findInput('Pressed');
        }
        setState(() => _birdArtboard = artboard);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    final favourite = Provider.of<Favourite>(context);
    return Scaffold(
      backgroundColor: Colors.grey[300],
      appBar: const CustomAppBar(title: 'Favourites'),
      body: favourite.items.isEmpty
          ? Center(
              child: Column(
                children: [
                  SizedBox(
                    width: 300,
                    height: 500,
                    child: _birdArtboard == null
                        ? const SizedBox()
                        : Center(
                            child: GestureDetector(
                              onTap: () {},
                              child: Rive(artboard: _birdArtboard!),
                            ),
                          ),
                  ),
                   NeumorphicButton(),
                ],
              ),
            )
          : CustomGrid(),
    );
  }
}

uj5u.com熱心網友回復：

如果您在 rive 站點上打開/運行 rive 檔案，您會發現它正在使用Trigger變數進行跳轉，并且正在使用State Machine 1狀態機。

接下來是宣告變數。您需要為此使用SMITrigger資料型別并用于StateMachineController控制影片。

使用.findSMI(..)而不是.findInput()for SMITrigger。

要在觸發器上啟動影片，請使用

 trigger?.fire();

我會鼓勵你在執行 rive 影片時查看編輯器并檢查輸入變數型別。

所以將提供影片的完整小部件是

class Favourites extends StatefulWidget {
  const Favourites({Key? key}) : super(key: key);

  @override
  State<Favourites> createState() => _FavouritesState();
}

class _FavouritesState extends State<Favourites> {
  String animation = 'idle';

  Artboard? _birdArtboard;
  SMITrigger? trigger;
  StateMachineController? stateMachineController;

  @override
  void initState() {
    super.initState();
    rootBundle.load('assets/rive/bird.riv').then(
      (data) {
        final file = RiveFile.import(data);
        final artboard = file.mainArtboard;
        stateMachineController =
            StateMachineController.fromArtboard(artboard, "State Machine 1");
        if (stateMachineController != null) {
          artboard.addController(stateMachineController!);
          trigger = stateMachineController!.findSMI('Pressed');

          stateMachineController!.inputs.forEach((e) {
            debugPrint(e.runtimeType.toString());
            debugPrint("name${e.name}End");
          });
          trigger = stateMachineController!.inputs.first as SMITrigger;
        }

        setState(() => _birdArtboard = artboard);
      },
    );
  }

  void jump() {
    trigger?.fire();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[300],
        body: Center(
          child: Column(
            children: [
              SizedBox(
                width: 300,
                height: 400,
                child: _birdArtboard == null
                    ? const SizedBox()
                    : Center(
                        child: GestureDetector(
                          onTap: () {
                            jump();
                          },
                          child: Rive(artboard: _birdArtboard!),
                        ),
                      ),
              ),
            ],
          ),
        ));
  }
}

標籤：扑 镖 动画片 河

上一篇：出現時禁用SwiftUI幀影片

下一篇：UICollectionView中，折疊影片不完善，隱藏項沒有高度收縮影片