[LayoutAnimation] Opacity doesn't animate on update #3450

Closed
brentvatne opened this Issue Oct 15, 2015 · 8 comments

Comments

Projects
None yet
5 participants
@brentvatne
Collaborator

brentvatne commented Oct 15, 2015

See: https://rnplay.org/apps/1gl8Uw

Should be fading out to 0.1, but changes suddenly instead. cc @nicklockwood

@nicklockwood

This comment has been minimized.

Show comment
Hide comment
@nicklockwood

nicklockwood Oct 20, 2015

Contributor

Thanks for creating the example. It looks like you've slightly misunderstood how the layout animations are supposed to be used. They don't let you animate arbitrary property changes, but instead specifically support the following:

  1. when updating a component, you can animate the frame only, meaning that the frame will animate from its previous value to its new value.

  2. when creating a component, you can animate the scaleXY and/or opacity. If you animate scaleXY then the view will be scaled from a scale of {0,0} to whatever scale was set ({1,1} by default). If you animate opacity then the opacity will fade from 0 to whatever opacity was set (1.0 by default).

In your example, you are updating the opacity of a component that is already on screen, to trigger a re-render. This will invoke the update animation, but since the frame has not changed, nothing will animate.

To recap: LayoutAnimations only support animating opacity from 0 to n (where n is the current opacity style value of your component), and only when a component is mounted, not when an existing component is being updated.

To animate opacity in the way you want, you'll need to use the Animated API instead.

