Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for animating transform matrices #2511

Merged
merged 4 commits into from
Oct 13, 2021
Merged

Conversation

kmagiera
Copy link
Member

@kmagiera kmagiera commented Oct 8, 2021

Description

This change adds support for animation transform matrices. Before, it was only possible to animate attributes that are either numbers or ones representing colors (e.g. rgba(r,g,b,a) or #eae). In react-native it is possible to not only provide transform as a list of operations like translate or scale but also by sending the full affine transform matrix (4x4 matrix represented as an array of 16 elements). This change makes it possible for reanimated to recognize such matrix and animate its transforms accordingly.

Changes

  • added a way to recognize values of type array in utils.ts
  • override animation.onStart and animation.onFrame for the array type
  • copy animation to each individual element of an array and perform these separately (this isn't likely the most optimal approach as we are spanning 16 animation instances for a single matrix but this is a relatively rare usecase and this solution should be ok for the time being)
  • add new test app that uses inline transforms and also matrix transform to showcase the changes

Test code and steps to reproduce

See newly added example Example/test/TestApp.js that demonstrate that changes made to matrix transform can be animated.

Checklist

  • Included code example that can be used to test this change
  • Updated TS types
  • Ensured that CI passes

@kmagiera kmagiera marked this pull request as draft October 8, 2021 09:51
@piaskowyk
Copy link
Member

Example usage of types:

const array = [1, 2, 3];
const matrix = useSharedValue<Array<number> | Animation<TimingAnimation>>(array);
matrix.value = withTiming(array);
const animation = withTiming(array);

@kmagiera kmagiera marked this pull request as ready for review October 12, 2021 22:51
@piaskowyk piaskowyk merged commit 31afe92 into master Oct 13, 2021
@piaskowyk piaskowyk deleted the kmagiera/animate-matrix branch October 13, 2021 09:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants