Flutter动画色彩修改插件rive_color_modifier的使用

Rive Color Modifier

此包提供了一种简单直接的方法，在运行时修改Rive动画中特定组件的颜色，同时保持它们在整个动画中的透明度（alpha值）。

Demo

Getting Started

Important Notes

1. 导出名称：在导出Rive文件时，请确保启用“导出选项 -> 导出所有名称”设置。这对于该包的正常工作至关重要。

2. Rive Pro vs. No Pro：当使用Rive文件的运行时导出版本时，更改某些元素（如描边和填充）颜色存在一些限制。为了获得完整功能，可能需要使用备份导出选项，这是Rive Pro的功能。自Rive编辑器版本v0.8.1440以来，不导出对象名称的选项被启用以减少文件大小。这会导致只有形状名称被导出，但不包括它们包含的元素（如填充和描边）的名称。我正在探索有效的解决方案，以便非Pro用户仍然可以使用填充和描边的名称。

3. 渐变支持：自版本2.1.1起，此包现在支持使用新的RiveGradientComponent小部件更改线性和径向渐变。

使用步骤

在开始使用这个包之前，必须理解的是，你需要有一个包含你想要修改的动画的.riv文件。如果你还没有在Rive中创建任何动画或对它的编辑器不熟悉，无需担心。你可以访问社区部分，浏览并编辑由社区分享的令人印象深刻的动画。在此案例中，我借用了来自JcToon的这个精美的动画。

关键步骤

1. 为Artboard命名：为包含你想要更改的动画的Artboard分配一个名称。这一步非常重要，因为我们稍后将使用分配的名称检索Artboard。

// 在StatefulWidget的initState方法中调用此方法
Future<void> _load() async {
  // 从资产包加载RiveFile
  final avatarFile = await RiveFile.asset('assets/avatar.riv');
  // 获取包含你想要修改的动画的Artboard
  final artboard = avatarFile.artboardByName('Avatar')!;

  setState(
    () {
      // 初始化之前声明的_avatarArtboard变量
      _avatarArtboard = artboard;
    },
  );
}

1. 为每个Shape命名：确保每个Shape都有一个唯一名称，因为这将是我们在代码中用来修改每个Shape颜色的标识符。

RiveColorModifier(
  artboard: _avatarArtboard,
  components: [
    //* EARRING COLOR
    RiveColorComponent(
      shapePattern: 'Left Earring', // Shape name
      // rest of the code
    ),
    RiveColorComponent(
      shapePattern: 'Right Earring', // Shape name
      //...
    ),
    // ...
  ],
)

或者使用模式匹配多个Shape：

RiveColorModifier(
  artboard: _avatarArtboard,
  components: [
    //* EARRING COLOR
    RiveColorComponent(
      shapePattern: '.*Earring', // 匹配所有以"Earring"结尾的Shape
      // rest of the code
    ),
    // ...
  ],
)

1. 为每个Fill或Stroke命名：确保每个你想要修改的Fill或Stroke都有一个唯一名称。

RiveColorModifier(
  artboard: _avatarArtboard,
  components: [
    //* EARRING COLOR
    RiveColorComponent(
      shapePattern: 'Left Earring',
      fillPattern: 'Left Earring Fill', // Fill name
      color: Colors.yellow, // Color
    ),
    RiveColorComponent(
      shapePattern: 'Right Earring',
      fillPattern: 'Right Earring Fill', // Fill name
      color: Colors.yellow, // Color
    ),
    // ...
  ],
)

或者使用模式匹配多个Fill或Stroke：

RiveColorModifier(
  artboard: _avatarArtboard,
  components: [
    //* EARRING COLOR
    RiveColorComponent(
      shapePattern: '.*Earring', // 匹配所有以"Earring"结尾的Shape
      fillPattern: '.*Earring Fill', // 匹配所有以"Earring Fill"结尾的Fill
      color: Colors.yellow, // Color
    ),
    // ...
  ],
)

如何工作

不使用模式

此包允许你动态修改Rive动画中特定组件的颜色属性。以下是如何使用RiveColorModifier和RiveColorComponent来更改动画中特定Shapes颜色的示例。

// 示例：如何使用RiveColorModifier
RiveColorModifier(
  artboard: _yourArtboard,
  components: [
    // 更改Shape的Fill颜色
    RiveColorComponent(
      shapePattern: 'Your Shape Name',
      fillPattern: 'Your Fill Name',
      color: isDarkMode ? Colors.white : Colors.black, // 根据主题动态改变颜色
    ),
    // 更改Shape的Stroke颜色
    RiveColorComponent(
      shapePattern: 'Your Shape Name',
      strokePattern: 'Your Stroke Name',
      color: isDarkMode ? Colors.white : Colors.black, // 根据主题动态改变颜色
    ),
  ],
)

使用模式

// 示例：如何使用带有模式的RiveColorModifier
RiveColorModifier(
  artboard: _yourArtboard,
  components: [
    // 使用单个RiveColorComponent更改多个Shapes的Fills和Strokes颜色
    RiveColorComponent(
         shapePattern : '.*',        // 匹配所有Shapes
         fillPattern  : '.*primary', // 匹配所有以"primary"结尾的Fills
         strokePattern: '.*primary', // 匹配所有以"primary"结尾的Strokes
         color: primaryColor,
      ),
  ]
)

更改渐变

自版本2.1.1起，你现在可以修改线性和径向渐变：

// 示例：如何使用RiveGradientComponent更改渐变
RiveColorModifier(
  artboard: _yourArtboard,
  components: [
    // 更改线性或径向渐变
    RiveGradientComponent(
      shapePattern: 'Your Shape Name',
      fillPattern: '.*', // 匹配所有Fills
      colors: [Colors.red, Colors.blue],
      stops: [0.0, 1.0],
    ),
  ],
)

其他信息

更多关于如何使用此包的信息，或如果你想贡献，请访问GitHub仓库。如果你遇到任何问题或有功能请求，请在问题跟踪器中提交。

不要忘记如果你觉得这个包有用的话，给它点个赞。如果有任何建议，请随时告诉我。

你的反馈和贡献将帮助改进这个包！

完整示例代码

import 'package:animated_theme_switcher/animated_theme_switcher.dart';
import 'package:example/config/config.dart';
import 'package:example/screens/home_screen.dart';
import 'package:flutter/material.dart';

void main() {
  final appTheme = AppTheme(isDarkMode: false);

  runApp(
    ThemeProvider(
      initTheme: appTheme.getTheme(),
      builder: (context, theme) => MaterialApp(
        title: 'Rive Change Color Example',
        theme: theme,
        home: const HomeScreen(),
      ),
    ),
  );
}