0

我使用 Rive 包是为了在我的 Flutter 应用程序中添加一些不错的动画，但我有两个疑问：

我有一个简单的动画，其中一些文档被动画化。我想在 Tap of it 上播放这个动画，所以我使用OneShotAnimation. 点按播放有效，但是当动画结束时，它会立即重置为第一帧。
此外，当我加载页面时，动画是从最后一帧加载的。
如何避免这两个问题？

我的代码：

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

class Square extends StatefulWidget {
  final Widget page;
  final String title;

  const Square({
    required this.page,
    required this.title,
    Key? key,
  }) : super(key: key);

  @override
  State<Square> createState() => _SquareState();
}

class _SquareState extends State<Square> {
  late RiveAnimationController _esamiController;
  bool _isPlaying = false;

  @override
  void initState() {
    _esamiController = OneShotAnimation(
      'Animation 1',
      autoplay: false,
      onStart: () => setState(() => _isPlaying = true),
      onStop: () => setState(() => _isPlaying = false),
    );
    super.initState();
  }

  @override
  void dispose() {
    _esamiController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => _isPlaying ? null : _esamiController.isActive = true,
      child: SizedBox(
        width: 192,
        height: 192,
        child: Card(
          color: Colors.black26,
          elevation: 10,
          child: Center(
            child: RiveAnimation.asset(
              'assets/animations/esami.riv',
              controllers: [_esamiController],
              onInit: (_) => setState(() {}),
            ),
          ),
        ),
      ),
    );
  }
}

动画不工作 正如你所看到的，床单应该开始无序并结束有序，而在这里我得到相反的结果。

4

0 回答 0