status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-26 17:30:25 +00:00
Code Issues Projects Releases Wiki Activity

Add ability for Animated views to be created with scale X or scale Y

Browse Source 
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 https://github.com/facebook/react-native/pull/18220

Differential Revision: D7542334

Pulled By: hramos

fbshipit-source-id: 208472e5d8f5a04ca3c3a99adce77b035e331ef1
This commit is contained in:
Liamandrew 2018-04-06 17:39:54 -07:00 committed by Facebook Github Bot
parent 667ca15893
commit 3372541a2a
4 changed files with 43 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Libraries/LayoutAnimation/LayoutAnimation.js
View File

@ -32,6 +32,8 @@ const Types = keyMirror(TypesEnum);
const PropertiesEnum = {
opacity: true,
scaleX: true,
scaleY: true,
scaleXY: true,
};
const Properties = keyMirror(PropertiesEnum);

14
React/Modules/RCTUIManager.m
View File

@ -595,6 +595,10 @@ static NSDictionary *deviceOrientationEventBody(UIDeviceOrientation orientation)
NSString *property = creatingLayoutAnimation.property;
if ([property isEqualToString:@"scaleXY"]) {
view.layer.transform = CATransform3DMakeScale(0, 0, 0);
} else if ([property isEqualToString:@"scaleX"]) {
view.layer.transform = CATransform3DMakeScale(0, 1, 0);
} else if ([property isEqualToString:@"scaleY"]) {
view.layer.transform = CATransform3DMakeScale(1, 0, 0);
} else if ([property isEqualToString:@"opacity"]) {
view.layer.opacity = 0.0;
} else {
@ -603,7 +607,11 @@ static NSDictionary *deviceOrientationEventBody(UIDeviceOrientation orientation)
}
[creatingLayoutAnimation performAnimations:^{
if ([property isEqualToString:@"scaleXY"]) {
if (
[property isEqualToString:@"scaleX"] ||
[property isEqualToString:@"scaleY"] ||
[property isEqualToString:@"scaleXY"]
) {
view.layer.transform = finalTransform;
} else if ([property isEqualToString:@"opacity"]) {
view.layer.opacity = finalOpacity;
@ -738,6 +746,10 @@ RCT_EXPORT_METHOD(removeSubviewsFromContainerWithID:(nonnull NSNumber *)containe
[deletingLayoutAnimation performAnimations:^{
if ([property isEqualToString:@"scaleXY"]) {
removedChild.layer.transform = CATransform3DMakeScale(0.001, 0.001, 0.001);
} else if ([property isEqualToString:@"scaleX"]) {
removedChild.layer.transform = CATransform3DMakeScale(0.001, 1, 0.001);
} else if ([property isEqualToString:@"scaleY"]) {
removedChild.layer.transform = CATransform3DMakeScale(1, 0.001, 0.001);
} else if ([property isEqualToString:@"opacity"]) {
removedChild.layer.opacity = 0.0;
} else {

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

@ -8,6 +8,8 @@ package com.facebook.react.uimanager.layoutanimation;
*/
/* package */ enum AnimatedPropertyType {
OPACITY("opacity"),
SCALE_X("scaleX"),
SCALE_Y("scaleY"),
SCALE_XY("scaleXY");
private final String mName;

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

@ -42,6 +42,32 @@ import com.facebook.react.uimanager.IllegalViewOperationException;
Animation.RELATIVE_TO_SELF,
.5f);
}
case SCALE_X: {
float fromValue = isReverse() ? 1.0f : 0.0f;
float toValue = isReverse() ? 0.0f : 1.0f;
return new ScaleAnimation(
fromValue,
toValue,
1f,
1f,
Animation.RELATIVE_TO_SELF,
.5f,
Animation.RELATIVE_TO_SELF,
0f);
}
case SCALE_Y: {
float fromValue = isReverse() ? 1.0f : 0.0f;
float toValue = isReverse() ? 0.0f : 1.0f;
return new ScaleAnimation(
1f,
1f,
fromValue,
toValue,
Animation.RELATIVE_TO_SELF,
0f,
Animation.RELATIVE_TO_SELF,
.5f);
}
default:
throw new IllegalViewOperationException(
"Missing animation for property : " + mAnimatedProperty);