Skip to main content
F
Falrinth
Inspiring
May 20, 2019
Question

Canvas gradient animation problem

Seems Animate cant handlen animating gradients. Whenever i create shape tween for a shape with gradient it will be published as some flat changed in gradient, black shape or some other unintended glitches.

1. When will it be fixed?

2. Whats the workaround?

Ce sujet a été fermé aux réponses.

2 commentaires

N
Community Expert
Nick GioiaCommunity Expert
Community Expert
May 21, 2019

Maybe make your gradient into a symbol and the then move it that way with a tween?

kglad
Community Expert
kgladCommunity Expert
Community Expert
May 20, 2019

shape tweening a radial gradient works for me in html5/canvas.

1. create a keyframe and add a shape with a gradient

2. create a new keyframe several frames later and adjust the gradient

3. add a shape tween

F
FalrinthAuteur
Inspiring
May 21, 2019

Ok i have did another tests, and it seems only gradients without transparency/alpha animates well (i should have been more specific, but i did tests on gradients with alphas). The ones with transparency are resulting in mentioned glitches. So my 2 questions still stands. Only workaround i have found so far is using png.

@nick28, that could work in some cases, but wont in others and its very awkward to do in many cases. For example radial gradient that creates a transparent "hole". If you want to animate it so the hole gets smaller, coming from the very edges of the screen into a very little hole somewhere on the screen. My tests resulted in very low quality gradient bending when i scaled the object and very hard to control precisely (as opposite to gradient transform tool which can be precise).

Funny thing is that in Animate, the process of animating that radial gradient is very smooth and easy, and works in viewport flawlessly. Only after export it gets obliterated into some glitched code.

kdmemory
kdmemory
Inspiring
May 21, 2019

Hi Fairinth

Is it the case that you publish to HTML5 Canvas? If so did you select Export document as texture in the Publish Settings?

This would be necessary for using shape tweening in a published canvas.

I made a simple test with radial gradient including alpha changes and it works fine. But I got 3 myfile_atlas_n.png files which amount to a data size of 1.8 MB. And it's only a small animation.

It's expensive!

Klaus

Conditions d'utilisationAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices