devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Rive动画使用介绍（Flutter）

作者：从前慢现在也慢 | 2024-08-13 07:11:00

赞

踩

rive动画

感觉官方的案例对我这种level的开发者来说感觉的真的很晦涩，也没什么像样的中文文档，所以做了些尝试，大致理解了一些基本的使用方式。有些较为复杂的素材琢磨不明白，然后把自己所知的做一个总结吧。

首先是通过RiveAnimation组件加载的三种方式，分别可以通过asset资源文件、网络url和本地文件进行动画加载。

以及通过RiveAnimationController控制动画的暂停与播放。

还有一种加载方法是通过直接加载文件并解析转化成RivaFile类型，获取一个所谓artboard的画板，然后通过这个画板获取一个StateMachineController的状态器，接下来在状态其中通过findSMI和findInput方法获取到可执行的动画。动画的名称通过rive网站的editor打开自己查看，这里接似懂非懂了，见得的动画基本按照编辑器里的名称来就可以，有些复杂类型的小游戏实在是没明白怎么加载，按常规动画那套搞我没搞出来。有明白的可以指教下。主要还是findSMI可以找到SMITrigger这种类型的动画控制器，过过调用其实例的fire方法执行动画，还有findInput方法获得的SMIInput实例，通过传入泛型，double、bool等控制数值发生变化来触动动画的执行。具体的可以看下下面的一些案例，效果和代码都贴出来了，仅供参考，互相学习。

Flitter rive加载组件 rive: ^0.9.1

 rive | Flutter Package

Rive素材

Rive - Community

首先是Rive动画的基本使用

下面的代码分别演示Rive加载动画文件的三种方式。

  1. ​
  2. import 'dart:io';
  3.  
  4. import 'dart:typed_data';
  5.  
  6. import 'package:flutter/material.dart';
  7.  
  8. import 'package:flutter/services.dart';
  9.  
  10. import 'package:path_provider/path_provider.dart';
  11.  
  12. import 'package:rive/rive.dart';
  13.  
  14. ///author:          wangzhong
  15.  
  16. ///create:          2022-11-23 23:19
  17.  
  18. ///Description:     Rive动画的基本本使用，三种加载方式asset加载、network网络url加载、file文件加载
  19.  
  20. class SimpleAnimationExample extends StatefulWidget {
  21.  
  22.   @override
  23.  
  24.   State<StatefulWidget> createState() {
  25.  
  26.     return _SimepleAnimationExampleState();
  27.  
  28.   }
  29.  
  30. }
  31.  
  32. class _SimepleAnimationExampleState extends State<SimpleAnimationExample> {
  33.  
  34.   String pathRive = '';
  35.  
  36.   @override
  37.  
  38.   void initState() {
  39.  
  40.     super.initState();
  41.  
  42.     getFile().then((value) {
  43.  
  44.       setState(() {
  45.  
  46.         pathRive = value;
  47.  
  48.       });
  49.  
  50.     });
  51.  
  52.   }
  53.  
  54.   Future<String> getFile() async {
  55.  
  56.     ByteData bytes = await rootBundle.load("asset/rive/ferris-wheel.riv");
  57.  
  58.     String fileName = "ferris-wheel.riv";
  59.  
  60.     String dir = (await getApplicationSupportDirectory()).path;
  61.  
  62.     String filePath = "$dir/$fileName";
  63.  
  64.     ByteBuffer buffer = bytes.buffer;
  65.  
  66.     File file = await File(filePath).writeAsBytes(buffer.asUint8List());
  67.  
  68.     return file.path;
  69.  
  70.   }
  71.  
  72.   @override
  73.  
  74.   Widget build(BuildContext context) {
  75.  
  76.     return Scaffold(
  77.  
  78.       appBar: AppBar(
  79.  
  80.         title: Text('SimpleAnimationExample'),
  81.  
  82.       ),
  83.  
  84.       body: Column(
  85.  
  86.         children: [
  87.  
  88.           Expanded(
  89.  
  90.             child: RiveAnimation.asset(
  91.  
  92.               'asset/rive/halloween-ghost.riv',
  93.  
  94.               fit: BoxFit.cover,
  95.  
  96.             ),
  97.  
  98.           ),
  99.  
  100.           Expanded(
  101.  
  102.             child: RiveAnimation.network(
  103.  
  104.                 'https://public.rive.app/community/runtime-files/3605-7541-payfit-summit-2022.riv'),
  105.  
  106.           ),
  107.  
  108.           Expanded(
  109.  
  110.             child: Center(
  111.  
  112.               child: pathRive.isEmpty
  113.  
  114.                   ? Icon(Icons.confirmation_num_outlined)
  115.  
  116.                   : RiveAnimation.file(
  117.  
  118.                       pathRive,
  119.  
  120.                       fit: BoxFit.cover,
  121.  
  122.                     ),
  123.  
  124.             ),
  125.  
  126.           )
  127.  
  128.         ],
  129.  
  130.       ),
  131.  
  132.     );
  133.  
  134.   }
  135.  
  136. }
  137.  
  138. ​

