kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-24 04:16:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add support for delete animation in LayoutAnimation on iOS

Browse Source 
Summary:This adds support for delete view animations in LayoutAnimation for iOS. It supports the same properties as the create animation (alpha, scale).

This allows making simple animations when removing a view which is normally hard to do in React since we need to not remove the view node immediately.

**Test plan**
Tested add/removing views in the UIExample explorer with and without setting a LayoutAnimation. Also tested that the completion callback still works properly. Tested that user interation during the animation is properly disabled.

![layout-anim2](https://cloud.githubusercontent.com/assets/2677334/14595471/86fb1654-050d-11e6-8b38-fe45cc2dcd71.gif)

I also plan to work on improving the doc for LayoutAnimation as well as making this PR for android too.
Closes https://github.com/facebook/react-native/pull/6779

Differential Revision: D3215525

Pulled By: sahrens

fb-gh-sync-id: 526120acd371c8d1af433e8f199cfed336183775
fbshipit-source-id: 526120acd371c8d1af433e8f199cfed336183775
This commit is contained in:
Janic Duplessis
2016-04-25 00:08:42 -07:00
committed by Facebook Github Bot 7
parent 23918692ac
commit baa3668160
5 changed files with 252 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
React/Modules/RCTUIManager.m
View File

@@ -191,7 +191,6 @@ static UIViewAnimationOptions UIViewAnimationOptionsFromRCTAnimationType(RCTAnim
NSMutableArray<dispatch_block_t> *_pendingUIBlocks;
// Animation
RCTLayoutAnimation *_nextLayoutAnimation; // RCT thread only
RCTLayoutAnimation *_layoutAnimation; // Main thread only
NSMutableDictionary<NSNumber *, RCTShadowView *> *_shadowViewRegistry; // RCT thread only
@@ -582,11 +581,7 @@ RCT_EXPORT_MODULE()
// Perform layout (possibly animated)
return ^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
RCTResponseSenderBlock callback = self->_layoutAnimation.callback;
// It's unsafe to call this callback more than once, so we nil it out here
// to make sure that doesn't happen.
_layoutAnimation.callback = nil;
RCTLayoutAnimation *layoutAnimation = _layoutAnimation;
__block NSUInteger completionsCalled = 0;
for (NSUInteger ii = 0; ii < frames.count; ii++) {
@@ -595,14 +590,18 @@ RCT_EXPORT_MODULE()
CGRect frame = [frames[ii] CGRectValue];
BOOL isNew = [areNew[ii] boolValue];
RCTAnimation *updateAnimation = isNew ? nil : _layoutAnimation.updateAnimation;
RCTAnimation *updateAnimation = isNew ? nil : layoutAnimation.updateAnimation;
BOOL shouldAnimateCreation = isNew && ![parentsAreNew[ii] boolValue];
RCTAnimation *createAnimation = shouldAnimateCreation ? _layoutAnimation.createAnimation : nil;
RCTAnimation *createAnimation = shouldAnimateCreation ? layoutAnimation.createAnimation : nil;
void (^completion)(BOOL) = ^(BOOL finished) {
completionsCalled++;
if (callback && completionsCalled == frames.count) {
callback(@[@(finished)]);
if (layoutAnimation.callback && completionsCalled == frames.count) {
layoutAnimation.callback(@[@(finished)]);
// It's unsafe to call this callback more than once, so we nil it out here
// to make sure that doesn't happen.
layoutAnimation.callback = nil;
}
};
@@ -656,6 +655,8 @@ RCT_EXPORT_MODULE()
completion(YES);
}
}
_layoutAnimation = nil;
};
}
@@ -729,9 +730,49 @@ RCT_EXPORT_METHOD(removeSubviewsFromContainerWithID:(nonnull NSNumber *)containe
- (void)_removeChildren:(NSArray<id<RCTComponent>> *)children
fromContainer:(id<RCTComponent>)container
permanent: (BOOL)permanent
{
RCTLayoutAnimation *layoutAnimation = _layoutAnimation;
RCTAnimation *deleteAnimation = layoutAnimation.deleteAnimation;
__block NSUInteger completionsCalled = 0;
for (id<RCTComponent> removedChild in children) {
[container removeReactSubview:removedChild];
void (^completion)(BOOL) = ^(BOOL finished) {
completionsCalled++;
[container removeReactSubview:removedChild];
if (layoutAnimation.callback && completionsCalled == children.count) {
layoutAnimation.callback(@[@(finished)]);
// It's unsafe to call this callback more than once, so we nil it out here
// to make sure that doesn't happen.
layoutAnimation.callback = nil;
}
};
if (permanent && deleteAnimation && [removedChild isKindOfClass: [UIView class]]) {
UIView *view = (UIView *)removedChild;
// Disable user interaction while the view is animating since JS won't receive
// the view events anyway.
view.userInteractionEnabled = NO;
[deleteAnimation performAnimations:^{
if ([deleteAnimation.property isEqual:@"scaleXY"]) {
view.layer.transform = CATransform3DMakeScale(0, 0, 0);
} else if ([deleteAnimation.property isEqual:@"opacity"]) {
view.layer.opacity = 0.0;
} else {
RCTLogError(@"Unsupported layout animation createConfig property %@",
deleteAnimation.property);
}
} withCompletionBlock:completion];
} else {
[container removeReactSubview:removedChild];
}
}
}
@@ -848,8 +889,8 @@ RCT_EXPORT_METHOD(manageChildren:(nonnull NSNumber *)containerReactTag
[self _childrenToRemoveFromContainer:container atIndices:removeAtIndices];
NSArray<id<RCTComponent>> *temporarilyRemovedChildren =
[self _childrenToRemoveFromContainer:container atIndices:moveFromIndices];
[self _removeChildren:permanentlyRemovedChildren fromContainer:container];
[self _removeChildren:temporarilyRemovedChildren fromContainer:container];
[self _removeChildren:permanentlyRemovedChildren fromContainer:container permanent:true];
[self _removeChildren:temporarilyRemovedChildren fromContainer:container permanent:false];
[self _purgeChildren:permanentlyRemovedChildren fromRegistry:registry];
@@ -1015,14 +1056,6 @@ RCT_EXPORT_METHOD(dispatchViewManagerCommand:(nonnull NSNumber *)reactTag
[self addUIBlock:uiBlock];
}
// Set up next layout animation
if (_nextLayoutAnimation) {
RCTLayoutAnimation *layoutAnimation = _nextLayoutAnimation;
[self addUIBlock:^(RCTUIManager *uiManager, __unused NSDictionary<NSNumber *, UIView *> *viewRegistry) {
uiManager->_layoutAnimation = layoutAnimation;
}];
}
// Perform layout
for (NSNumber *reactTag in _rootViewTags) {
RCTRootShadowView *rootView = (RCTRootShadowView *)_shadowViewRegistry[reactTag];
@@ -1030,14 +1063,6 @@ RCT_EXPORT_METHOD(dispatchViewManagerCommand:(nonnull NSNumber *)reactTag
[self _amendPendingUIBlocksWithStylePropagationUpdateForShadowView:rootView];
}
// Clear layout animations
if (_nextLayoutAnimation) {
[self addUIBlock:^(RCTUIManager *uiManager, __unused NSDictionary<NSNumber *, UIView *> *viewRegistry) {
uiManager->_layoutAnimation = nil;
}];
_nextLayoutAnimation = nil;
}
[self addUIBlock:^(RCTUIManager *uiManager, __unused NSDictionary<NSNumber *, UIView *> *viewRegistry) {
/**
* TODO(tadeu): Remove it once and for all
@@ -1429,14 +1454,19 @@ RCT_EXPORT_METHOD(configureNextLayoutAnimation:(NSDictionary *)config
withCallback:(RCTResponseSenderBlock)callback
errorCallback:(__unused RCTResponseSenderBlock)errorCallback)
{
if (_nextLayoutAnimation && ![config isEqualToDictionary:_nextLayoutAnimation.config]) {
RCTLogWarn(@"Warning: Overriding previous layout animation with new one before the first began:\n%@ -> %@.", _nextLayoutAnimation.config, config);
RCTLayoutAnimation *currentAnimation = _layoutAnimation;
if (currentAnimation && ![config isEqualToDictionary:currentAnimation.config]) {
RCTLogWarn(@"Warning: Overriding previous layout animation with new one before the first began:\n%@ -> %@.", currentAnimation.config, config);
}
if (config[@"delete"] != nil) {
RCTLogError(@"LayoutAnimation only supports create and update right now. Config: %@", config);
}
_nextLayoutAnimation = [[RCTLayoutAnimation alloc] initWithDictionary:config
RCTLayoutAnimation *nextLayoutAnimation = [[RCTLayoutAnimation alloc] initWithDictionary:config
callback:callback];
// Set up next layout animation
[self addUIBlock:^(RCTUIManager *uiManager, __unused NSDictionary<NSNumber *, UIView *> *viewRegistry) {
uiManager->_layoutAnimation = nextLayoutAnimation;
}];
}
static UIView *_jsResponder;