mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Revert D40632443: Support colors for AnimatedInterpolation on iOS
Differential Revision: D40632443 (https://github.com/facebook/react-native/commit/6003e70e84c369d7dc2c6bea50ea41f0bac79595) Original commit changeset: 4dfb29edca4b Original Phabricator Diff: D40632443 (https://github.com/facebook/react-native/commit/6003e70e84c369d7dc2c6bea50ea41f0bac79595) fbshipit-source-id: 0718fbd18c3a7a06e116d9926d40d8d9a75ed4cd
This commit is contained in:
Di Chen
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
0569f6500e
commit
de7a323f6b
@@ -8,8 +8,6 @@
|
||||
#import <React/RCTColorAnimatedNode.h>
|
||||
#import <React/RCTValueAnimatedNode.h>
|
||||
|
||||
#import <React/RCTAnimationUtils.h>
|
||||
|
||||
@implementation RCTColorAnimatedNode
|
||||
|
||||
- (void)performUpdate
|
||||
@@ -21,7 +19,8 @@
|
||||
RCTValueAnimatedNode *bNode = (RCTValueAnimatedNode *)[self.parentNodes objectForKey:self.config[@"b"]];
|
||||
RCTValueAnimatedNode *aNode = (RCTValueAnimatedNode *)[self.parentNodes objectForKey:self.config[@"a"]];
|
||||
|
||||
_color = RCTColorFromComponents(rNode.value, gNode.value, bNode.value, aNode.value);
|
||||
_color = ((int)round(aNode.value * 255) & 0xff) << 24 | ((int)round(rNode.value) & 0xff) << 16 |
|
||||
((int)round(gNode.value) & 0xff) << 8 | ((int)round(bNode.value) & 0xff);
|
||||
|
||||
// TODO (T111179606): Support platform colors for color animations
|
||||
}
|
||||
|
||||
@@ -7,16 +7,6 @@
|
||||
|
||||
#import "RCTValueAnimatedNode.h"
|
||||
|
||||
#import <React/RCTDefines.h>
|
||||
|
||||
RCT_EXTERN NSString *RCTInterpolateString(
|
||||
NSString *pattern,
|
||||
CGFloat inputValue,
|
||||
NSArray *inputRange,
|
||||
NSArray<NSArray<NSNumber *> *> *outputRange,
|
||||
NSString *extrapolateLeft,
|
||||
NSString *extrapolateRight);
|
||||
|
||||
@interface RCTInterpolationAnimatedNode : RCTValueAnimatedNode
|
||||
|
||||
@end
|
||||
|
||||
@@ -8,19 +8,25 @@
|
||||
#import <React/RCTInterpolationAnimatedNode.h>
|
||||
|
||||
#import <React/RCTAnimationUtils.h>
|
||||
#import <React/RCTConvert.h>
|
||||
|
||||
static NSRegularExpression *regex;
|
||||
|
||||
typedef enum {
|
||||
kNumber,
|
||||
kColor,
|
||||
kString,
|
||||
} RCTInterpolationOutputType;
|
||||
@implementation RCTInterpolationAnimatedNode {
|
||||
__weak RCTValueAnimatedNode *_parentNode;
|
||||
NSArray<NSNumber *> *_inputRange;
|
||||
NSArray<NSNumber *> *_outputRange;
|
||||
NSArray<NSArray<NSNumber *> *> *_outputs;
|
||||
NSArray<NSString *> *_soutputRange;
|
||||
NSString *_extrapolateLeft;
|
||||
NSString *_extrapolateRight;
|
||||
NSUInteger _numVals;
|
||||
bool _hasStringOutput;
|
||||
bool _shouldRound;
|
||||
NSArray<NSTextCheckingResult *> *_matches;
|
||||
}
|
||||
|
||||
static NSRegularExpression *getNumericComponentRegex()
|
||||
- (instancetype)initWithTag:(NSNumber *)tag config:(NSDictionary<NSString *, id> *)config
|
||||
{
|
||||
static NSRegularExpression *regex;
|
||||
static dispatch_once_t onceToken;
|
||||
dispatch_once(&onceToken, ^{
|
||||
NSString *fpRegex = @"[+-]?(\\d+\\.?\\d*|\\.\\d+)([eE][+-]?\\d+)?";
|
||||
@@ -28,96 +34,65 @@ static NSRegularExpression *getNumericComponentRegex()
|
||||
options:NSRegularExpressionCaseInsensitive
|
||||
error:nil];
|
||||
});
|
||||
return regex;
|
||||
}
|
||||
|
||||
static NSArray<NSArray<NSNumber *> *> *outputFromStringPattern(NSString *input)
|
||||
{
|
||||
NSMutableArray *output = [NSMutableArray array];
|
||||
[getNumericComponentRegex()
|
||||
enumerateMatchesInString:input
|
||||
options:0
|
||||
range:NSMakeRange(0, input.length)
|
||||
usingBlock:^(NSTextCheckingResult *_Nullable result, NSMatchingFlags flags, BOOL *_Nonnull stop) {
|
||||
[output addObject:@([[input substringWithRange:result.range] doubleValue])];
|
||||
}];
|
||||
return output;
|
||||
}
|
||||
|
||||
NSString *RCTInterpolateString(
|
||||
NSString *pattern,
|
||||
CGFloat inputValue,
|
||||
NSArray<NSNumber *> *inputRange,
|
||||
NSArray<NSArray<NSNumber *> *> *outputRange,
|
||||
NSString *extrapolateLeft,
|
||||
NSString *extrapolateRight)
|
||||
{
|
||||
NSUInteger rangeIndex = RCTFindIndexOfNearestValue(inputValue, inputRange);
|
||||
|
||||
NSMutableString *output = [NSMutableString stringWithString:pattern];
|
||||
NSArray<NSTextCheckingResult *> *matches =
|
||||
[getNumericComponentRegex() matchesInString:pattern options:0 range:NSMakeRange(0, pattern.length)];
|
||||
NSInteger matchIndex = matches.count - 1;
|
||||
for (NSTextCheckingResult *match in [matches reverseObjectEnumerator]) {
|
||||
CGFloat val = RCTInterpolateValue(
|
||||
inputValue,
|
||||
[inputRange[rangeIndex] doubleValue],
|
||||
[inputRange[rangeIndex + 1] doubleValue],
|
||||
[outputRange[rangeIndex][matchIndex] doubleValue],
|
||||
[outputRange[rangeIndex + 1][matchIndex] doubleValue],
|
||||
extrapolateLeft,
|
||||
extrapolateRight);
|
||||
[output replaceCharactersInRange:match.range withString:[@(val) stringValue]];
|
||||
matchIndex--;
|
||||
}
|
||||
return output;
|
||||
}
|
||||
|
||||
@implementation RCTInterpolationAnimatedNode {
|
||||
__weak RCTValueAnimatedNode *_parentNode;
|
||||
NSArray<NSNumber *> *_inputRange;
|
||||
NSArray<id> *_outputRange;
|
||||
NSString *_extrapolateLeft;
|
||||
NSString *_extrapolateRight;
|
||||
RCTInterpolationOutputType _outputType;
|
||||
id _Nullable _outputvalue;
|
||||
NSString *_Nullable _outputPattern;
|
||||
|
||||
NSArray<NSTextCheckingResult *> *_matches;
|
||||
}
|
||||
|
||||
- (instancetype)initWithTag:(NSNumber *)tag config:(NSDictionary<NSString *, id> *)config
|
||||
{
|
||||
if ((self = [super initWithTag:tag config:config])) {
|
||||
_inputRange = config[@"inputRange"];
|
||||
_inputRange = [config[@"inputRange"] copy];
|
||||
NSMutableArray *outputRange = [NSMutableArray array];
|
||||
NSMutableArray *soutputRange = [NSMutableArray array];
|
||||
NSMutableArray<NSMutableArray<NSNumber *> *> *_outputRanges = [NSMutableArray array];
|
||||
|
||||
NSArray *outputRangeConfig = config[@"outputRange"];
|
||||
if ([config[@"outputType"] isEqual:@"color"]) {
|
||||
_outputType = kColor;
|
||||
} else if ([outputRangeConfig[0] isKindOfClass:[NSString class]]) {
|
||||
_outputType = kString;
|
||||
_outputPattern = outputRangeConfig[0];
|
||||
} else {
|
||||
_outputType = kNumber;
|
||||
}
|
||||
_hasStringOutput = NO;
|
||||
for (id value in config[@"outputRange"]) {
|
||||
if ([value isKindOfClass:[NSNumber class]]) {
|
||||
[outputRange addObject:value];
|
||||
} else if ([value isKindOfClass:[NSString class]]) {
|
||||
/**
|
||||
* Supports string shapes by extracting numbers so new values can be computed,
|
||||
* and recombines those values into new strings of the same shape. Supports
|
||||
* things like:
|
||||
*
|
||||
* rgba(123, 42, 99, 0.36) // colors
|
||||
* -45deg // values with units
|
||||
*/
|
||||
NSMutableArray *output = [NSMutableArray array];
|
||||
[_outputRanges addObject:output];
|
||||
[soutputRange addObject:value];
|
||||
|
||||
NSMutableArray *outputRange = [NSMutableArray arrayWithCapacity:outputRangeConfig.count];
|
||||
for (id value in outputRangeConfig) {
|
||||
switch (_outputType) {
|
||||
case kColor: {
|
||||
UIColor *color = [RCTConvert UIColor:value];
|
||||
[outputRange addObject:color ? color : [UIColor whiteColor]];
|
||||
break;
|
||||
_matches = [regex matchesInString:value options:0 range:NSMakeRange(0, [value length])];
|
||||
for (NSTextCheckingResult *match in _matches) {
|
||||
NSString *strNumber = [value substringWithRange:match.range];
|
||||
[output addObject:[NSNumber numberWithDouble:strNumber.doubleValue]];
|
||||
}
|
||||
case kString:
|
||||
[outputRange addObject:outputFromStringPattern(value)];
|
||||
break;
|
||||
case kNumber:
|
||||
[outputRange addObject:value];
|
||||
break;
|
||||
|
||||
_hasStringOutput = YES;
|
||||
[outputRange addObject:[output objectAtIndex:0]];
|
||||
}
|
||||
}
|
||||
_outputRange = outputRange;
|
||||
if (_hasStringOutput) {
|
||||
// ['rgba(0, 100, 200, 0)', 'rgba(50, 150, 250, 0.5)']
|
||||
// ->
|
||||
// [
|
||||
// [0, 50],
|
||||
// [100, 150],
|
||||
// [200, 250],
|
||||
// [0, 0.5],
|
||||
// ]
|
||||
_numVals = [_matches count];
|
||||
NSString *value = [soutputRange objectAtIndex:0];
|
||||
_shouldRound = [value containsString:@"rgb"];
|
||||
_matches = [regex matchesInString:value options:0 range:NSMakeRange(0, [value length])];
|
||||
NSMutableArray<NSMutableArray<NSNumber *> *> *outputs = [NSMutableArray arrayWithCapacity:_numVals];
|
||||
NSUInteger size = [soutputRange count];
|
||||
for (NSUInteger j = 0; j < _numVals; j++) {
|
||||
NSMutableArray *output = [NSMutableArray arrayWithCapacity:size];
|
||||
[outputs addObject:output];
|
||||
for (int i = 0; i < size; i++) {
|
||||
[output addObject:[[_outputRanges objectAtIndex:i] objectAtIndex:j]];
|
||||
}
|
||||
}
|
||||
_outputs = [outputs copy];
|
||||
}
|
||||
_outputRange = [outputRange copy];
|
||||
_soutputRange = [soutputRange copy];
|
||||
_extrapolateLeft = config[@"extrapolateLeft"];
|
||||
_extrapolateRight = config[@"extrapolateRight"];
|
||||
}
|
||||
@@ -148,24 +123,43 @@ NSString *RCTInterpolateString(
|
||||
}
|
||||
|
||||
CGFloat inputValue = _parentNode.value;
|
||||
switch (_outputType) {
|
||||
case kColor:
|
||||
_outputvalue = @(RCTInterpolateColorInRange(inputValue, _inputRange, _outputRange));
|
||||
break;
|
||||
case kString:
|
||||
_outputvalue = RCTInterpolateString(
|
||||
_outputPattern, inputValue, _inputRange, _outputRange, _extrapolateLeft, _extrapolateRight);
|
||||
break;
|
||||
case kNumber:
|
||||
self.value =
|
||||
RCTInterpolateValueInRange(inputValue, _inputRange, _outputRange, _extrapolateLeft, _extrapolateRight);
|
||||
break;
|
||||
|
||||
CGFloat interpolated =
|
||||
RCTInterpolateValueInRange(inputValue, _inputRange, _outputRange, _extrapolateLeft, _extrapolateRight);
|
||||
self.value = interpolated;
|
||||
if (_hasStringOutput) {
|
||||
// 'rgba(0, 100, 200, 0)'
|
||||
// ->
|
||||
// 'rgba(${interpolations[0](input)}, ${interpolations[1](input)}, ...'
|
||||
if (_numVals > 1) {
|
||||
NSString *text = _soutputRange[0];
|
||||
NSMutableString *formattedText = [NSMutableString stringWithString:text];
|
||||
NSUInteger i = _numVals;
|
||||
for (NSTextCheckingResult *match in [_matches reverseObjectEnumerator]) {
|
||||
CGFloat val =
|
||||
RCTInterpolateValueInRange(inputValue, _inputRange, _outputs[--i], _extrapolateLeft, _extrapolateRight);
|
||||
NSString *str;
|
||||
if (_shouldRound) {
|
||||
// rgba requires that the r,g,b are integers.... so we want to round them, but we *dont* want to
|
||||
// round the opacity (4th column).
|
||||
bool isAlpha = i == 3;
|
||||
CGFloat rounded = isAlpha ? round(val * 1000) / 1000 : round(val);
|
||||
str = isAlpha ? [NSString stringWithFormat:@"%1.3f", rounded] : [NSString stringWithFormat:@"%1.0f", rounded];
|
||||
} else {
|
||||
NSNumber *numberValue = [NSNumber numberWithDouble:val];
|
||||
str = [numberValue stringValue];
|
||||
}
|
||||
|
||||
[formattedText replaceCharactersInRange:[match range] withString:str];
|
||||
}
|
||||
self.animatedObject = formattedText;
|
||||
} else {
|
||||
self.animatedObject = [regex stringByReplacingMatchesInString:_soutputRange[0]
|
||||
options:0
|
||||
range:NSMakeRange(0, _soutputRange[0].length)
|
||||
withTemplate:[NSString stringWithFormat:@"%1f", interpolated]];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
- (id)animatedObject
|
||||
{
|
||||
return _outputvalue;
|
||||
}
|
||||
|
||||
@end
|
||||
|
||||
@@ -38,12 +38,7 @@
|
||||
if (node) {
|
||||
if ([node isKindOfClass:[RCTValueAnimatedNode class]]) {
|
||||
RCTValueAnimatedNode *valueAnimatedNode = (RCTValueAnimatedNode *)node;
|
||||
id animatedObject = valueAnimatedNode.animatedObject;
|
||||
if (animatedObject) {
|
||||
_propsDictionary[property] = animatedObject;
|
||||
} else {
|
||||
_propsDictionary[property] = @(valueAnimatedNode.value);
|
||||
}
|
||||
_propsDictionary[property] = @(valueAnimatedNode.value);
|
||||
} else if ([node isKindOfClass:[RCTTransformAnimatedNode class]]) {
|
||||
RCTTransformAnimatedNode *transformAnimatedNode = (RCTTransformAnimatedNode *)node;
|
||||
[_propsDictionary addEntriesFromDictionary:transformAnimatedNode.propsDictionary];
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
- (void)extractOffset;
|
||||
|
||||
@property (nonatomic, assign) CGFloat value;
|
||||
@property (nonatomic, strong, readonly) id animatedObject;
|
||||
@property (nonatomic, strong) id animatedObject;
|
||||
@property (nonatomic, weak) id<RCTValueAnimatedNodeObserver> valueObserver;
|
||||
|
||||
@end
|
||||
|
||||
@@ -43,11 +43,6 @@
|
||||
return _value + _offset;
|
||||
}
|
||||
|
||||
- (id)animatedObject
|
||||
{
|
||||
return nil;
|
||||
}
|
||||
|
||||
- (void)setValue:(CGFloat)value
|
||||
{
|
||||
_value = value;
|
||||
|
||||
Reference in New Issue
Block a user