播放暂停的控制

  1. import 'package:flutter/material.dart';
  2.  
  3. import 'package:rive/rive.dart';
  4.  
  5.  
  6.  
  7. ///author:          wangzhong
  8.  
  9. ///create:          2022-11-24 08:50
  10.  
  11. ///Description:     动画播放暂停控制
  12.  
  13. class PlayPauseAnimationExample extends StatefulWidget {
  14.  
  15.   PlayPauseAnimationExample({Key? key}) : super(key: key);
  16.  
  17.  
  18.  
  19.   @override
  20.  
  21.   _PlayPauseAnimationExampleState createState() =>
  22.  
  23.       _PlayPauseAnimationExampleState();
  24.  
  25. }
  26.  
  27.  
  28.  
  29. class _PlayPauseAnimationExampleState extends State<PlayPauseAnimationExample> {
  30.  
  31.   late RiveAnimationController _controller;
  32.  
  33.  
  34.  
  35.   /// Toggles between play and pause animation states
  36.  
  37.   void _togglePlay() =>
  38.  
  39.       setState(() => _controller.isActive = !_controller.isActive);
  40.  
  41.  
  42.  
  43.   /// Tracks if the animation is playing by whethe r controller is running
  44.  
  45.   bool get isPlaying => _controller.isActive;
  46.  
  47.  
  48.  
  49.   @override
  50.  
  51.   void initState() {
  52.  
  53.     // TODO: implement initState
  54.  
  55.     _controller = SimpleAnimation('Timeline 1');
  56.  
  57.     super.initState();
  58.  
  59.   }
  60.  
  61.  
  62.  
  63.   @override
  64.  
  65.   void dispose() {
  66.  
  67.     // TODO: implement dispose
  68.  
  69.     _controller.dispose();
  70.  
  71.     super.dispose();
  72.  
  73.   }
  74.  
  75.  
  76.  
  77.   @override
  78.  
  79.   Widget build(BuildContext context) {
  80.  
  81.     return Scaffold(
  82.  
  83.       appBar: AppBar(
  84.  
  85.         title: Text('PlayPauseAnimationExample'),
  86.  
  87.       ),
  88.  
  89.       body: Center(
  90.  
  91.           child: RiveAnimation.asset(
  92.  
  93.         'asset/rive/ferris-wheel.riv',
  94.  
  95.         controllers: [_controller],
  96.  
  97.         onInit: (state) => setState(() => print(state)),
  98.  
  99.       )),
  100.  
  101.       floatingActionButton: FloatingActionButton(
  102.  
  103.         onPressed: () => _togglePlay(),
  104.  
  105.         tooltip: isPlaying ? 'Pause' : 'Play',
  106.  
  107.         child: Icon(
  108.  
  109.           isPlaying ? Icons.pause : Icons.play_arrow,
  110.  
  111.         ),
  112.  
  113.       ),
  114.  
  115.     );
  116.  
  117.   }
  118.  
  119. }

