Skip to content

Commit 084710e

Browse files
coadofacebook-github-bot
coado
authored and
facebook-github-bot
committed
Implementation of transform, border radius, and background color props on animation backend (facebook#54698)
Summary: Adds support for transform and border radius props to be handled by shared 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] Test Plan: Checked on reanimated example app. Differential Revision: D87922886 Pulled By: coado
1 parent dba18bb commit 084710e

File tree

5 files changed

+172
-22
lines changed

5 files changed

+172
-22
lines changed

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

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
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+
/* static */
14+
void AnimatedPropsSerializer::packBorderRadiusCorner(
15+
folly::dynamic& dyn,
16+
const std::string& propName,
17+
const std::optional<ValueUnit>& cornerValue) {
18+
if (cornerValue.has_value()) {
19+
dyn.insert(propName, cornerValue.value().value);
20+
}
21+
}
22+
23+
/* static */
24+
void AnimatedPropsSerializer::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+
/* static */
50+
void AnimatedPropsSerializer::packOpacity(
51+
folly::dynamic& dyn,
52+
const AnimatedPropBase& animatedProp) {
53+
dyn.insert("opacity", get<Float>(animatedProp));
54+
}
55+
56+
/* static */
57+
void AnimatedPropsSerializer::packTransform(
58+
folly::dynamic& dyn,
59+
const AnimatedPropBase& animatedProp) {
60+
const auto transform = get<Transform>(animatedProp);
61+
const auto matrixArray = folly::dynamic::array(
62+
transform.matrix[0],
63+
transform.matrix[1],
64+
transform.matrix[2],
65+
transform.matrix[3],
66+
transform.matrix[4],
67+
transform.matrix[5],
68+
transform.matrix[6],
69+
transform.matrix[7],
70+
transform.matrix[8],
71+
transform.matrix[9],
72+
transform.matrix[10],
73+
transform.matrix[11],
74+
transform.matrix[12],
75+
transform.matrix[13],
76+
transform.matrix[14],
77+
transform.matrix[15]);
78+
dyn.insert(
79+
"transform",
80+
folly::dynamic::array(folly::dynamic::object("matrix", matrixArray)));
81+
}
82+
83+
/* static */
84+
void AnimatedPropsSerializer::packBackgroundColor(
85+
folly::dynamic& dyn,
86+
const AnimatedPropBase& animatedProp) {
87+
const auto& backgroundColor = get<SharedColor>(animatedProp);
88+
if (backgroundColor) {
89+
dyn.insert("backgroundColor", static_cast<int32_t>(*backgroundColor));
90+
}
91+
}
92+
93+
/* static */
94+
void AnimatedPropsSerializer::packAnimatedProp(
95+
folly::dynamic& dyn,
96+
const std::unique_ptr<AnimatedPropBase>& animatedProp) {
97+
switch (animatedProp->propName) {
98+
case OPACITY:
99+
packOpacity(dyn, *animatedProp);
100+
break;
101+
102+
case TRANSFORM:
103+
packTransform(dyn, *animatedProp);
104+
break;
105+
106+
case BACKGROUND_COLOR:
107+
packBackgroundColor(dyn, *animatedProp);
108+
break;
109+
110+
case BORDER_RADII:
111+
packBorderRadii(dyn, *animatedProp);
112+
break;
113+
114+
case WIDTH:
115+
case HEIGHT:
116+
case FLEX:
117+
throw std::runtime_error("Tried to synchronously update layout props");
118+
}
119+
}
120+
121+
/* static */
122+
folly::dynamic AnimatedPropsSerializer::packAnimatedProps(
123+
const AnimatedProps& animatedProps) {
124+
auto dyn = animatedProps.rawProps ? animatedProps.rawProps->toDynamic()
125+
: folly::dynamic::object();
126+
127+
for (auto& animatedProp : animatedProps.props) {
128+
packAnimatedProp(dyn, animatedProp);
129+
}
130+
131+
return dyn;
132+
}
133+
} // 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: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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 {
14+
class AnimatedPropsSerializer {
15+
public:
16+
static folly::dynamic packAnimatedProps(const AnimatedProps &animatedProps);
17+
static void packAnimatedProp(folly::dynamic &dyn, const std::unique_ptr<AnimatedPropBase> &animatedProp);
18+
19+
private:
20+
static void packOpacity(folly::dynamic &dyn, const AnimatedPropBase &animatedProp);
21+
static void packBorderRadii(folly::dynamic &dyn, const AnimatedPropBase &animatedProp);
22+
static void packTransform(folly::dynamic &dyn, const AnimatedPropBase &animatedProp);
23+
static void packBackgroundColor(folly::dynamic &dyn, const AnimatedPropBase &animatedProp);
24+
static void
25+
packBorderRadiusCorner(folly::dynamic &dyn, const std::string &propName, const std::optional<ValueUnit> &cornerValue);
26+
};
27+
} // namespace facebook::react

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

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
*/
77

88
#include "AnimationBackend.h"
9+
#include <react/renderer/graphics/Color.h>
910
#include <chrono>
11+
#include "AnimatedPropsSerializer.h"
1012

1113
namespace facebook::react {
1214

@@ -156,27 +158,7 @@ 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-
}
161+
auto dyn = AnimatedPropsSerializer::packAnimatedProps(animatedProps);
180162
directManipulationCallback_(tag, dyn);
181163
}
182164
}

0 commit comments

Comments
 (0)