diff --git a/change/react-native-windows-f6c9b8a9-e496-4be1-a2a5-ad3a4a9bece8.json b/change/react-native-windows-f6c9b8a9-e496-4be1-a2a5-ad3a4a9bece8.json new file mode 100644 index 00000000000..8bbee6a4023 --- /dev/null +++ b/change/react-native-windows-f6c9b8a9-e496-4be1-a2a5-ad3a4a9bece8.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Animate value property rather than offset", + "packageName": "react-native-windows", + "email": "erozell@outlook.com", + "dependentChangeType": "patch" +} diff --git a/vnext/Microsoft.ReactNative/Modules/Animated/AnimationDriver.cpp b/vnext/Microsoft.ReactNative/Modules/Animated/AnimationDriver.cpp index e6a01fb1965..9caf25db30d 100644 --- a/vnext/Microsoft.ReactNative/Modules/Animated/AnimationDriver.cpp +++ b/vnext/Microsoft.ReactNative/Modules/Animated/AnimationDriver.cpp @@ -44,7 +44,7 @@ AnimationDriver::~AnimationDriver() { void AnimationDriver::StartAnimation() { const auto [animation, scopedBatch] = MakeAnimation(m_config); if (auto const animatedValue = GetAnimatedValue()) { - animatedValue->PropertySet().StartAnimation(ValueAnimatedNode::s_offsetName, animation); + animatedValue->PropertySet().StartAnimation(ValueAnimatedNode::s_valueName, animation); animatedValue->AddActiveAnimation(m_id); } scopedBatch.End(); @@ -58,7 +58,6 @@ void AnimationDriver::StartAnimation() { if (auto manager = weakManager.lock()) { if (auto const animatedValue = manager->GetValueAnimatedNode(tag)) { animatedValue->RemoveActiveAnimation(id); - animatedValue->FlattenOffset(); } manager->RemoveActiveAnimation(id); } @@ -70,7 +69,7 @@ void AnimationDriver::StartAnimation() { void AnimationDriver::StopAnimation(bool ignoreCompletedHandlers) { if (const auto animatedValue = GetAnimatedValue()) { - animatedValue->PropertySet().StopAnimation(ValueAnimatedNode::s_offsetName); + animatedValue->PropertySet().StopAnimation(ValueAnimatedNode::s_valueName); if (!ignoreCompletedHandlers) { animatedValue->RemoveActiveAnimation(m_id); diff --git a/vnext/Microsoft.ReactNative/Modules/Animated/CalculatedAnimationDriver.cpp b/vnext/Microsoft.ReactNative/Modules/Animated/CalculatedAnimationDriver.cpp index b0ff2041611..a675d96d567 100644 --- a/vnext/Microsoft.ReactNative/Modules/Animated/CalculatedAnimationDriver.cpp +++ b/vnext/Microsoft.ReactNative/Modules/Animated/CalculatedAnimationDriver.cpp @@ -37,11 +37,11 @@ std::tuple CalculatedA std::chrono::milliseconds duration(static_cast(keyFrames.size() / 60.0f * 1000.0f)); animation.Duration(duration); auto normalizedProgress = 0.0f; - // We are animating the values offset property which should start at 0. - animation.InsertKeyFrame(normalizedProgress, 0.0f, easingFunction); + auto fromValue = static_cast(GetAnimatedValue()->RawValue()); + animation.InsertKeyFrame(normalizedProgress, fromValue, easingFunction); for (const auto keyFrame : keyFrames) { normalizedProgress = std::min(normalizedProgress + 1.0f / keyFrames.size(), 1.0f); - animation.InsertKeyFrame(normalizedProgress, keyFrame - static_cast(m_startValue), easingFunction); + animation.InsertKeyFrame(normalizedProgress, keyFrame, easingFunction); } if (m_iterations == -1) { diff --git a/vnext/Microsoft.ReactNative/Modules/Animated/FrameAnimationDriver.cpp b/vnext/Microsoft.ReactNative/Modules/Animated/FrameAnimationDriver.cpp index 99664d19b54..8982b4c42e1 100644 --- a/vnext/Microsoft.ReactNative/Modules/Animated/FrameAnimationDriver.cpp +++ b/vnext/Microsoft.ReactNative/Modules/Animated/FrameAnimationDriver.cpp @@ -40,7 +40,7 @@ std::tuple FrameAnimat auto fromValue = GetAnimatedValue()->RawValue(); for (auto frame : m_frames) { normalizedProgress = std::min(normalizedProgress += step, 1.0f); - animation.InsertKeyFrame(normalizedProgress, static_cast(frame * (m_toValue - fromValue))); + animation.InsertKeyFrame(normalizedProgress, static_cast(fromValue + frame * (m_toValue - fromValue))); } if (m_iterations == -1) {