bmarrdev / android-DecoView-charting

DecoView: Android arc based animated charting library
Apache License 2.0
991 stars 194 forks source link

Series line width is changed if animation is cut off #8

Closed bogdanzurac closed 8 years ago

bogdanzurac commented 8 years ago

So there are 2 Series that I'm using with the DecoView, one as the background with light gray, which represents the total amount, and a 2nd one with blue, which overlaps the first one, which represents a partial amount. I've set the line width on both as follows:

.setLineWidth(32f)

Then I animate them as follows:

mDecoView.addEvent(new DecoEvent.Builder(DecoEvent.EventType.EVENT_SHOW, true) .setDelay(500) .setDuration(500) .build()); // reveal the background series mDecoView.addEvent(new DecoEvent.Builder(percentage).setIndex(seriesIndex).setDelay(1000).setDuration(2000).build()); // animate the blue series

Now, most of the times, this works like a charm, the blue series overlaps the gray one perfectly, as you'd expect. However, when the animation (2nd one) is cut off (for example, hitting the home button as soon as the animation starts), when coming back to the app, the blue series line width is changed and is not the same as the grey series anymore, like you can see in the attached screenshot.

Any idea what can be causing this?

screenshot_20151111-164534

bogdanzurac commented 8 years ago

@bmarrdev Do you have any feedback on this matter?

bmarrdev commented 8 years ago

I was unable to reproduce this issue. I will take another look at this when I get a chance. It would be helpful if you could share a gist of an activity that exhibits the behaviour.

bogdanzurac commented 8 years ago

I'll post the entire DecoView related code, because the rest is pretty much the default project in AS. You can copy paste this inside an empty project and it's the same thing. I've even increased the animation durations in order to make it easier to spot.

double total = 3500;
double partial = 2570;
int percentage = (int) (partial * 100 / total);

mDecoView = (DecoView) findViewById(R.id.activity_main_decoview);

mDecoView.addSeries(new SeriesItem.Builder(ContextCompat.getColor(MainActivity.this, R.color.color_gray))
                .setSeriesLabel(new SeriesLabel.Builder(total + " USD")
                        .setColorBack(ContextCompat.getColor(MainActivity.this, R.color.color_gray_darker))
                        .setColorText(ContextCompat.getColor(MainActivity.this, R.color.color_gray))
                        .setTypeface(Typeface.create("sans-serif-light", Typeface.NORMAL))
                        .build())
                .setRange(0, 100, 100)
                .setInitialVisibility(false)
                .setLineWidth(32f)
                .build());

final SeriesItem seriesItem = new SeriesItem.Builder(ContextCompat.getColor(MainActivity.this, R.color.colorPrimary))
                .setSeriesLabel(new SeriesLabel.Builder(partial + " USD")
                        .setColorBack(ContextCompat.getColor(MainActivity.this, R.color.color_gray_darker))
                        .setColorText(ContextCompat.getColor(MainActivity.this, R.color.color_gray))
                        .setTypeface(Typeface.create("sans-serif-light", Typeface.NORMAL))
                        .build())
                .setRange(0, 100, 0)
                .setInitialVisibility(false)
                .setLineWidth(32f)
                .setCapRounded(true)
                .setShowPointWhenEmpty(true)
                .build();

int seriesIndex = mDecoView.addSeries(seriesItem);

mDecoView.executeReset();
mDecoView.addEvent(new DecoEvent.Builder(DecoEvent.EventType.EVENT_SHOW, true)
                .setDelay(1000)
                .setDuration(3000)
                .build());
mDecoView.addEvent(new DecoEvent.Builder(percentage).setIndex(seriesIndex).setDelay(4000).setDuration(2000).build());

Now then, the test case is the following: 1) Cold start MainActivity, so that onCreate() is called with the code above. 2) As soon as you see the series with the colorPrimary color appear and start growing as part of the show animation, immediately tap the Home button. 3) Wait for the remaining of the animation to complete (~4s). 4) Enter the app again (not cold start).

If you tap the Home button before the animation starts or after it ends, then everything will look fine, so if you don't get it right the first try, try some more. However, if you got the timing right, the result should look pretty similar to the initial screenshot. I presume the grow animation incorrectly sets the second series line width if the animation is interrupted, which isn't good.

bmarrdev commented 8 years ago

Thanks for that info. I will investigate it this weekend and report back.

bmarrdev commented 8 years ago

I have reproduced the issue. I couldn't see an immediate reason for it, but as soon as I get some free time I will find and post a fix. An option for you to work around this issue for now recreate the DecoView and set the positions or events required in your Activity onResume()

bmarrdev commented 8 years ago

I have included a fix for this issue in a new build, v0.9.6.

To access this fix update your gradle dependencies: compile 'com.github.bmarrdev:android-DecoView-charting:v0.9.6'