CSS Animations and Transitions #6912
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Start implementing css animation keyframes normalization in JS * Add a function that creates keyframed style * Improve implementation, add a few more tests * Fix type issues, implementation issues and add more tests * Format code * Fix type issues * Add missing type update
* Start working on cpp adjustments * Multiple keyframes started to work * Add working easings * Format code * Animation transform property works 🔥 * Clean up CSSAnimationRegistry implementation * Remove unnecessary include
* Add value interpolator base class, start writing keyframed style class * Much progress * Numeric value interpolator works * Add working transforms interpolator * Fix incorrect value interpolation * Finish base interpolators implementation * Remove logs * Finally works and is beautiful 🔥🔥🔥 Fix issues after rebase Additional fixes * Simplify implementation, move some logic from header files to cpp
* Add all style properties to the registry with placeholder interpolators * Add value with unit interpolator and discrete value interpolator * Some cleanup * Do some cleanup * Split files into .h and .cpp, adjust changes after rebase * Add conversion from radians to degrees
* Add a way to cache view props between different interpolator calls * Add a possibility to read view and its parent props * Add working relative units interpolation * Fix easing issues Revert some changes
* Add animation iteration count support * Fix animation iteration count changes * Add animationDirection support * Add negative and positive animation delay support * Small cleanup * Add missing iteration count default value * Apply review suggestions
* Add example app setup files * Add some utility components and example screen placeholders * Add missing type export * Add one of previous examples as a playground example
Remove mistakenly added xcworkspace file
* init color interpolation * add gamma correction to r,g,b interpolation * fix some merge oopsies and add example * shorten animation * remove unneeded include * make review requested changes * final fixes (i hope) * fix 0xrrggbbaa number format
…elative units (#15) * Fix crash on component unmount * Fix re-render crash, add proper types to the animated component style prop * Remove unnecessary log * Remove unnecessary field * Apply review suggestions * Small change * Add return for non-fabric
* Create helper component for css animation examples * Add more absolute dimensions examples * Much improve the example card component * Some more progress * Finish tab view implementation * Finish dimensions examples implementation * Update comment
Change app theme colors
* Add animation settings examples setup * Finish first version of the duration settings example screen * Clean up duration setting example implementation * Add easings example * Add animation delay example * Some more adjustments * Improve already implemented animation settings screens * Add some more examples
* Fix iteration count issue * Fix animation direction, improve text in example descriptions * Add nav links to text * Add resolveKeyframeValue method to value interpolator * Fix precission issues for floating point iteration count * Remove unnecessary comments * Update packages/react-native-reanimated/Common/cpp/reanimated/CSS/CSSAnimation.cpp Co-authored-by: Mikołaj Szydłowski <[email protected]> --------- Co-authored-by: Mikołaj Szydłowski <[email protected]>
* Pass view style to the native * Some progress adding missing keyframes support * Add a possibility to set style prop from JS * Add a possibility to set fallback default style value in the factory * Fix interpolation with missing keyframe for relative values * Improve factories, improve default values * Everything seems to work very well 🔥 * Remove logs * Final touches
* Pass fill mode from js * Animation fill mode works 🔥 * Fix crashes after adding fill mode * Add fill mode example * Fix color interpolation issues when color keyframe for 0%/100% is missing * Remove logs * Apply suggested changes
…r palette (#23) * Update app colors for the second time * Update Text component, replace RN text with custom Text * Remove incorrect exports
* init JS-side easings * add cpp-side of bezier and parametrized linear easings * finish easings * code review changes
* Start working on squishy-squashy example * Change logic for missing keyframes, fix transform crash on reset * Squishy squashy works * Some cleanup * Make animation perfect * Fix animation settings and colors example issues * Fix crash in the example caused by invalid optional access * Some cleanup and test fixes Merge changes from css-animations * Add mistakenly reverted changes
* Add some emoji examples * Add remaining emoji examples * Final touches * Remove Xcode settings changes * Add credits * Change Heart emoji name to Love * Improve angry emoji eyebrows a bit
* Add small and fancy campfire animation example * Remove unnecessary dimensions * Add credits * Add ease-in easing
* Add 3 spinner examples * Add remaining loaders * Finish spinners examples * Little polish * Add easings
* Add rocket in space example * Add mising easings
* Fix css props filtering method on web * Fix crashes when animated svg components are used
* Start working on new style processor * Some progress * Some progress * Works partially * Finish CSS animation keyframes parser reimplementation * Apply review suggestions * Apply suggested change * Small improvements
* Add CSSValue abstract type and CSSValueVariant * Reimplement properties config * Some progress * Add array interpolator * At least it builds after commenting out properties config * Make config types correct * Implement interpolate method in all css value types * App builds after implementing CSS value variant * Interpolation starts to work * Transforms start to work 🚀 * Matrix interpolation works * Finish transform interpolators * Some progress * Works like a charm 🔥 * Add proper perspective interpolator and discrete value check * Fix android build issue * Add clang suggested changes * Migrate from custom recursive union to std::variant, fix discrete prop check
* Start implementing proper reversal of animation properties * Make it build * Some improvements * Some progress * Apply reversals in performOperations, limit reversals to Android * Fix color interpolation, merge changes in shadow tree cloner * Seems to work fine now * Now is perfect * Clean up logs * Fix iOS build * Remove android animation reversal from limitations and issues document * Optimize props merging in shadow tree cloner * Some more improvements * Apply review suggestions * Add default property getter
* Fix css transitions with short duration * Revert temporary changes * Fix import
* Start working on css style props unification * Finish parsing props * Add properties config similar to web implementation, add style processors * Finish native style builder implementation, restructure files * Some progress * Final changes * Fix remaining issues * Restore tests removed during refactor * Remove name from style builder property config in native implementation as it is not supported there
* Add a few flexBox properties animation examples * Some more progress * Working on flexBasis example * Finish flex interpolators examples * Remove logs
…176) * Add remaining inset examples * Finish implementation of remaining layout properties animation examples * Add opacity and backface visibility examples * Final changes
* Add rule builders support for complex rules in web style builder * Improve style builder classes implementations * Adjust examples, add final changes * Remove console log * Add missing shadow properties examples * Don't apply opacity on a color if it is 1
…mple (#178) * Start working on boxShadow prop support * Implement boxShadow propery example Signed-off-by: Mateusz Łopaciński <[email protected]> * Fix box shadow issues on web and android * Move interpolate method implementation to the derived class --------- Signed-off-by: Mateusz Łopaciński <[email protected]>
…es (#180) * Add some missing props to allow list, add some examples * Add fontVariant support * Change CSSArray to CSSDiscreteArray
* Finish text decoration properties animation examples * Add more font properties animation examples
…on fix (#182) * Add remaining properties examples * Add metro asset resolution fix, reorganize images * Add assets * Remove not animated props from native interpolators config
…ort (#183) * Remove useless 'use strict', add missing includes in cpp * Add animationName 'none' support
* docs: add 4.x docs version * docs: draft transition pages * docs: document transitionProperty * docs: make transition property example more useful * docs: document transitionDuration * docs: withClamp isn't new anymore * docs: document transitionDelay * docs: upgrade reanimated to 4.0.0-beta.3.1 * docs: draft transitionTimingFunction * docs: document transitionBehaviour * docs: add aefaults * docs: remove unnecessary console log * docs: rename transitions -> css-transitions * docs: add key * docs: add empty animation documentation pages * docs: draft animationName * docs: simplify * docs: animation duration * docs: add note to self * docs: skeleton documentation * docs: add animationName example * docs: border radius is no more * docs: group examples in folders * docs: add animation delay simple example * docs: make basic example actually simple * docs: draft animationTimingFunction * docs: animationTimingFunction * docs: update animation delay and transition delay explaination * docs: animation direction * docs: animation iteration count * docs: animation play state * docs: animation fill mode * docs: add supported properties table * docs: add a sentence of explaination * docs: add mateusz's remarks * docs: transition timing function can be an array * docs: animation timing function too * docs: some other too bruh * docs: fill mode and play state could be arrays too
* Fix issues noticed after finishing rebase * Restore cocoapods version
* Remove temp docs, change version, fix release build issues * Some dep and small issue fixes * Fix yarn.lock * Update library package used in docs, fix next build issues, fix some linter warnings * Add 'use strict' to all files * Fix typecheck to check types in the entire example app based on its tsconfig.json
Fix animations not being started under heavy load
Fix isColor check that was unintentionally broken
…ors for concepts (#188) * Add new clang-format wrapper package with latest clang-format, add more formatting rules * Add working cpp linter and fix its issues * Disable linting for concepts * Restore cpplint script name
* Remove commit from mount hook * Fix props reverting issue on android --------- Co-authored-by: Mateusz Łopaciński <[email protected]>
* Apply some changes suggested by @tjzel * Change path aliases * Clean up binary search implementation, clean up template types * More template type upates * More template type upates * Some progress * Rename binary search helper function, simplify forwarded ref check * Exclude << operator overload from prod builds
* Adjust css navigator * Prepare reanimated app navigator * Finally is perfect * Improve macos example * Format files, clean up dependencies * Add missing ifndefs * Downgrade native-stack, fix binary search used for easings * Replace Pressable to work on android * Remove 'new' labels
MatiPl01
force-pushed
the
@matipl01/release-4.0.0-beta.1
branch
from
890bd69 to
77d73ec
Compare
tomekzaw
approved these changes
Jan 21, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds CSS Animations and Transitions support that will become a part of Reanimated 4