robinhood / ticker

An Android text view with scrolling text change animation
https://medium.com/robinhood-engineering/hello-ticker-20eaf6e51689
Apache License 2.0
4.38k stars 462 forks source link

Colliding numbers #30

Closed Perry-RU closed 6 years ago

Perry-RU commented 8 years ago

If a two digit ticker number is updated rapidly (maybe four times in a ten second period) an odd issue occurs in which the two digits begin to move toward one another and eventually overlap.

This issue is occurring for me when switching from the number 72 to the number 0. The two digit 72 remains and the numbers slowly collide.

jinatonic commented 8 years ago

Thanks for the report. I've seen some strange behavior as well when I call setText too frequently. However, I don't quite know what behavior you are describing. If you happen to have a consistent repro steps that would be great! Otherwise, I'll look into how I can improve interrupted animations for the next release.

Perry-RU commented 8 years ago

Hey Jinatonic, thanks for the comment. I will provide sample objects and method calls to said objects below that cause my particular issue. My particular Tickers are being displayed in a FrameLayout. I hope these help!

In class declaration:

private TickerView dTempText = null;
private TickerView  cTempText = null;

In onStart:

dTempText = (TickerView) getView().findViewById(R.id.seekArcOuterProgress);
cTempText = (TickerView) getView().findViewById(R.id.seekArcInnerProgress);
dTempText.setCharacterList(TickerUtils.getDefaultNumberList());
cTempText.setCharacterList(TickerUtils.getDefaultNumberList());

Initial set of Ticker:

dTempText.setText(String.valueOf(84));
cTempText.setText(String.valueOf(62));

Ticker set from onClick

dTempText.setText(String.valueOf(72));
cTempText.setText(String.valueOf(62));

Ticker set from onClick

dTempText.setText(String.valueOf(84));
cTempText.setText(String.valueOf(62));

At this point the number 84 would not display and the two digits of the number 72 would begin to collide. This usually only occurs when the onClick events happen in rapid secession. dTempText -> app:ticker_animationDuration="200" cTempText -> app:ticker_animationDuration="2500"

In addition to this example an animation issue can be seen if a Ticker has its value set to a value equal to its current value. In this particular case, say Ticker x = 5 and x is set again to 5, the two digit ticker number will shift horizontally around in it's TickerView.

jinatonic commented 8 years ago

Hi Perry,

I am unable to reproduce the behavior that you are seeing. In the ticker-sample app, I commented out onUpdate in MainActivity and added the following code in onResume.

        ticker1.setAnimationDuration(200);
        ticker2.setAnimationDuration(2500);
        ticker1.setText("84");
        ticker2.setText("62");

        final Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                ticker1.setText("72");
                ticker2.setText("62");

                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        ticker1.setText("84");
                        ticker2.setText("62");
                    }
                }, 50);
            }
        }, 2000);

I also tried changing the delayed duration of the inner runnable from 50 to 100 to 200 to 1000, the animation seems okay with me. I also am not sure how you are seeing the behavior where setting the same text cause the digits to shift horizontally as we have debounce for when the target text is the same as the current text.

Perhaps there's something else going on with your configuration? Are you running the latest ticker release version? I can't quite figure out why you are seeing these problems.

Perry-RU commented 8 years ago

I have since shelved the ticker views in our app, however I believe I was using version 1.1.0. If I have some spare time this weekend I'll try to create an Android app specifically to display the issues I faced. If I am able to recreate them I'll put my code here as a comment.