(@sahrens the LayoutAnimations API does seem a bit clunky and confusing. Is this how it was intended to work? And if so, do you think it's worth revisiting it? We could relatively easily support animating other properties besides the frame, and maybe there's a better way to specify the scaleXY/opacity constants so that they won't be confused with component properties?)

Contributor

nicklockwood commented Oct 20, 2015

Thanks for creating the example. It looks like you've slightly misunderstood how the layout animations are supposed to be used. They don't let you animate arbitrary property changes, but instead specifically support the following:

  1. when updating a component, you can animate the frame only, meaning that the frame will animate from its previous value to its new value.

  2. when creating a component, you can animate the scaleXY and/or opacity. If you animate scaleXY then the view will be scaled from a scale of {0,0} to whatever scale was set ({1,1} by default). If you animate opacity then the opacity will fade from 0 to whatever opacity was set (1.0 by default).

In your example, you are updating the opacity of a component that is already on screen, to trigger a re-render. This will invoke the update animation, but since the frame has not changed, nothing will animate.

To recap: LayoutAnimations only support animating opacity from 0 to n (where n is the current opacity style value of your component), and only when a component is mounted, not when an existing component is being updated.

To animate opacity in the way you want, you'll need to use the Animated API instead.

(@sahrens the LayoutAnimations API does seem a bit clunky and confusing. Is this how it was intended to work? And if so, do you think it's worth revisiting it? We could relatively easily support animating other properties besides the frame, and maybe there's a better way to specify the scaleXY/opacity constants so that they won't be confused with component properties?)

@nicklockwood

This comment has been minimized.

Show comment
Hide comment
@nicklockwood

nicklockwood Oct 20, 2015

Contributor

cc @vjeux for thoughts on the API

Contributor

nicklockwood commented Oct 20, 2015

cc @vjeux for thoughts on the API

@nicklockwood

This comment has been minimized.

Show comment
Hide comment
@nicklockwood

nicklockwood Oct 20, 2015

Contributor

Instead of

property: LayoutAnimation.Properties.opacity/scaleXY

Maybe we could use something like

transition: LayoutAnimation.Transitions.fadeIn/zoomIn ?

Also, it seems odd that you can only fade in or zoom in - why not allow both?

Contributor

nicklockwood commented Oct 20, 2015

Instead of

property: LayoutAnimation.Properties.opacity/scaleXY

Maybe we could use something like

transition: LayoutAnimation.Transitions.fadeIn/zoomIn ?

Also, it seems odd that you can only fade in or zoom in - why not allow both?

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Oct 28, 2015

Collaborator

Thanks for clarifying that @nicklockwood! I suppose that makes sense given that it is called LayoutAnimation :P It would be very useful to be able to animate opacity with this as well -- I imagine the idea was to include that in the delete phase of LayoutAnimation but since that seems like it will be a tricky thing to implement, opacity in update might be a good solution for now at least.

Collaborator

brentvatne commented Oct 28, 2015

Thanks for clarifying that @nicklockwood! I suppose that makes sense given that it is called LayoutAnimation :P It would be very useful to be able to animate opacity with this as well -- I imagine the idea was to include that in the delete phase of LayoutAnimation but since that seems like it will be a tricky thing to implement, opacity in update might be a good solution for now at least.

@gastonmorixe

This comment has been minimized.

Show comment
Hide comment
@gastonmorixe

gastonmorixe Dec 15, 2015

awesome work here, I'd totally support renaming Properties to Transitions and opacity/scaleXY to fadeIn/zoomIn. It got me really confused when I first started using it.

awesome work here, I'd totally support renaming Properties to Transitions and opacity/scaleXY to fadeIn/zoomIn. It got me really confused when I first started using it.

@gastonmorixe

This comment has been minimized.

Show comment
Hide comment
@gastonmorixe

gastonmorixe Dec 15, 2015

Question, is there a way to specifically opt-out an element for transitions?

Question, is there a way to specifically opt-out an element for transitions?

@sahrens

This comment has been minimized.

Show comment
Hide comment
@sahrens

sahrens Dec 16, 2015

Contributor

LayoutAnimation is primarily intended simply to do the things that are common and cumbersome with the Animated API, which is the creation and cascading layout updates of views, especially when involving Text which requires asynchronous/native text measurement.

The idea was that everything else should be handled by Animated so as to reduce overlapping functionality.

That said, the animation paradigm of LayoutAnimtion has proven very powerful, easy to use, and performant, so we might want to reconsider expanding the functionality into something with more controls (e.g. subtree scoping rather than global via props and/or react context or something, more curve specifications, etc) and more animatable attributes (basically any prop/keypath that is natively animatable, like opacity, rotation and 3D transforms, etc).

I'm kinda leaning towards the beefing up LayoutAnimation.

On Dec 15, 2015, at 11:06 AM, Gaston Morixe notifications@github.com wrote:

Question, is there a way to specifically opt-out an element for transitions?


Reply to this email directly or view it on GitHub.

Contributor

sahrens commented Dec 16, 2015

LayoutAnimation is primarily intended simply to do the things that are common and cumbersome with the Animated API, which is the creation and cascading layout updates of views, especially when involving Text which requires asynchronous/native text measurement.

The idea was that everything else should be handled by Animated so as to reduce overlapping functionality.

That said, the animation paradigm of LayoutAnimtion has proven very powerful, easy to use, and performant, so we might want to reconsider expanding the functionality into something with more controls (e.g. subtree scoping rather than global via props and/or react context or something, more curve specifications, etc) and more animatable attributes (basically any prop/keypath that is natively animatable, like opacity, rotation and 3D transforms, etc).

I'm kinda leaning towards the beefing up LayoutAnimation.

On Dec 15, 2015, at 11:06 AM, Gaston Morixe notifications@github.com wrote:

Question, is there a way to specifically opt-out an element for transitions?


Reply to this email directly or view it on GitHub.

@mkonicek mkonicek added the Icebox label Apr 10, 2016

@mkonicek

This comment has been minimized.

Show comment
Hide comment
@mkonicek

mkonicek Apr 10, 2016

Contributor

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/layoutanimation-opacity-doesnt-animate-on-update

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

Contributor

mkonicek commented Apr 10, 2016

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/layoutanimation-opacity-doesnt-animate-on-update

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

@mkonicek mkonicek closed this Apr 10, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment