Skip to content

Commit e167faa

Browse files
coadometa-codesync[bot]
coado
authored and
meta-codesync[bot]
committed
Implementation of transform, border radius, and background color props on animation backend (#54698)
Summary: Adds support for transform, border radius, and background color props to be handled by shared animation backend. [General][Added] - Added support for transform, border radius, and background color props to Animation Backend. ## Changelog: <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: [ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests --> [INTERNAL] Pull Request resolved: #54698 Test Plan: Checked on reanimated example app. Reviewed By: zeyap Differential Revision: D87922886 Pulled By: coado fbshipit-source-id: 1fe554cba514b74c3687f09be0def0496e4c374a
1 parent 57c29fc commit e167faa

5 files changed

Lines changed: 162 additions & 23 deletions

File tree

‎packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropSerializer.cpp‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
/*
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
#include <stdexcept>
9+
#include "AnimatedPropsSerializer.h"
10+
11+
namespace facebook::react {
12+
13+
namespace {
14+
15+
void packBorderRadiusCorner(
16+
folly::dynamic& dyn,
17+
const std::string& propName,
18+
const std::optional<ValueUnit>& cornerValue) {
19+
if (cornerValue.has_value()) {
20+
dyn.insert(propName, cornerValue.value().value);
21+
}
22+
}
23+
24+
void packBorderRadii(
25+
folly::dynamic& dyn,
26+
const AnimatedPropBase& animatedProp) {
27+
const auto& borderRadii = get<CascadedBorderRadii>(animatedProp);
28+
29+
packBorderRadiusCorner(dyn, "borderTopRightRadius", borderRadii.topRight);
30+
packBorderRadiusCorner(dyn, "borderTopLeftRadius", borderRadii.topLeft);
31+
packBorderRadiusCorner(
32+
dyn, "borderBottomRightRadius", borderRadii.bottomRight);
33+
packBorderRadiusCorner(dyn, "borderBottomLeftRadius", borderRadii.bottomLeft);
34+
packBorderRadiusCorner(dyn, "borderTopStartRadius", borderRadii.topStart);
35+
packBorderRadiusCorner(dyn, "borderTopEndRadius", borderRadii.topEnd);
36+
packBorderRadiusCorner(
37+
dyn, "borderBottomStartRadius", borderRadii.bottomStart);
38+
packBorderRadiusCorner(dyn, "borderBottomEndRadius", borderRadii.bottomEnd);
39+
packBorderRadiusCorner(dyn, "borderStartStartRadius", borderRadii.startStart);
40+
packBorderRadiusCorner(dyn, "borderStartEndRadius", borderRadii.startEnd);
41+
packBorderRadiusCorner(dyn, "borderEndStartRadius", borderRadii.endStart);
42+
packBorderRadiusCorner(dyn, "borderEndEndRadius", borderRadii.endEnd);
43+
44+
if (borderRadii.all.has_value()) {
45+
dyn.insert("borderRadius", borderRadii.all.value().value);
46+
}
47+
}
48+
49+
void packOpacity(folly::dynamic& dyn, const AnimatedPropBase& animatedProp) {
50+
dyn.insert("opacity", get<Float>(animatedProp));
51+
}
52+
53+
void packTransform(folly::dynamic& dyn, const AnimatedPropBase& animatedProp) {
54+
const auto transform = get<Transform>(animatedProp);
55+
const auto matrixArray = folly::dynamic::array(
56+
transform.matrix[0],
57+
transform.matrix[1],
58+
transform.matrix[2],
59+
transform.matrix[3],
60+
transform.matrix[4],
61+
transform.matrix[5],
62+
transform.matrix[6],
63+
transform.matrix[7],
64+
transform.matrix[8],
65+
transform.matrix[9],
66+
transform.matrix[10],
67+
transform.matrix[11],
68+
transform.matrix[12],
69+
transform.matrix[13],
70+
transform.matrix[14],
71+
transform.matrix[15]);
72+
dyn.insert(
73+
"transform",
74+
folly::dynamic::array(folly::dynamic::object("matrix", matrixArray)));
75+
}
76+
77+
void packBackgroundColor(
78+
folly::dynamic& dyn,
79+
const AnimatedPropBase& animatedProp) {
80+
const auto& backgroundColor = get<SharedColor>(animatedProp);
81+
if (backgroundColor) {
82+
dyn.insert("backgroundColor", static_cast<int32_t>(*backgroundColor));
83+
}
84+
}
85+
86+
void packAnimatedProp(
87+
folly::dynamic& dyn,
88+
const std::unique_ptr<AnimatedPropBase>& animatedProp) {
89+
switch (animatedProp->propName) {
90+
case OPACITY:
91+
packOpacity(dyn, *animatedProp);
92+
break;
93+
94+
case TRANSFORM:
95+
packTransform(dyn, *animatedProp);
96+
break;
97+
98+
case BACKGROUND_COLOR:
99+
packBackgroundColor(dyn, *animatedProp);
100+
break;
101+
102+
case BORDER_RADII:
103+
packBorderRadii(dyn, *animatedProp);
104+
break;
105+
106+
case WIDTH:
107+
case HEIGHT:
108+
case FLEX:
109+
throw std::runtime_error("Tried to synchronously update layout props");
110+
}
111+
}
112+
113+
} // namespace
114+
115+
namespace animationbackend {
116+
117+
folly::dynamic packAnimatedProps(const AnimatedProps& animatedProps) {
118+
auto dyn = animatedProps.rawProps ? animatedProps.rawProps->toDynamic()
119+
: folly::dynamic::object();
120+
121+
for (auto& animatedProp : animatedProps.props) {
122+
packAnimatedProp(dyn, animatedProp);
123+
}
124+
125+
return dyn;
126+
}
127+
128+
} // namespace animationbackend
129+
130+
} // namespace facebook::react

‎packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedProps.h‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
namespace facebook::react {
1414

15-
enum PropName { OPACITY, WIDTH, HEIGHT, BORDER_RADII, FLEX, TRANSFORM };
15+
enum PropName { OPACITY, WIDTH, HEIGHT, BORDER_RADII, FLEX, TRANSFORM, BACKGROUND_COLOR };
1616

1717
struct AnimatedPropBase {
1818
PropName propName;
@@ -70,6 +70,10 @@ inline void cloneProp(BaseViewProps &viewProps, const AnimatedPropBase &animated
7070
case TRANSFORM:
7171
viewProps.transform = get<Transform>(animatedProp);
7272
break;
73+
74+
case BACKGROUND_COLOR:
75+
viewProps.backgroundColor = get<SharedColor>(animatedProp);
76+
break;
7377
}
7478
}
7579
} // namespace facebook::react

‎packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropsBuilder.h‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ struct AnimatedPropsBuilder {
3535
{
3636
props.push_back(std::make_unique<AnimatedProp<Transform>>(TRANSFORM, std::move(t)));
3737
}
38+
void setBackgroundColor(SharedColor value)
39+
{
40+
props.push_back(std::make_unique<AnimatedProp<SharedColor>>(BACKGROUND_COLOR, value));
41+
}
3842
void storeDynamic(folly::dynamic &d)
3943
{
4044
rawProps = std::make_unique<RawProps>(std::move(d));

‎packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropsSerializer.h‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
#pragma once
9+
10+
#include <folly/dynamic.h>
11+
#include "AnimatedProps.h"
12+
13+
namespace facebook::react::animationbackend {
14+
15+
folly::dynamic packAnimatedProps(const AnimatedProps &animatedProps);
16+
17+
} // namespace facebook::react::animationbackend

‎packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackend.cpp‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
*/
77

88
#include "AnimationBackend.h"
9+
#include <react/renderer/animationbackend/AnimatedPropsSerializer.h>
10+
#include <react/renderer/graphics/Color.h>
911
#include <chrono>
1012

1113
namespace facebook::react {
@@ -156,28 +158,10 @@ void AnimationBackend::commitUpdates(
156158
void AnimationBackend::synchronouslyUpdateProps(
157159
const std::unordered_map<Tag, AnimatedProps>& updates) {
158160
for (auto& [tag, animatedProps] : updates) {
159-
auto dyn = animatedProps.rawProps ? animatedProps.rawProps->toDynamic()
160-
: folly::dynamic::object();
161-
for (auto& animatedProp : animatedProps.props) {
162-
// TODO: We shouldn't repack it into dynamic, but for that a rewrite of
163-
// directManipulationCallback_ is needed
164-
switch (animatedProp->propName) {
165-
case OPACITY:
166-
dyn.insert("opacity", get<Float>(animatedProp));
167-
break;
168-
169-
case BORDER_RADII:
170-
case TRANSFORM:
171-
// TODO: handle other things than opacity
172-
break;
173-
174-
case WIDTH:
175-
case HEIGHT:
176-
case FLEX:
177-
throw "Tried to synchronously update layout props";
178-
}
179-
}
180-
directManipulationCallback_(tag, dyn);
161+
// TODO: We shouldn't repack it into dynamic, but for that a rewrite of
162+
// directManipulationCallback_ is needed
163+
auto dyn = animationbackend::packAnimatedProps(animatedProps);
164+
directManipulationCallback_(tag, std::move(dyn));
181165
}
182166
}
183167

0 commit comments

Comments
 (0)