Animated shaking

[xuelongqy]

Description

I don't know how to describe it clearly, I tried looking at the code, but I can't locate it. I have provided a video where the problem can be clearly seen.

Animation Code

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

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

  @override
  State<SimpleAssetAnimation> createState() => _SimpleAnimationState();
}

class _SimpleAnimationState extends State<SimpleAssetAnimation> {
  StateMachineController? _controller;
  SMIInput<double>? _pullAmountInput;
  SMITrigger? _pullReleaseTrigger;
  SMITrigger? _loadFinishedTrigger;

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  void _onRiveInit(Artboard artboard) {
    _controller?.dispose();
    _controller = StateMachineController.fromArtboard(artboard, 'Reload')!;
    artboard.addController(_controller!);
    _pullAmountInput = _controller!.findInput<double>('pullAmount')!;
    _pullReleaseTrigger =
    _controller!.findInput<bool>('pullRelease')! as SMITrigger;
    _loadFinishedTrigger =
    _controller!.findInput<bool>('loadFinished')! as SMITrigger;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Animation'),
      ),
      body: Center(
        child: RiveAnimation.network(
          'https://xuelongqy.github.io/flutter_easy_refresh/assets/packages/easy_refresh_skating/assets/skating.riv',
          fit: BoxFit.cover,
          onInit: _onRiveInit,
        ),
      ),
    );
  }
}

Steps To Reproduce

Steps to reproduce the behavior:

1. Run code

2. Animated shaking of the legs

Source .riv/.rev file

https://rive.app/community/2233-4412-pull-to-refresh-animation-example/

Expected behavior

The animation of the legs works fine

Screenshots

Record_2023-01-12-11-00-54.mp4

Device & Versions (please complete the following information)

• Device: One Plus 7 pro (GM910)
• OS: Android SDK API Level 31
• Flutter Version: 3.3.10

[HayesGordon]

Hi @xuelongqy, thanks for reporting. I can replicate it on my end and we'll investigate.

Which Flutter channel are you on?

[xuelongqy]

Hi @xuelongqy, thanks for reporting. I can replicate it on my end and we'll investigate.

Which Flutter channel are you on?

It will crash on Flutter 3.7.0

[malikhamza88]

The same problem causes higher CPU usage approx 45% when using onInit and use custom controls. It also feels noticeable lag on an android device

[HayesGordon]

@xuelongqy I tested and it seems like it may be in issue with the compiler. For me it only crashes with a debug build, and appears to be fixed in the Master Flutter channel. Can you confirm if you experience the same?

A similar (though maybe not related) issue was reported here: flutter/flutter#118559

For that issue there is a cherry pick for stable: dart-lang/sdk#51147

[malikhamza88]

@HayesGordon I have tried by switching to flutter master but it didn't change anything

[HayesGordon]

Hi @malikhamza88 are you referring to the CPU usage or the crash. The suggestion to switch to Master was mostly related to the crash

[malikhamza88]

oh. I was referring to CPU usage and lag issues using approx similar code

[HayesGordon]

Just an update, the crash is resolved in v3.7.2 of Flutter, and the inconsistent drawing has been reported to the Flutter team. Waiting for a fix to land

[HayesGordon]

Tested on the latest beta version of Flutter, and this original issue appears to be resolved (inconsistent path transformation)

Flutter 3.10.0-1.5.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision b1c77b7ed3 (8 days ago) • 2023-05-02 21:11:36 -0600
Engine • revision 50e509c2bd
Tools • Dart 3.0.0 (build 3.0.0-417.4.beta) • DevTools 2.23.1

Closing this. Please reopen if anyone still experiences this on their end/platform.