Repository: flutter
Issue: [WEB] [HTML] Opacity values in Rive don't work on the web with html renderer
Labels: engine,platform-web,c: rendering,e: web_html,has reproducible steps,P2,found in release: 2.8,found in release: 2.9,team-web,triaged-web

NOTE: I filed this issue first on Rive, and it turned out the problem lies in the Flutter engine. [Here is a reference to the original issue](https://github.com/rive-app/rive-flutter/issues/200).

## Steps to Reproduce

When a Rive animation has zero opacity elements (in my case, the opacity values are animating), they all render with 100% opacity. 

**Expected results:**
<img width="250" alt="Screen Shot 2022-01-24 at 8 11 40 PM" src="https://user-images.githubusercontent.com/29583601/151041758-3fdc27ab-5a02-4dff-88c2-b4b6b0692c11.png">


**Actual results:**
<img width="250" alt="Screen Shot 2022-01-24 at 8 09 36 PM" src="https://user-images.githubusercontent.com/29583601/151041795-62e07aa4-2cac-4566-a1c2-dbb4dde3280e.png">

<details>
<summary>Code sample</summary>

The original `.riv` and `.rev` files can be found on [the original issue](https://github.com/rive-app/rive-flutter/issues/200).

```dart
  SMITrigger? _relating;
  SMITrigger? _neutral;
  SMITrigger? _inspiration;
  SMITrigger? _laughing; 

  void _onRiveInit(Artboard artboard) {
    StateMachineController? controller =
        StateMachineController.fromArtboard(artboard, 'State Machine');
    artboard.addController(controller!);
    _relating = controller.findInput<bool>('Relating') as SMITrigger;
    _neutral = controller.findInput<bool>('Neutral') as SMITrigger;
    _inspiration = controller.findInput<bool>('Inspiration') as SMITrigger;
    _laughing = controller.findInput<bool>('Laughing') as SMITrigger;
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          title: const Text('Test'),
        ),
        body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  width: 200,
                  height: 174,
                  child: RiveAnimation.asset(
                    'assets/flutter1.riv',
                    onInit: _onRiveInit,
                  ),
                ),
                TextButton(
                  onPressed: () {
                    _relating!.fire();
                  },
                  child: const Text('Relating'),
                ),
                TextButton(
                  onPressed: () {
                    _neutral!.fire();
                  },
                  child: const Text('Neutral'),
                ),
                TextButton(
                  onPressed: () {
                    _inspiration!.fire();
                  },
                  child: const Text('Inspiration'),
                ),
                TextButton(
                  onPressed: () {
                    _laughing!.fire();
                  },
                  child: const Text('Laughing'),
                ),
              ]),
        ));
  }
```

</details>

<details>
  <summary>Logs</summary>

`flutter run --verbose`:
I didn't find any logs between backticks.

`flutter analyze`:
```
No issues found! (ran in 1.5s)
```

`flutter doctor -v`
```
[✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-x64, locale en-US)
    • Flutter version 2.8.1 at /Users/behnamsattar/tools/bin/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 77d935af4d (6 weeks ago), 2021-12-16 08:37:33 -0800
    • Engine revision 890a5fca2e
    • Dart version 2.15.1

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/behnamsattar/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.63.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.26.0

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 97.0.4692.99

! Doctor found issues in 1 category.
```

</details>