Native Animated - Support decay on iOS
Summary: This is one of the last feature that is missing from native animated, it was already supported on Android and this implementation is based on it. **Test plan** Test that the existing decay animation example now works on iOS Run unit tests Closes https://github.com/facebook/react-native/pull/13368 Differential Revision: D4938061 Pulled By: javache fbshipit-source-id: 36b57b1029a542e9daf21e048a06d3b3347e9659
This commit is contained in:
Janic Duplessis
Facebook Github Bot
parent
f1d5fdd468
commit
6c434f9404
|
|
@ -288,6 +288,99 @@ static id RCTPropChecker(NSString *prop, NSNumber *value)
|
|||
[_uiManager verify];
|
||||
}
|
||||
|
||||
- (void)testDecayAnimation
|
||||
{
|
||||
[self createSimpleAnimatedView:@1000 withOpacity:0];
|
||||
[_nodesManager startAnimatingNode:@1
|
||||
nodeTag:@1
|
||||
config:@{@"type": @"decay",
|
||||
@"velocity": @0.5,
|
||||
@"deceleration": @0.998}
|
||||
endCallback:nil];
|
||||
|
||||
|
||||
__block CGFloat previousValue;
|
||||
__block CGFloat currentValue;
|
||||
CGFloat previousDiff = CGFLOAT_MAX;
|
||||
|
||||
[_nodesManager stepAnimations:_displayLink];
|
||||
|
||||
[[[_uiManager stub] andDo:^(NSInvocation *invocation) {
|
||||
__unsafe_unretained NSDictionary<NSString *, NSNumber *> *props;
|
||||
[invocation getArgument:&props atIndex:4];
|
||||
currentValue = props[@"opacity"].doubleValue;
|
||||
}] synchronouslyUpdateViewOnUIThread:OCMOCK_ANY viewName:OCMOCK_ANY props:OCMOCK_ANY];
|
||||
|
||||
// Run 3 secs of animation.
|
||||
for (NSUInteger i = 0; i < 3 * 60; i++) {
|
||||
[_nodesManager stepAnimations:_displayLink];
|
||||
CGFloat currentDiff = currentValue - previousValue;
|
||||
// Verify monotonicity.
|
||||
// Greater *or equal* because the animation stops during these 3 seconds.
|
||||
XCTAssertGreaterThanOrEqual(currentValue, previousValue);
|
||||
// Verify decay.
|
||||
XCTAssertLessThanOrEqual(currentDiff, previousDiff);
|
||||
previousValue = currentValue;
|
||||
previousDiff = currentDiff;
|
||||
}
|
||||
|
||||
// Should be done in 3 secs.
|
||||
[[_uiManager reject] synchronouslyUpdateViewOnUIThread:OCMOCK_ANY viewName:OCMOCK_ANY props:OCMOCK_ANY];
|
||||
[_nodesManager stepAnimations:_displayLink];
|
||||
[_uiManager verify];
|
||||
}
|
||||
|
||||
- (void)testDecayAnimationLoop
|
||||
{
|
||||
[self createSimpleAnimatedView:@1000 withOpacity:0];
|
||||
[_nodesManager startAnimatingNode:@1
|
||||
nodeTag:@1
|
||||
config:@{@"type": @"decay",
|
||||
@"velocity": @0.5,
|
||||
@"deceleration": @0.998,
|
||||
@"iterations": @5}
|
||||
endCallback:nil];
|
||||
|
||||
|
||||
__block CGFloat previousValue;
|
||||
__block CGFloat currentValue;
|
||||
BOOL didComeToRest = NO;
|
||||
NSUInteger numberOfResets = 0;
|
||||
|
||||
[[[_uiManager stub] andDo:^(NSInvocation *invocation) {
|
||||
__unsafe_unretained NSDictionary<NSString *, NSNumber *> *props;
|
||||
[invocation getArgument:&props atIndex:4];
|
||||
currentValue = props[@"opacity"].doubleValue;
|
||||
}] synchronouslyUpdateViewOnUIThread:OCMOCK_ANY viewName:OCMOCK_ANY props:OCMOCK_ANY];
|
||||
|
||||
// Run 3 secs of animation five times.
|
||||
for (NSUInteger i = 0; i < 3 * 60 * 5; i++) {
|
||||
[_nodesManager stepAnimations:_displayLink];
|
||||
|
||||
// Verify monotonicity when not resetting the animation.
|
||||
// Greater *or equal* because the animation stops during these 3 seconds.
|
||||
if (!didComeToRest) {
|
||||
XCTAssertGreaterThanOrEqual(currentValue, previousValue);
|
||||
}
|
||||
|
||||
if (didComeToRest && currentValue != previousValue) {
|
||||
numberOfResets++;
|
||||
didComeToRest = NO;
|
||||
}
|
||||
|
||||
// Test if animation has come to rest using the 0.1 threshold from DecayAnimation.m.
|
||||
didComeToRest = fabs(currentValue - previousValue) < 0.1;
|
||||
previousValue = currentValue;
|
||||
}
|
||||
|
||||
// The animation should have reset 4 times.
|
||||
XCTAssertEqual(numberOfResets, 4u);
|
||||
|
||||
[[_uiManager reject] synchronouslyUpdateViewOnUIThread:OCMOCK_ANY viewName:OCMOCK_ANY props:OCMOCK_ANY];
|
||||
[_nodesManager stepAnimations:_displayLink];
|
||||
[_uiManager verify];
|
||||
}
|
||||
|
||||
- (void)testAnimationCallbackFinish
|
||||
{
|
||||
[self createSimpleAnimatedView:@1000 withOpacity:0];
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@
|
|||
|
||||
#import <React/RCTBridgeModule.h>
|
||||
|
||||
static CGFloat RCTSingleFrameInterval = 1.0 / 60.0;
|
||||
|
||||
@class RCTValueAnimatedNode;
|
||||
|
||||
NS_ASSUME_NONNULL_BEGIN
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
/**
|
||||
* 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 "RCTAnimationDriver.h"
|
||||
|
||||
@interface RCTDecayAnimation : NSObject<RCTAnimationDriver>
|
||||
|
||||
@end
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
/**
|
||||
* 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 "RCTDecayAnimation.h"
|
||||
|
||||
#import <UIKit/UIKit.h>
|
||||
#import <React/RCTConvert.h>
|
||||
|
||||
#import "RCTValueAnimatedNode.h"
|
||||
|
||||
@interface RCTDecayAnimation ()
|
||||
|
||||
@property (nonatomic, strong) NSNumber *animationId;
|
||||
@property (nonatomic, strong) RCTValueAnimatedNode *valueNode;
|
||||
@property (nonatomic, assign) BOOL animationHasBegun;
|
||||
@property (nonatomic, assign) BOOL animationHasFinished;
|
||||
|
||||
@end
|
||||
|
||||
@implementation RCTDecayAnimation
|
||||
{
|
||||
CGFloat _velocity;
|
||||
CGFloat _deceleration;
|
||||
NSTimeInterval _frameStartTime;
|
||||
CGFloat _fromValue;
|
||||
CGFloat _lastValue;
|
||||
NSInteger _iterations;
|
||||
NSInteger _currentLoop;
|
||||
RCTResponseSenderBlock _callback;
|
||||
}
|
||||
|
||||
- (instancetype)initWithId:(NSNumber *)animationId
|
||||
config:(NSDictionary *)config
|
||||
forNode:(RCTValueAnimatedNode *)valueNode
|
||||
callBack:(nullable RCTResponseSenderBlock)callback;
|
||||
{
|
||||
if ((self = [super init])) {
|
||||
NSNumber *iterations = [RCTConvert NSNumber:config[@"iterations"]] ?: @1;
|
||||
|
||||
_animationId = animationId;
|
||||
_fromValue = 0;
|
||||
_lastValue = 0;
|
||||
_valueNode = valueNode;
|
||||
_callback = [callback copy];
|
||||
_velocity = [RCTConvert CGFloat:config[@"velocity"]];
|
||||
_deceleration = [RCTConvert CGFloat:config[@"deceleration"]];
|
||||
_iterations = iterations.integerValue;
|
||||
_currentLoop = 1;
|
||||
_animationHasFinished = iterations.integerValue == 0;
|
||||
}
|
||||
return self;
|
||||
}
|
||||
|
||||
RCT_NOT_IMPLEMENTED(- (instancetype)init)
|
||||
|
||||
- (void)startAnimation
|
||||
{
|
||||
_frameStartTime = -1;
|
||||
_animationHasBegun = YES;
|
||||
}
|
||||
|
||||
- (void)stopAnimation
|
||||
{
|
||||
_valueNode = nil;
|
||||
if (_callback) {
|
||||
_callback(@[@{
|
||||
@"finished": @(_animationHasFinished)
|
||||
}]);
|
||||
}
|
||||
}
|
||||
|
||||
- (void)stepAnimationWithTime:(NSTimeInterval)currentTime
|
||||
{
|
||||
if (!_animationHasBegun || _animationHasFinished) {
|
||||
// Animation has not begun or animation has already finished.
|
||||
return;
|
||||
}
|
||||
|
||||
if (_frameStartTime == -1) {
|
||||
// Since this is the first animation step, consider the start to be on the previous frame.
|
||||
_frameStartTime = currentTime - RCTSingleFrameInterval;
|
||||
if (_fromValue == _lastValue) {
|
||||
// First iteration, assign _fromValue based on _valueNode.
|
||||
_fromValue = _valueNode.value;
|
||||
} else {
|
||||
// Not the first iteration, reset _valueNode based on _fromValue.
|
||||
[self updateValue:_fromValue];
|
||||
}
|
||||
_lastValue = _valueNode.value;
|
||||
}
|
||||
|
||||
CGFloat value = _fromValue +
|
||||
(_velocity / (1 - _deceleration)) *
|
||||
(1 - exp(-(1 - _deceleration) * (currentTime - _frameStartTime) * 1000.0));
|
||||
|
||||
[self updateValue:value];
|
||||
|
||||
if (fabs(_lastValue - value) < 0.1) {
|
||||
if (_iterations == -1 || _currentLoop < _iterations) {
|
||||
// Set _frameStartTime to -1 to reset instance variables on the next runAnimationStep.
|
||||
_frameStartTime = -1;
|
||||
_currentLoop++;
|
||||
} else {
|
||||
_animationHasFinished = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
_lastValue = value;
|
||||
}
|
||||
|
||||
- (void)updateValue:(CGFloat)outputValue
|
||||
{
|
||||
_valueNode.value = outputValue;
|
||||
[_valueNode setNeedsUpdate];
|
||||
}
|
||||
|
||||
@end
|
||||
|
|
@ -17,8 +17,6 @@
|
|||
#import "RCTAnimationUtils.h"
|
||||
#import "RCTValueAnimatedNode.h"
|
||||
|
||||
const double SINGLE_FRAME_INTERVAL = 1.0 / 60.0;
|
||||
|
||||
@interface RCTFrameAnimation ()
|
||||
|
||||
@property (nonatomic, strong) NSNumber *animationId;
|
||||
|
|
@ -91,7 +89,7 @@ RCT_NOT_IMPLEMENTED(- (instancetype)init)
|
|||
|
||||
// Determine how many frames have passed since last update.
|
||||
// Get index of frames that surround the current interval
|
||||
NSUInteger startIndex = floor(currentDuration / SINGLE_FRAME_INTERVAL);
|
||||
NSUInteger startIndex = floor(currentDuration / RCTSingleFrameInterval);
|
||||
NSUInteger nextIndex = startIndex + 1;
|
||||
|
||||
if (nextIndex >= _frames.count) {
|
||||
|
|
@ -106,8 +104,8 @@ RCT_NOT_IMPLEMENTED(- (instancetype)init)
|
|||
// Do a linear remap of the two frames to safegaurd against variable framerates
|
||||
NSNumber *fromFrameValue = _frames[startIndex];
|
||||
NSNumber *toFrameValue = _frames[nextIndex];
|
||||
NSTimeInterval fromInterval = startIndex * SINGLE_FRAME_INTERVAL;
|
||||
NSTimeInterval toInterval = nextIndex * SINGLE_FRAME_INTERVAL;
|
||||
NSTimeInterval fromInterval = startIndex * RCTSingleFrameInterval;
|
||||
NSTimeInterval toInterval = nextIndex * RCTSingleFrameInterval;
|
||||
|
||||
// Interpolate between the individual frames to ensure the animations are
|
||||
//smooth and of the proper duration regardless of the framerate.
|
||||
|
|
|
|||
|
|
@ -54,6 +54,12 @@
|
|||
192F69A41E823F78008692C7 /* RCTTransformAnimatedNode.h in CopyFiles */ = {isa = PBXBuildFile; fileRef = 13E501E41D07A6C9005F35D8 /* RCTTransformAnimatedNode.h */; };
|
||||
192F69A51E823F78008692C7 /* RCTValueAnimatedNode.h in CopyFiles */ = {isa = PBXBuildFile; fileRef = 13E501E61D07A6C9005F35D8 /* RCTValueAnimatedNode.h */; };
|
||||
193F64F41D776EC6004D1CAA /* RCTDiffClampAnimatedNode.m in Sources */ = {isa = PBXBuildFile; fileRef = 193F64F31D776EC6004D1CAA /* RCTDiffClampAnimatedNode.m */; };
|
||||
194804ED1E975D8E00623005 /* RCTDecayAnimation.h in Headers */ = {isa = PBXBuildFile; fileRef = 194804EB1E975D8E00623005 /* RCTDecayAnimation.h */; };
|
||||
194804EE1E975D8E00623005 /* RCTDecayAnimation.m in Sources */ = {isa = PBXBuildFile; fileRef = 194804EC1E975D8E00623005 /* RCTDecayAnimation.m */; };
|
||||
194804EF1E975DB500623005 /* RCTDecayAnimation.h in CopyFiles */ = {isa = PBXBuildFile; fileRef = 194804EB1E975D8E00623005 /* RCTDecayAnimation.h */; };
|
||||
194804F01E975DCF00623005 /* RCTDecayAnimation.h in Headers */ = {isa = PBXBuildFile; fileRef = 194804EB1E975D8E00623005 /* RCTDecayAnimation.h */; };
|
||||
194804F11E975DD700623005 /* RCTDecayAnimation.h in CopyFiles */ = {isa = PBXBuildFile; fileRef = 194804EB1E975D8E00623005 /* RCTDecayAnimation.h */; };
|
||||
194804F21E977DDB00623005 /* RCTDecayAnimation.m in Sources */ = {isa = PBXBuildFile; fileRef = 194804EC1E975D8E00623005 /* RCTDecayAnimation.m */; };
|
||||
1980B70E1E80D1C4004DC789 /* RCTAnimationUtils.h in Headers */ = {isa = PBXBuildFile; fileRef = 13E501B71D07A644005F35D8 /* RCTAnimationUtils.h */; };
|
||||
1980B7101E80D1C4004DC789 /* RCTNativeAnimatedModule.h in Headers */ = {isa = PBXBuildFile; fileRef = 13E501BD1D07A644005F35D8 /* RCTNativeAnimatedModule.h */; };
|
||||
1980B7121E80D1C4004DC789 /* RCTNativeAnimatedNodesManager.h in Headers */ = {isa = PBXBuildFile; fileRef = 94DA09161DC7971C00AEA8C9 /* RCTNativeAnimatedNodesManager.h */; };
|
||||
|
|
@ -122,6 +128,7 @@
|
|||
dstPath = include/RCTAnimation;
|
||||
dstSubfolderSpec = 16;
|
||||
files = (
|
||||
194804F11E975DD700623005 /* RCTDecayAnimation.h in CopyFiles */,
|
||||
192F69941E823F78008692C7 /* RCTAnimationUtils.h in CopyFiles */,
|
||||
192F69951E823F78008692C7 /* RCTNativeAnimatedModule.h in CopyFiles */,
|
||||
192F69961E823F78008692C7 /* RCTNativeAnimatedNodesManager.h in CopyFiles */,
|
||||
|
|
@ -149,6 +156,7 @@
|
|||
dstPath = include/RCTAnimation;
|
||||
dstSubfolderSpec = 16;
|
||||
files = (
|
||||
194804EF1E975DB500623005 /* RCTDecayAnimation.h in CopyFiles */,
|
||||
1980B7351E80DD6F004DC789 /* RCTNativeAnimatedModule.h in CopyFiles */,
|
||||
1980B7361E80DD6F004DC789 /* RCTNativeAnimatedNodesManager.h in CopyFiles */,
|
||||
1980B7371E80DD6F004DC789 /* RCTAnimationDriver.h in CopyFiles */,
|
||||
|
|
@ -196,6 +204,8 @@
|
|||
13E501E71D07A6C9005F35D8 /* RCTValueAnimatedNode.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTValueAnimatedNode.m; sourceTree = "<group>"; };
|
||||
193F64F21D776EC6004D1CAA /* RCTDiffClampAnimatedNode.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; lineEnding = 0; path = RCTDiffClampAnimatedNode.h; sourceTree = "<group>"; xcLanguageSpecificationIdentifier = xcode.lang.objcpp; };
|
||||
193F64F31D776EC6004D1CAA /* RCTDiffClampAnimatedNode.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTDiffClampAnimatedNode.m; sourceTree = "<group>"; };
|
||||
194804EB1E975D8E00623005 /* RCTDecayAnimation.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTDecayAnimation.h; sourceTree = "<group>"; };
|
||||
194804EC1E975D8E00623005 /* RCTDecayAnimation.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTDecayAnimation.m; sourceTree = "<group>"; };
|
||||
19F00F201DC8847500113FEE /* RCTEventAnimation.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; lineEnding = 0; path = RCTEventAnimation.h; sourceTree = "<group>"; xcLanguageSpecificationIdentifier = xcode.lang.objcpp; };
|
||||
19F00F211DC8847500113FEE /* RCTEventAnimation.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTEventAnimation.m; sourceTree = "<group>"; };
|
||||
2D2A28201D9B03D100D4039D /* libRCTAnimation.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRCTAnimation.a; sourceTree = BUILT_PRODUCTS_DIR; };
|
||||
|
|
@ -270,6 +280,8 @@
|
|||
isa = PBXGroup;
|
||||
children = (
|
||||
94C1294A1D4069170025F25C /* RCTAnimationDriver.h */,
|
||||
194804EB1E975D8E00623005 /* RCTDecayAnimation.h */,
|
||||
194804EC1E975D8E00623005 /* RCTDecayAnimation.m */,
|
||||
19F00F201DC8847500113FEE /* RCTEventAnimation.h */,
|
||||
19F00F211DC8847500113FEE /* RCTEventAnimation.m */,
|
||||
94C1294C1D4069170025F25C /* RCTFrameAnimation.h */,
|
||||
|
|
@ -287,6 +299,7 @@
|
|||
isa = PBXHeadersBuildPhase;
|
||||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
194804F01E975DCF00623005 /* RCTDecayAnimation.h in Headers */,
|
||||
192F69811E823F4A008692C7 /* RCTAnimationUtils.h in Headers */,
|
||||
192F69821E823F4A008692C7 /* RCTNativeAnimatedModule.h in Headers */,
|
||||
192F69831E823F4A008692C7 /* RCTNativeAnimatedNodesManager.h in Headers */,
|
||||
|
|
@ -317,6 +330,7 @@
|
|||
1980B7121E80D1C4004DC789 /* RCTNativeAnimatedNodesManager.h in Headers */,
|
||||
1980B7141E80D1C4004DC789 /* RCTAnimationDriver.h in Headers */,
|
||||
1980B7151E80D1C4004DC789 /* RCTEventAnimation.h in Headers */,
|
||||
194804ED1E975D8E00623005 /* RCTDecayAnimation.h in Headers */,
|
||||
1980B7171E80D1C4004DC789 /* RCTFrameAnimation.h in Headers */,
|
||||
1980B7191E80D1C4004DC789 /* RCTSpringAnimation.h in Headers */,
|
||||
1980B71B1E80D1C4004DC789 /* RCTDivisionAnimatedNode.h in Headers */,
|
||||
|
|
@ -428,6 +442,7 @@
|
|||
944244D01DB962DA0032A02B /* RCTFrameAnimation.m in Sources */,
|
||||
944244D11DB962DC0032A02B /* RCTSpringAnimation.m in Sources */,
|
||||
9476E8EC1DC9232D005D5CD1 /* RCTNativeAnimatedNodesManager.m in Sources */,
|
||||
194804F21E977DDB00623005 /* RCTDecayAnimation.m in Sources */,
|
||||
);
|
||||
runOnlyForDeploymentPostprocessing = 0;
|
||||
};
|
||||
|
|
@ -452,6 +467,7 @@
|
|||
13E501E81D07A6C9005F35D8 /* RCTAdditionAnimatedNode.m in Sources */,
|
||||
5C9894951D999639008027DB /* RCTDivisionAnimatedNode.m in Sources */,
|
||||
13E501EF1D07A6C9005F35D8 /* RCTTransformAnimatedNode.m in Sources */,
|
||||
194804EE1E975D8E00623005 /* RCTDecayAnimation.m in Sources */,
|
||||
);
|
||||
runOnlyForDeploymentPostprocessing = 0;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
#import "RCTDivisionAnimatedNode.h"
|
||||
#import "RCTEventAnimation.h"
|
||||
#import "RCTFrameAnimation.h"
|
||||
#import "RCTDecayAnimation.h"
|
||||
#import "RCTInterpolationAnimatedNode.h"
|
||||
#import "RCTModuloAnimatedNode.h"
|
||||
#import "RCTMultiplicationAnimatedNode.h"
|
||||
|
|
@ -221,6 +222,11 @@
|
|||
forNode:valueNode
|
||||
callBack:callBack];
|
||||
|
||||
} else if ([type isEqual:@"decay"]) {
|
||||
animationDriver = [[RCTDecayAnimation alloc] initWithId:animationId
|
||||
config:config
|
||||
forNode:valueNode
|
||||
callBack:callBack];
|
||||
} else {
|
||||
RCTLogError(@"Unsupported animation type: %@", config[@"type"]);
|
||||
return;
|
||||
|
|
|
|||
Loading…
Reference in New Issue