动画中执行单次操作

  1. ​
  2. import 'package:flutter/material.dart';
  3.  
  4. import 'package:rive/rive.dart';
  5.  
  6. ///author:          wangzhong
  7.  
  8. ///create:          2022-11-24 20:59
  9.  
  10. ///Description:     动画中执行单次动作
  11.  
  12. class PlayOneShotExample extends StatefulWidget {
  13.  
  14.   PlayOneShotExample({Key? key}) : super(key: key);
  15.  
  16.   @override
  17.  
  18.   _PlayOneShotExampleState createState() => _PlayOneShotExampleState();
  19.  
  20. }
  21.  
  22. class _PlayOneShotExampleState extends State<PlayOneShotExample> {
  23.  
  24.   late RiveAnimationController _controller;
  25.  
  26.   /// Is the animation currently playing?
  27.  
  28.   bool _isPlaying = false;
  29.  
  30.   @override
  31.  
  32.   void initState() {
  33.  
  34.     super.initState();
  35.  
  36.     _controller = OneShotAnimation(
  37.  
  38.       'bounce',
  39.  
  40.       autoplay: false,
  41.  
  42.       onStop: () => setState(() => _isPlaying = false),
  43.  
  44.       onStart: () => setState(() => _isPlaying = true),
  45.  
  46.     );
  47.  
  48.   }
  49.  
  50.   @override
  51.  
  52.   Widget build(BuildContext context) {
  53.  
  54.     return Scaffold(
  55.  
  56.       appBar: AppBar(
  57.  
  58.         title: Text('PlayOneShotExample'),
  59.  
  60.         // titleTextStyle: TextStyle(fontSize: 20,color: Colors.black),
  61.  
  62.       ),
  63.  
  64.       body: Center(
  65.  
  66.         child: RiveAnimation.network(
  67.  
  68.           'https://cdn.rive.app/animations/vehicles.riv',
  69.  
  70.           animations: const ['idle', 'curves'],
  71.  
  72.           controllers: [_controller],
  73.  
  74.         ),
  75.  
  76.       ),
  77.  
  78.       floatingActionButton: FloatingActionButton(
  79.  
  80.         // disable the button while playing the animation
  81.  
  82.         onPressed: () => _isPlaying ? null : _controller.isActive = true,
  83.  
  84.         tooltip: 'Bounce',
  85.  
  86.         child: const Icon(Icons.arrow_upward),
  87.  
  88.       ),
  89.  
  90.     );
  91.  
  92.   }
  93.  
  94. }
  95.  
  96. ​

控制动画速度

  1. import 'package:flutter/material.dart';
  2.  
  3. import 'package:rive/rive.dart';
  4.  
  5. import 'package:yhm_app/utils/rive_speed_controller.dart';
  6.  
  7.  
  8.  
  9. ///author:          wangzhong
  10.  
  11. ///create:          2022-11-25 11:40
  12.  
  13. ///Description:     动画速度控制
  14.  
  15. class SpeedControllExample extends StatefulWidget {
  16.  
  17.   SpeedControllExample({Key? key}) : super(key: key);
  18.  
  19.  
  20.  
  21.   @override
  22.  
  23.   _SpeedControllExampleState createState() => _SpeedControllExampleState();
  24.  
  25. }
  26.  
  27.  
  28.  
  29. class _SpeedControllExampleState extends State<SpeedControllExample> {
  30.  
  31.   late RiveSpeedController speedController;
  32.  
  33.  
  34.  
  35.   @override
  36.  
  37.   void initState() {
  38.  
  39.     // TODO: implement initState
  40.  
  41.     speedController = RiveSpeedController('Timeline 1', speedMultiplier: 1);
  42.  
  43.     super.initState();
  44.  
  45.   }
  46.  
  47.  
  48.  
  49.   @override
  50.  
  51.   Widget build(BuildContext context) {
  52.  
  53.     return Scaffold(
  54.  
  55.       appBar: AppBar(
  56.  
  57.         title: Text('SpeedControllExample'),
  58.  
  59.         // titleTextStyle: TextStyle(fontSize: 20,color: Colors.black),
  60.  
  61.       ),
  62.  
  63.       body: Container(
  64.  
  65.         child: Column(
  66.  
  67.           children: [
  68.  
  69.             Expanded(
  70.  
  71.                 child: RiveAnimation.asset(
  72.  
  73.               'asset/rive/ferris-wheel.riv',
  74.  
  75.               fit: BoxFit.cover,
  76.  
  77.               // animations: const ['Timeline 1'],
  78.  
  79.               controllers: [speedController],
  80.  
  81.             )),
  82.  
  83.           ],
  84.  
  85.         ),
  86.  
  87.       ),
  88.  
  89.       floatingActionButton: FloatingActionButton(
  90.  
  91.         onPressed: () {
  92.  
  93.           setState(() {
  94.  
  95.             if (speedController.speedMultiplier > 9) {
  96.  
  97.               speedController.speedMultiplier = 0;
  98.  
  99.             }
  100.  
  101.             speedController.speedMultiplier++;
  102.  
  103.           });
  104.  
  105.         },
  106.  
  107.         child: Text('x${speedController.speedMultiplier}'),
  108.  
  109.       ),
  110.  
  111.     );
  112.  
  113.   }
  114.  
  115. }
  116.  
  117.  
  118.  
  119. // class RiveSpeedController extends SimpleAnimation {
  120.  
  121. //   final double speedMultiplier;
  122.  
  123. //
  124.  
  125. //   RiveSpeedController(
  126.  
  127. //     String animationName, {
  128.  
  129. //     double mix = 1,
  130.  
  131. //     this.speedMultiplier = 1,
  132.  
  133. //   }) : super(animationName, mix: mix);
  134.  
  135. //
  136.  
  137. //   @override
  138.  
  139. //   void apply(RuntimeArtboard artboard, double elapsedSeconds) {
  140.  
  141. //     if (instance == null || !instance!.keepGoing) {
  142.  
  143. //       isActive = false;
  144.  
  145. //     }
  146.  
  147. //     instance!
  148.  
  149. //       ..animation.apply(instance!.time, coreContext: artboard, mix: mix)
  150.  
  151. //       ..advance(elapsedSeconds * speedMultiplier);
  152.  
  153. //   }
  154.  
  155. // }

