Permalink
Browse files

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 #13368

Differential Revision: D4938061

Pulled By: javache

fbshipit-source-id: 36b57b1029a542e9daf21e048a06d3b3347e9659
  • Loading branch information...
janicduplessis authored and facebook-github-bot committed Apr 24, 2017
1 parent f1d5fdd commit 6c434f9404314dae9b5e527746e1e191b35ca2d8
@@ -288,6 +288,99 @@ - (void)testSpringAnimation
[_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 @@ - (void)stepAnimationWithTime:(NSTimeInterval)currentTime
// 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 @@ - (void)stepAnimationWithTime:(NSTimeInterval)currentTime
// 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 @@ - (void)startAnimatingNode:(nonnull NSNumber *)animationId
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;

1 comment on commit 6c434f9

@scarlac

This comment has been minimized.

Show comment
Hide comment
@scarlac

scarlac Jun 2, 2017

Contributor

Great work, @janicduplessis !

Contributor

scarlac commented on 6c434f9 Jun 2, 2017

Great work, @janicduplessis !

Please sign in to comment.