RiveView starts pixelate when i animate view scale

[zispidd]

I animate scale using reanimated v4 and when i animate RiveView - it starts pixelate

520367263-0580ccc7-8314-4108-b174-eb81154d06ab.mov

[mfazekas]

@zispidd thanks much for the report, can you please add a component to reproduce the issue, thanks!

[mfazekas]

Also platform - iOS or android.

[zispidd]

Also platform - iOS or android.

Hi! At this moment i cannot provide more info because i need to prepare reproduction app, it will take some time for me because i need to check if it's the same on android. For now it's problem on iOS. I checked code now and maybe it's not a problem with Rive itself. On the Rive view i applied style [{transform: [{scale: 1.15}]}] and used scale again on this component using reanimated - in this case (when double scale) view is pixelated

[HayesGordon]

@zispidd, yeah I believe on both iOS and Android if you apply a scale transform it will just "stretch" the underlying texture we created. For example, if you initially had a 100px by 100px view we would create a texture of that size multiplied by the DPR. If you now scale that, it will still be the same texture size.

But in your video it's blurrier than I expect it to be. So maybe something else is going on.

For native iOS and Android, it might be something worth investigating @ErikUggeldahl / @dskuza to see if we can detect scale to influence the texture size - it's something we recently did for the Flutter runtime.

[zispidd]

@zispidd, yeah I believe on both iOS and Android if you apply a scale transform it will just "stretch" the underlying texture we created. For example, if you initially had a 100px by 100px view we would create a texture of that size multiplied by the DPR. If you now scale that, it will still be the same texture size.

But in your video it's blurrier than I expect it to be. So maybe something else is going on.

For native iOS and Android, it might be something worth investigating @ErikUggeldahl / @dskuza to see if we can detect scale to influence the texture size - it's something we recently did for the Flutter runtime.

Thanks. Also, i got a problem with runtime (react native and just react). On my file we animated "Speed" value and if we made it - runtime was unavailable to find animation. I submitted support request with file but no response. Maybe you can check: 18201. We already made it using another property, but i think if you catch and fix this bug it will be very useful

[zispidd]

Android looks nice, no pixels

[mfazekas]

One other solution is doing the scale in Rive, via data binding. PR#64 demonstrates how listen a react native reanimated shared value, and update the rive number property. This means the scale happens are rive render time

#64