下载进度动画

  1. import 'dart:math';
  2.  
  3.  
  4.  
  5. import 'package:flutter/material.dart';
  6.  
  7. import 'package:flutter/services.dart';
  8.  
  9. import 'package:rive/rive.dart';
  10.  
  11.  
  12.  
  13. ///author:          wangzhong
  14.  
  15. ///create:          2022-11-26 17:40
  16.  
  17. ///Description:     xxxx
  18.  
  19. class DownloadProgressExample extends StatefulWidget {
  20.  
  21.   DownloadProgressExample({Key? key}) : super(key: key);
  22.  
  23.  
  24.  
  25.   @override
  26.  
  27.   _DownloadProgressExampleState createState() =>
  28.  
  29.       _DownloadProgressExampleState();
  30.  
  31. }
  32.  
  33.  
  34.  
  35. class _DownloadProgressExampleState extends State<DownloadProgressExample> {
  36.  
  37.   // SMIInput<bool> start;
  38.  
  39.   // SMIInput<double> progeress;
  40.  
  41.  
  42.  
  43.   Artboard? _riveArtboard;
  44.  
  45.  
  46.  
  47.   // SMIInput<bool>? _start;
  48.  
  49.   SMITrigger? _start;
  50.  
  51.   SMIInput<double>? _progress;
  52.  
  53.  
  54.  
  55.   @override
  56.  
  57.   void initState() {
  58.  
  59.     rootBundle.load('asset/rive/liquid_download.riv').then(
  60.  
  61.       (data) async {
  62.  
  63.         // Load the RiveFile from the binary data.
  64.  
  65.         final file = RiveFile.import(data);
  66.  
  67.  
  68.  
  69.         // The artboard is the root of the animation and gets drawn in the
  70.  
  71.         // Rive widget.
  72.  
  73.         final artboard = file.mainArtboard;
  74.  
  75.         var controller =
  76.  
  77.             StateMachineController.fromArtboard(artboard, 'Download');
  78.  
  79.         if (controller != null) {
  80.  
  81.           artboard.addController(controller);
  82.  
  83.           _start = controller.findSMI('Download');
  84.  
  85.           _progress = controller.findInput('Progress');
  86.  
  87.           print(_start);
  88.  
  89.           print(_progress);
  90.  
  91.         }
  92.  
  93.         setState(() => _riveArtboard = artboard);
  94.  
  95.       },
  96.  
  97.     );
  98.  
  99.     super.initState();
  100.  
  101.   }
  102.  
  103.  
  104.  
  105.   @override
  106.  
  107.   Widget build(BuildContext context) {
  108.  
  109.     final ThemeData theme = Theme.of(context);
  110.  
  111.  
  112.  
  113.     return Scaffold(
  114.  
  115.       appBar: AppBar(
  116.  
  117.         title: Text('DownloadProgressExample'),
  118.  
  119.         // titleTextStyle: TextStyle(fontSize: 20,color: Colors.black),
  120.  
  121.       ),
  122.  
  123.       body: Container(
  124.  
  125.         child: Column(
  126.  
  127.           children: [
  128.  
  129.             Expanded(
  130.  
  131.                 child: _riveArtboard == null
  132.  
  133.                     ? SizedBox()
  134.  
  135.                     : GestureDetector(
  136.  
  137.                         onTap: () {
  138.  
  139.                           _start?.fire();
  140.  
  141.                           // _start?.value = true;
  142.  
  143.                         },
  144.  
  145.                         child: Rive(artboard: _riveArtboard!))),
  146.  
  147.             _riveArtboard == null
  148.  
  149.                 ? SizedBox()
  150.  
  151.                 : SliderTheme(
  152.  
  153.                     data: theme.sliderTheme.copyWith(
  154.  
  155.                       activeTrackColor: Colors.deepPurple,
  156.  
  157.                       inactiveTrackColor: Colors.blue.withAlpha(55),
  158.  
  159.                       activeTickMarkColor:
  160.  
  161.                           theme.colorScheme.onSurface.withOpacity(0.7),
  162.  
  163.                       inactiveTickMarkColor:
  164.  
  165.                           theme.colorScheme.surface.withOpacity(0.7),
  166.  
  167.                       overlayColor:
  168.  
  169.                           theme.colorScheme.onSurface.withOpacity(0.12),
  170.  
  171.                       thumbColor: Colors.deepPurple,
  172.  
  173.                       valueIndicatorColor: Colors.deepPurpleAccent,
  174.  
  175.                       thumbShape: _CustomThumbShape(),
  176.  
  177.                       valueIndicatorShape: _CustomValueIndicatorShape(),
  178.  
  179.                       valueIndicatorTextStyle: theme.accentTextTheme.bodyText2!
  180.  
  181.                           .copyWith(color: theme.colorScheme.onSurface),
  182.  
  183.                     ),
  184.  
  185.                     child: Slider(
  186.  
  187.                         value: _progress!.value,
  188.  
  189.                         min: 0,
  190.  
  191.                         max: 100,
  192.  
  193.                         divisions: 10,//加上这个属性才会显示label
  194.  
  195.                         activeColor: Colors.orangeAccent,
  196.  
  197.                         inactiveColor: Colors.green.withAlpha(99),
  198.  
  199.                         thumbColor: Colors.deepPurpleAccent,
  200.  
  201.                         label: _progress!.value.toStringAsFixed(2),
  202.  
  203.                         onChanged: (value) {
  204.  
  205.                           setState(() {
  206.  
  207.                             _progress?.value = value;
  208.  
  209.                           });
  210.  
  211.                         })),
  212.  
  213.             SizedBox(
  214.  
  215.               height: 30,
  216.  
  217.             )
  218.  
  219.           ],
  220.  
  221.         ),
  222.  
  223.       ),
  224.  
  225.     );
  226.  
  227.   }
  228.  
  229. }
  230.  
  231.  
  232.  
  233. class _CustomThumbShape extends SliderComponentShape {
  234.  
  235.   static const double _thumbSize = 4.0;
  236.  
  237.   static const double _disabledThumbSize = 3.0;
  238.  
  239.  
  240.  
  241.   @override
  242.  
  243.   Size getPreferredSize(bool isEnabled, bool isDiscrete) {
  244.  
  245.     return isEnabled
  246.  
  247.         ? const Size.fromRadius(_thumbSize)
  248.  
  249.         : const Size.fromRadius(_disabledThumbSize);
  250.  
  251.   }
  252.  
  253.  
  254.  
  255.   static final Animatable<double> sizeTween = Tween<double>(
  256.  
  257.     begin: _disabledThumbSize,
  258.  
  259.     end: _thumbSize,
  260.  
  261.   );
  262.  
  263.  
  264.  
  265.   @override
  266.  
  267.   void paint(PaintingContext context, Offset center,
  268.  
  269.       {required Animation<double> activationAnimation,
  270.  
  271.       required Animation<double> enableAnimation,
  272.  
  273.       required bool isDiscrete,
  274.  
  275.       required TextPainter labelPainter,
  276.  
  277.       required RenderBox parentBox,
  278.  
  279.       required SliderThemeData sliderTheme,
  280.  
  281.       required TextDirection textDirection,
  282.  
  283.       required double value,
  284.  
  285.       required double textScaleFactor,
  286.  
  287.       required Size sizeWithOverflow}) {
  288.  
  289.     final Canvas canvas = context.canvas;
  290.  
  291.     final ColorTween colorTween = ColorTween(
  292.  
  293.       begin: sliderTheme.disabledThumbColor,
  294.  
  295.       end: sliderTheme.thumbColor,
  296.  
  297.     );
  298.  
  299.     final double size = _thumbSize * sizeTween.evaluate(enableAnimation);
  300.  
  301.     final Path thumbPath = _downTriangle(size, center);
  302.  
  303.     canvas.drawPath(thumbPath,
  304.  
  305.         Paint()..color = colorTween.evaluate(enableAnimation) ?? Colors.blue);
  306.  
  307.   }
  308.  
  309. }
  310.  
  311.  
  312.  
  313. Path _upTriangle(double size, Offset thumbCenter) =>
  314.  
  315.     _downTriangle(size, thumbCenter, invert: true);
  316.  
  317.  
  318.  
  319. Path _downTriangle(double size, Offset thumbCenter, {bool invert = false}) {
  320.  
  321.   final Path thumbPath = Path();
  322.  
  323.   final double height = sqrt(3.0) / 2.0;
  324.  
  325.   final double centerHeight = size * height / 3.0;
  326.  
  327.   final double halfSize = size / 2.0;
  328.  
  329.   final double sign = invert ? -1.0 : 1.0;
  330.  
  331.   thumbPath.moveTo(
  332.  
  333.       thumbCenter.dx - halfSize, thumbCenter.dy + sign * centerHeight);
  334.  
  335.   thumbPath.lineTo(thumbCenter.dx, thumbCenter.dy - 2.0 * sign * centerHeight);
  336.  
  337.   thumbPath.lineTo(
  338.  
  339.       thumbCenter.dx + halfSize, thumbCenter.dy + sign * centerHeight);
  340.  
  341.   thumbPath.close();
  342.  
  343.   return thumbPath;
  344.  
  345. }
  346.  
  347.  
  348.  
  349. class _CustomValueIndicatorShape extends SliderComponentShape {
  350.  
  351.   static const double _indicatorSize = 4.0;
  352.  
  353.   static const double _disabledIndicatorSize = 3.0;
  354.  
  355.   static const double _slideUpHeight = 30.0;
  356.  
  357.  
  358.  
  359.   @override
  360.  
  361.   Size getPreferredSize(bool isEnabled, bool isDiscrete) {
  362.  
  363.     return Size.fromRadius(isEnabled ? _indicatorSize : _disabledIndicatorSize);
  364.  
  365.   }
  366.  
  367.  
  368.  
  369.   static final Animatable<double> sizeTween = Tween<double>(
  370.  
  371.     begin: _disabledIndicatorSize,
  372.  
  373.     end: _indicatorSize,
  374.  
  375.   );
  376.  
  377.  
  378.  
  379.   @override
  380.  
  381.   void paint(PaintingContext context, Offset center,
  382.  
  383.       {required Animation<double> activationAnimation,
  384.  
  385.       required Animation<double> enableAnimation,
  386.  
  387.       required bool isDiscrete,
  388.  
  389.       required TextPainter labelPainter,
  390.  
  391.       required RenderBox parentBox,
  392.  
  393.       required SliderThemeData sliderTheme,
  394.  
  395.       required TextDirection textDirection,
  396.  
  397.       required double value,
  398.  
  399.       required double textScaleFactor,
  400.  
  401.       required Size sizeWithOverflow}) {
  402.  
  403.     final Canvas canvas = context.canvas;
  404.  
  405.     final ColorTween enableColor = ColorTween(
  406.  
  407.       begin: sliderTheme.disabledThumbColor,
  408.  
  409.       end: sliderTheme.valueIndicatorColor,
  410.  
  411.     );
  412.  
  413.     final Tween<double> slideUpTween = Tween<double>(
  414.  
  415.       begin: 0.0,
  416.  
  417.       end: _slideUpHeight,
  418.  
  419.     );
  420.  
  421.     final double size = _indicatorSize * sizeTween.evaluate(enableAnimation);
  422.  
  423.     final Offset slideUpOffset =
  424.  
  425.         Offset(0.0, -slideUpTween.evaluate(activationAnimation));
  426.  
  427.     final Path thumbPath = _upTriangle(size, center + slideUpOffset);
  428.  
  429.     final Color paintColor = enableColor
  430.  
  431.             .evaluate(enableAnimation)
  432.  
  433.             ?.withAlpha((255.0 * activationAnimation.value).round()) ??
  434.  
  435.         Colors.black;
  436.  
  437.     canvas.drawPath(
  438.  
  439.       thumbPath,
  440.  
  441.       Paint()..color = paintColor,
  442.  
  443.     );
  444.  
  445.     canvas.drawLine(
  446.  
  447.         center,
  448.  
  449.         center + slideUpOffset,
  450.  
  451.         Paint()
  452.  
  453.           ..color = paintColor
  454.  
  455.           ..style = PaintingStyle.stroke
  456.  
  457.           ..strokeWidth = 2.0);
  458.  
  459.     labelPainter.paint(
  460.  
  461.         canvas,
  462.  
  463.         center +
  464.  
  465.             slideUpOffset +
  466.  
  467.             Offset(-labelPainter.width / 2.0, -labelPainter.height - 4.0));
  468.  
  469.   }
  470.  
  471. }

