Skip to content

Commit 2616328

Browse files
LiamandrewLukeDurrant
authored andcommitted
Add ability for Animated views to be created with scale X or scale Y
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> *Accidentally closed previous PR* Sometimes it can be useful to have an animated view be created with either scale X or scale Y in cases where scaleXY might not be as visually appealing. Test Plan Tested on both ios and android in the sample project: https://github.com/Liamandrew/ScaleAnimationSample ![scaleanimation](https://user-images.githubusercontent.com/30114733/37023697-d0aa7372-217a-11e8-8d3b-2958c63ad83a.gif) Closes facebook#18220 Differential Revision: D7542334 Pulled By: hramos fbshipit-source-id: 208472e5d8f5a04ca3c3a99adce77b035e331ef1
1 parent 532dde4 commit 2616328

File tree

4 files changed

+43
-1
lines changed

4 files changed

+43
-1
lines changed

Libraries/LayoutAnimation/LayoutAnimation.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ const Types = keyMirror(TypesEnum);
3232

3333
const PropertiesEnum = {
3434
opacity: true,
35+
scaleX: true,
36+
scaleY: true,
3537
scaleXY: true,
3638
};
3739
const Properties = keyMirror(PropertiesEnum);

React/Modules/RCTUIManager.m

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -595,6 +595,10 @@ - (RCTViewManagerUIBlock)uiBlockWithLayoutUpdateForRootView:(RCTRootShadowView *
595595
NSString *property = creatingLayoutAnimation.property;
596596
if ([property isEqualToString:@"scaleXY"]) {
597597
view.layer.transform = CATransform3DMakeScale(0, 0, 0);
598+
} else if ([property isEqualToString:@"scaleX"]) {
599+
view.layer.transform = CATransform3DMakeScale(0, 1, 0);
600+
} else if ([property isEqualToString:@"scaleY"]) {
601+
view.layer.transform = CATransform3DMakeScale(1, 0, 0);
598602
} else if ([property isEqualToString:@"opacity"]) {
599603
view.layer.opacity = 0.0;
600604
} else {
@@ -603,7 +607,11 @@ - (RCTViewManagerUIBlock)uiBlockWithLayoutUpdateForRootView:(RCTRootShadowView *
603607
}
604608

605609
[creatingLayoutAnimation performAnimations:^{
606-
if ([property isEqualToString:@"scaleXY"]) {
610+
if (
611+
[property isEqualToString:@"scaleX"] ||
612+
[property isEqualToString:@"scaleY"] ||
613+
[property isEqualToString:@"scaleXY"]
614+
) {
607615
view.layer.transform = finalTransform;
608616
} else if ([property isEqualToString:@"opacity"]) {
609617
view.layer.opacity = finalOpacity;
@@ -738,6 +746,10 @@ - (void)_removeChildren:(NSArray<UIView *> *)children
738746
[deletingLayoutAnimation performAnimations:^{
739747
if ([property isEqualToString:@"scaleXY"]) {
740748
removedChild.layer.transform = CATransform3DMakeScale(0.001, 0.001, 0.001);
749+
} else if ([property isEqualToString:@"scaleX"]) {
750+
removedChild.layer.transform = CATransform3DMakeScale(0.001, 1, 0.001);
751+
} else if ([property isEqualToString:@"scaleY"]) {
752+
removedChild.layer.transform = CATransform3DMakeScale(1, 0.001, 0.001);
741753
} else if ([property isEqualToString:@"opacity"]) {
742754
removedChild.layer.opacity = 0.0;
743755
} else {

ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/AnimatedPropertyType.java

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
*/
99
/* package */ enum AnimatedPropertyType {
1010
OPACITY("opacity"),
11+
SCALE_X("scaleX"),
12+
SCALE_Y("scaleY"),
1113
SCALE_XY("scaleXY");
1214

1315
private final String mName;

ReactAndroid/src/main/java/com/facebook/react/uimanager/layoutanimation/BaseLayoutAnimation.java

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,32 @@ Animation createAnimationImpl(View view, int x, int y, int width, int height) {
4242
Animation.RELATIVE_TO_SELF,
4343
.5f);
4444
}
45+
case SCALE_X: {
46+
float fromValue = isReverse() ? 1.0f : 0.0f;
47+
float toValue = isReverse() ? 0.0f : 1.0f;
48+
return new ScaleAnimation(
49+
fromValue,
50+
toValue,
51+
1f,
52+
1f,
53+
Animation.RELATIVE_TO_SELF,
54+
.5f,
55+
Animation.RELATIVE_TO_SELF,
56+
0f);
57+
}
58+
case SCALE_Y: {
59+
float fromValue = isReverse() ? 1.0f : 0.0f;
60+
float toValue = isReverse() ? 0.0f : 1.0f;
61+
return new ScaleAnimation(
62+
1f,
63+
1f,
64+
fromValue,
65+
toValue,
66+
Animation.RELATIVE_TO_SELF,
67+
0f,
68+
Animation.RELATIVE_TO_SELF,
69+
.5f);
70+
}
4571
default:
4672
throw new IllegalViewOperationException(
4773
"Missing animation for property : " + mAnimatedProperty);

0 commit comments

Comments
 (0)