Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Trying to animate datapoints. Almost have it, but not quite. #26

Closed
MostHated opened this issue Jul 28, 2019 · 10 comments
Closed

Trying to animate datapoints. Almost have it, but not quite. #26

MostHated opened this issue Jul 28, 2019 · 10 comments

Comments

@MostHated
Copy link

MostHated commented Jul 28, 2019 •
edited

I was trying to use the below to animate the datapoints. I feel like it is close, but it's just not happening. If I click on the graph the points all jump into place, but it's not actually performing the tween. I am guessing it is missing a set state, but I am not quite sure how I would implement that. Any suggestions?

An example can be seen here. https://i.imgur.com/jn7rEib.gifv

Thanks,
-MH

  double numberAnimate(double order, double current) {
    var adjustedValue = new Tween(begin: 1.0, end: current).animate(
      new CurvedAnimation(
        parent: controller,
        curve: new Interval(
          0.350, // + (order * 0.1),
          0.650,
          curve: Curves.easeIn,
        ),
      ),
    );
    return adjustedValue.value;
  }
          data:  [
                  DataPoint<double>(
                      value: widget._controller
                          .numberAnimate(date7.day.truncateToDouble(), 10.0),
                      xAxis: date7.day.truncateToDouble()),
                  DataPoint<double>(
                      value: widget._controller
                          .numberAnimate(date6.day.truncateToDouble(), 30.0),
                      xAxis: date6.day.truncateToDouble()),
                  DataPoint<double>(
                      value: widget._controller
                          .numberAnimate(date5.day.truncateToDouble(), 50),
                      xAxis: date5.day.truncateToDouble()),
                  DataPoint<double>(
                      value: widget._controller
                          .numberAnimate(date4.day.truncateToDouble(), 20),
                      xAxis: date4.day.truncateToDouble()),
                  DataPoint<double>(
                      value: widget._controller
                          .numberAnimate(date3.day.truncateToDouble(), 80),
                      xAxis: date3.day.truncateToDouble()),
                  DataPoint<double>(
                      value: widget._controller
                          .numberAnimate(date2.day.truncateToDouble(), 14),
                      xAxis: date2.day.truncateToDouble()),
                  DataPoint<double>(
                      value: widget._controller
                          .numberAnimate(date1.day.truncateToDouble(), 30),
                      xAxis: date1.day.truncateToDouble()),
                ],
@diegoveloper
Copy link
Collaborator

is this an issue about the current library?

@MostHated
Copy link
Author

I am not certain, to be honest. I use the same animation code in many other places in my app and it works just fine. The animations in the gif that are on the same screen as the graph are using the same controller and are all coded just like the graph is, but the graph doesn't update. So I am not sure if maybe something special needs to be added to it to make it animatable? As of the current code base though, I can't seem to animate it by typical means.

@diegoveloper
Copy link
Collaborator

Hmmm I see. Let's do this, create a new file named 'sample11.dart' , like this, https://github.com/aeyrium/bezier-chart/blob/master/example/lib/sample10.dart , then add this file here (simple file that I could run) and I will check.

@MostHated
Copy link
Author

This is the one I am currently using along with the file that has the animation in it.

chart.zip

@diegoveloper
Copy link
Collaborator

Try creating a code that I could download and run please.

@MostHated
Copy link
Author

Ok, I will make a more complete one and post it. One second while I put it together.

@MostHated
Copy link
Author

Actually, I might have figured something out while trying to get a demo project together. Having simplified it down, I went to test it, and it moved differently now instead of just popping at once, it stopped midway through as if it was trying to animate but... got stuck? I think I might be able to mess with this particular thing and figure something out with it.

@MostHated
Copy link
Author

MostHated commented Aug 1, 2019 •
edited

I believe I might have figured out what is going on. It seems that something is causing the the listeners to fire multiple times, so onPointerEnter and onPointerExit keep getting called over and over. That is what is making the bubble continue to go up and down, because I was trying to make it come up onPointerEnter, but it keeps calling that over and over, since it keeps calling onPointerExit as well, that is causing _displayIndicator to keep changing from true to false and back,

flutter: Enter pointer status received
flutter: Exit pointer status received
flutter: Enter pointer status received
flutter: Exit pointer status received
flutter: Enter pointer status received
flutter: Exit pointer status received
flutter: Enter pointer status received
flutter: Exit pointer status received
flutter: Enter pointer status received
flutter: Exit pointer status received
flutter: Enter pointer status received
flutter: Exit pointer status received
flutter: Enter pointer status received
flutter: Exit pointer status received
flutter: Enter pointer status received
flutter: Exit pointer status received
flutter: Enter pointer status received
flutter: Exit pointer status received

I tried out a few different demos of other applications, such as this: https://github.com/go-flutter-desktop/examples/tree/master/pointer_demo. All other demos I tried, when the pointer enters the widgets area onPointerEnter fires once, then onPointerExit fires once when you leave, then onPointerHover changes as you move the pointer around if you are not holding the button (if you do hold it onPointerMove gets called instead).

So for some reason, something is causing the pointer callbacks to go nuts and just keep repeating constantly.

Thanks,
-MH

@diegoveloper
Copy link
Collaborator

diegoveloper commented Aug 1, 2019 via email

@MostHated
Copy link
Author

MostHated commented Aug 1, 2019 •
edited

It looks like there is. This was your position update code in bezier_chart_widget

void _updatePosition(Offset globalPosition) {
    RenderBox renderBox = context.findRenderObject();
    final position = renderBox.globalToLocal(globalPosition);
    if (position == null) return;
    return setState(
      () {
        final fixedPosition = Offset(
            position.dx + _scrollController.offset - horizontalPadding,
            position.dy);
        _verticalIndicatorPosition = fixedPosition;
      },
    );
  }

Looking back through just that one file there is also another setState() in _checkIfNeedScroll and _onHideIndicator.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@MostHated @diegoveloper