状态器

  1. import 'package:flutter/material.dart';
  2.  
  3. import 'package:flutter/services.dart';
  4.  
  5. import 'package:rive/rive.dart';
  6.  
  7.  
  8.  
  9. ///author:          wangzhong
  10.  
  11. ///create:          2022-11-26 17:51
  12.  
  13. ///Description:     xxxx
  14.  
  15. class MoreTypeStateChangeExample extends StatefulWidget {
  16.  
  17.   MoreTypeStateChangeExample({Key? key}) : super(key: key);
  18.  
  19.  
  20.  
  21.   @override
  22.  
  23.   _MoreTypeStateChangeExampleState createState() =>
  24.  
  25.       _MoreTypeStateChangeExampleState();
  26.  
  27. }
  28.  
  29.  
  30.  
  31. class _MoreTypeStateChangeExampleState
  32.  
  33.     extends State<MoreTypeStateChangeExample> {
  34.  
  35.   Artboard? _riveWomenArtboard;
  36.  
  37.   SMIInput<double>? _levelInput;
  38.  
  39.  
  40.  
  41.   Artboard? _riveMenArtboard;
  42.  
  43.   SMITrigger? _crossInput;
  44.  
  45.   SMITrigger? _jabInput;
  46.  
  47.   SMITrigger? _kickInput;
  48.  
  49.  
  50.  
  51.   SMIInput<bool>? _runInput;
  52.  
  53.   SMIInput<double>? _turnInput;
  54.  
  55.  
  56.  
  57.   @override
  58.  
  59.   void initState() {
  60.  
  61.     rootBundle.load('asset/rive/skills.riv').then(
  62.  
  63.       (data) async {
  64.  
  65.         // Load the RiveFile from the binary data.
  66.  
  67.         final file = RiveFile.import(data);
  68.  
  69.  
  70.  
  71.         // The artboard is the root of the animation and gets drawn in the
  72.  
  73.         // Rive widget.
  74.  
  75.         final artboard = file.mainArtboard;
  76.  
  77.         var controller =
  78.  
  79.             StateMachineController.fromArtboard(artboard, 'Designer\'s Test');
  80.  
  81.         if (controller != null) {
  82.  
  83.           artboard.addController(controller);
  84.  
  85.           _levelInput = controller.findInput('Level');
  86.  
  87.         }
  88.  
  89.         setState(() => _riveWomenArtboard = artboard);
  90.  
  91.       },
  92.  
  93.     );
  94.  
  95.  
  96.  
  97.     rootBundle.load('asset/rive/character-controller.riv').then(
  98.  
  99.       (data) async {
  100.  
  101.         // Load the RiveFile from the binary data.
  102.  
  103.         final file = RiveFile.import(data);
  104.  
  105.         // The artboard is the root of the animation and gets drawn in the
  106.  
  107.         // Rive widget.
  108.  
  109.         final artboard = file.mainArtboard;
  110.  
  111.         var controller =
  112.  
  113.             StateMachineController.fromArtboard(artboard, 'State Machine 1');
  114.  
  115.         if (controller != null) {
  116.  
  117.           artboard.addController(controller);
  118.  
  119.           _crossInput = controller.findSMI('crossPunch');
  120.  
  121.           _jabInput = controller.findSMI('jabPunch');
  122.  
  123.           _kickInput = controller.findSMI('sideKick');
  124.  
  125.           _runInput = controller.findInput('isRunning');
  126.  
  127.           _turnInput = controller.findInput('xDir');
  128.  
  129.         }
  130.  
  131.         setState(() => _riveMenArtboard = artboard);
  132.  
  133.       },
  134.  
  135.     );
  136.  
  137.  
  138.  
  139.     super.initState();
  140.  
  141.   }
  142.  
  143.  
  144.  
  145.   @override
  146.  
  147.   Widget build(BuildContext context) {
  148.  
  149.     return Scaffold(
  150.  
  151.       appBar: AppBar(
  152.  
  153.         title: Text('MoreTypeStateChangeExample'),
  154.  
  155.         // titleTextStyle: TextStyle(fontSize: 20,color: Colors.black),
  156.  
  157.       ),
  158.  
  159.       body: Container(
  160.  
  161.         child: Column(
  162.  
  163.           children: [
  164.  
  165.             Expanded(
  166.  
  167.                 child: _riveWomenArtboard == null
  168.  
  169.                     ? SizedBox()
  170.  
  171.                     : Rive(
  172.  
  173.                         artboard: _riveWomenArtboard!,
  174.  
  175.                       )),
  176.  
  177.             Padding(
  178.  
  179.               padding: const EdgeInsets.all(20),
  180.  
  181.               child: Row(
  182.  
  183.                 children: [
  184.  
  185.                   Expanded(
  186.  
  187.                     child: ElevatedButton(
  188.  
  189.                         onPressed: () {
  190.  
  191.                           _levelInput?.change(0);
  192.  
  193.                         },
  194.  
  195.                         child: Text('baby')),
  196.  
  197.                   ),
  198.  
  199.                   Padding(
  200.  
  201.                     padding: const EdgeInsets.symmetric(
  202.  
  203.                         horizontal: 10, vertical: 20),
  204.  
  205.                     child: ElevatedButton(
  206.  
  207.                         onPressed: () {
  208.  
  209.                           _levelInput?.change(1);
  210.  
  211.                         },
  212.  
  213.                         child: Text('younger')),
  214.  
  215.                   ),
  216.  
  217.                   Expanded(
  218.  
  219.                     child: ElevatedButton(
  220.  
  221.                         onPressed: () {
  222.  
  223.                           _levelInput?.change(2);
  224.  
  225.                         },
  226.  
  227.                         child: Text('old people')),
  228.  
  229.                   ),
  230.  
  231.                 ],
  232.  
  233.               ),
  234.  
  235.             ),
  236.  
  237.             Expanded(
  238.  
  239.               child: _riveMenArtboard == null
  240.  
  241.                   ? SizedBox()
  242.  
  243.                   : Rive(
  244.  
  245.                       artboard: _riveMenArtboard!,
  246.  
  247.                     ),
  248.  
  249.             ),
  250.  
  251.             Row(
  252.  
  253.               children: [
  254.  
  255.                 Expanded(
  256.  
  257.                   child: ElevatedButton(
  258.  
  259.                       onPressed: () {
  260.  
  261.                         _crossInput?.fire();
  262.  
  263.                       },
  264.  
  265.                       child: Text('cross')),
  266.  
  267.                 ),
  268.  
  269.                 Expanded(
  270.  
  271.                   child: Padding(
  272.  
  273.                     padding: const EdgeInsets.symmetric(horizontal: 10),
  274.  
  275.                     child: ElevatedButton(
  276.  
  277.                         onPressed: () {
  278.  
  279.                           _jabInput?.fire();
  280.  
  281.                         },
  282.  
  283.                         child: Text('jab')),
  284.  
  285.                   ),
  286.  
  287.                 ),
  288.  
  289.                 Expanded(
  290.  
  291.                   child: ElevatedButton(
  292.  
  293.                       onPressed: () {
  294.  
  295.                         _kickInput?.fire();
  296.  
  297.                       },
  298.  
  299.                       child: Text('kick')),
  300.  
  301.                 ),
  302.  
  303.                 Expanded(
  304.  
  305.                   child: Padding(
  306.  
  307.                     padding: const EdgeInsets.symmetric(horizontal: 10),
  308.  
  309.                     child: ElevatedButton(
  310.  
  311.                         onPressed: () {
  312.  
  313.                           bool? flag = _runInput?.value;
  314.  
  315.                           _runInput?.value = !flag!;
  316.  
  317.                         },
  318.  
  319.                         child: Text('run')),
  320.  
  321.                   ),
  322.  
  323.                 ),
  324.  
  325.               ],
  326.  
  327.             ),
  328.  
  329.             Padding(
  330.  
  331.               padding: const EdgeInsets.only(bottom: 20),
  332.  
  333.               child: Row(
  334.  
  335.                 children: [
  336.  
  337.                   Expanded(
  338.  
  339.                     child: ElevatedButton(
  340.  
  341.                         onPressed: () {
  342.  
  343.                           print(_turnInput);
  344.  
  345.                           _turnInput?.change(-1);
  346.  
  347.                         },
  348.  
  349.                         child: Text('turn left')),
  350.  
  351.                   ),
  352.  
  353.                   Expanded(
  354.  
  355.                     child: Padding(
  356.  
  357.                       padding: const EdgeInsets.symmetric(horizontal: 10),
  358.  
  359.                       child: ElevatedButton(
  360.  
  361.                           onPressed: () {
  362.  
  363.                             _turnInput?.value = 1;
  364.  
  365.                           },
  366.  
  367.                           child: Text('turn right')),
  368.  
  369.                     ),
  370.  
  371.                   ),
  372.  
  373.                 ],
  374.  
  375.               ),
  376.  
  377.             ),
  378.  
  379.           ],
  380.  
  381.         ),
  382.  
  383.       ),
  384.  
  385.     );
  386.  
  387.   }
  388.  
  389. }

如上图所示，状态切换，点击方块时，圆圈会做出一个亮暗的变化，模仿了一个开关灯的操作。

在rive平台编辑器上看到的在这组动画中有Inputs中有开关，Listener中有监听

  1. Expanded(
  2.  
  3.   child: GestureDetector(
  4.  
  5.     // onTap: _hitSwitch,
  6.  
  7.     child: RiveAnimation.asset(
  8.  
  9.       'asset/rive/light_switch.riv',
  10.  
  11.       stateMachines: ['Switch'],
  12.  
  13.     ),
  14.  
  15.   ),
  16.  
  17. ),

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/973756
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号