react-native/Libraries/NativeAnimation/Nodes/RCTTransformAnimatedNode.m
Ryan Gomba eb96b7fabc Maintain transform order
Summary:
This diff addresses the issues raised by kmagiera in https://github.com/facebook/react-native/pull/7884. Transforms should be applied in the order they are defined, just like in `processTransform.js`. A scale applied before a translation, for instance, should give a different result than a translation applied before a scale.

We leverage CATransform3D to do the heavy lifting. A concatenated transform is passed all the way to `RCTViewPropertyMapper`. It is compared with the transform currently applied to the view, and if different, applied. The same approach is used for opacity.

I think it makes the most sense to do this diffing in `RCTViewPropertyMapper`, as opposed to creating and cleaning up an `_updatedPropsDictionary` each frame in `RCTTransformAnimatedNode` and `RCTStyleAnimatedNode`. The node should keep its full value; applying a minimal set of altered props is an optimization.  The higher up this optimization is implemented, the more assumptions it makes. e.g. that there will only ever be a sing
Closes https://github.com/facebook/react-native/pull/9050

Differential Revision: D3658139

fbshipit-source-id: ad6286762ef734084cbdf83c9bd9241190302d34
2016-08-02 14:28:29 -07:00

89 lines
2.7 KiB
Objective-C

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "RCTTransformAnimatedNode.h"
#import "RCTValueAnimatedNode.h"
@implementation RCTTransformAnimatedNode
{
NSMutableDictionary<NSString *, NSObject *> *_updatedPropsDictionary;
}
- (instancetype)initWithTag:(NSNumber *)tag
config:(NSDictionary<NSString *, id> *)config;
{
if ((self = [super initWithTag:tag config:config])) {
_updatedPropsDictionary = [NSMutableDictionary new];
}
return self;
}
- (NSDictionary *)updatedPropsDictionary
{
return _updatedPropsDictionary;
}
- (void)performUpdate
{
[super performUpdate];
CATransform3D transform = CATransform3DIdentity;
NSArray<NSDictionary *> *transformConfigs = self.config[@"transforms"];
for (NSDictionary *transformConfig in transformConfigs) {
NSNumber *nodeTag = transformConfig[@"nodeTag"];
RCTAnimatedNode *node = self.parentNodes[nodeTag];
if (node.hasUpdated && [node isKindOfClass:[RCTValueAnimatedNode class]]) {
RCTValueAnimatedNode *parentNode = (RCTValueAnimatedNode *)node;
NSString *property = transformConfig[@"property"];
CGFloat value = parentNode.value;
if ([property isEqualToString:@"scale"]) {
transform = CATransform3DScale(transform, value, value, 1);
} else if ([property isEqualToString:@"scaleX"]) {
transform = CATransform3DScale(transform, value, 1, 1);
} else if ([property isEqualToString:@"scaleY"]) {
transform = CATransform3DScale(transform, 1, value, 1);
} else if ([property isEqualToString:@"translateX"]) {
transform = CATransform3DTranslate(transform, value, 0, 0);
} else if ([property isEqualToString:@"translateY"]) {
transform = CATransform3DTranslate(transform, 0, value, 0);
} else if ([property isEqualToString:@"rotate"]) {
transform = CATransform3DRotate(transform, value, 0, 0, 1);
} else if ([property isEqualToString:@"rotateX"]) {
transform = CATransform3DRotate(transform, value, 1, 0, 0);
} else if ([property isEqualToString:@"rotateY"]) {
transform = CATransform3DRotate(transform, value, 0, 1, 0);
} else if ([property isEqualToString:@"perspective"]) {
transform.m34 = 1.0 / -value;
}
}
}
_updatedPropsDictionary[@"transform"] = [NSValue valueWithCATransform3D:transform];
}
- (void)cleanupAnimationUpdate
{
[super cleanupAnimationUpdate];
[_updatedPropsDictionary removeAllObjects];
}
@end