Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[NativeAnimated] Support the Slow Animations option of the iOS simulator #21157

Closed
wants to merge 1 commit into from
Closed

[NativeAnimated] Support the Slow Animations option of the iOS simulator #21157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion Libraries/NativeAnimation/Drivers/RCTDecayAnimation.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
#import <UIKit/UIKit.h>
#import <React/RCTConvert.h>

#import "RCTAnimationUtils.h"
#import "RCTValueAnimatedNode.h"

@interface RCTDecayAnimation ()
Expand Down Expand Up @@ -100,7 +101,7 @@ - (void)stepAnimationWithTime:(NSTimeInterval)currentTime

CGFloat value = _fromValue +
(_velocity / (1 - _deceleration)) *
(1 - exp(-(1 - _deceleration) * (currentTime - _frameStartTime) * 1000.0));
(1 - exp(-(1 - _deceleration) * (currentTime - _frameStartTime) * 1000.0 / RCTAnimationDragCoefficient()));

[self updateValue:value];

Expand Down
2 changes: 1 addition & 1 deletion Libraries/NativeAnimation/Drivers/RCTFrameAnimation.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ - (void)stepAnimationWithTime:(NSTimeInterval)currentTime
}

_animationCurrentTime = currentTime;
NSTimeInterval currentDuration = _animationCurrentTime - _animationStartTime;
NSTimeInterval currentDuration = (_animationCurrentTime - _animationStartTime) / RCTAnimationDragCoefficient();

// Determine how many frames have passed since last update.
// Get index of frames that surround the current interval
Expand Down
25 changes: 13 additions & 12 deletions Libraries/NativeAnimation/Drivers/RCTSpringAnimation.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
#import <React/RCTConvert.h>
#import <React/RCTDefines.h>

#import "RCTAnimationUtils.h"
#import "RCTValueAnimatedNode.h"

@interface RCTSpringAnimation ()
Expand Down Expand Up @@ -45,7 +46,7 @@ @implementation RCTSpringAnimation

NSInteger _iterations;
NSInteger _currentLoop;

NSTimeInterval _t; // Current time (startTime + dt)
}

Expand Down Expand Up @@ -110,7 +111,7 @@ - (void)stepAnimationWithTime:(NSTimeInterval)currentTime
// Animation has not begun or animation has already finished.
return;
}

// calculate delta time
NSTimeInterval deltaTime;
if(_animationStartTime == -1) {
Expand All @@ -120,22 +121,22 @@ - (void)stepAnimationWithTime:(NSTimeInterval)currentTime
} else {
// Handle frame drops, and only advance dt by a max of MAX_DELTA_TIME
deltaTime = MIN(MAX_DELTA_TIME, currentTime - _animationCurrentTime);
_t = _t + deltaTime;
_t = _t + deltaTime / RCTAnimationDragCoefficient();
}

// store the timestamp
_animationCurrentTime = currentTime;

CGFloat c = _damping;
CGFloat m = _mass;
CGFloat k = _stiffness;
CGFloat v0 = -_initialVelocity;

CGFloat zeta = c / (2 * sqrtf(k * m));
CGFloat omega0 = sqrtf(k / m);
CGFloat omega1 = omega0 * sqrtf(1.0 - (zeta * zeta));
CGFloat x0 = _toValue - _fromValue;

CGFloat position;
CGFloat velocity;
if (zeta < 1) {
Expand Down Expand Up @@ -163,12 +164,12 @@ - (void)stepAnimationWithTime:(NSTimeInterval)currentTime
velocity =
envelope * (v0 * (_t * omega0 - 1) + _t * x0 * (omega0 * omega0));
}

_lastPosition = position;
_lastVelocity = velocity;

[self onUpdate:position];

// Conditions for stopping the spring animation
BOOL isOvershooting = NO;
if (_overshootClamping && _stiffness != 0) {
Expand All @@ -183,7 +184,7 @@ - (void)stepAnimationWithTime:(NSTimeInterval)currentTime
if (_stiffness != 0) {
isDisplacement = ABS(_toValue - position) <= _restDisplacementThreshold;
}

if (isOvershooting || (isVelocity && isDisplacement)) {
if (_stiffness != 0) {
// Ensure that we end up with a round value
Expand All @@ -192,7 +193,7 @@ - (void)stepAnimationWithTime:(NSTimeInterval)currentTime
}
[self onUpdate:_toValue];
}

if (_iterations == -1 || _currentLoop < _iterations) {
_lastPosition = _fromValue;
_lastVelocity = _initialVelocity;
Expand Down
6 changes: 6 additions & 0 deletions Libraries/NativeAnimation/RCTAnimationUtils.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,9 @@ RCT_EXTERN CGFloat RCTInterpolateValue(CGFloat value,

RCT_EXTERN CGFloat RCTRadiansToDegrees(CGFloat radians);
RCT_EXTERN CGFloat RCTDegreesToRadians(CGFloat degrees);

/**
* Coefficient to slow down animations, respects the ios
* simulator `Slow Animations (⌘T)` option.
*/
RCT_EXTERN CGFloat RCTAnimationDragCoefficient(void);
14 changes: 14 additions & 0 deletions Libraries/NativeAnimation/RCTAnimationUtils.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,3 +93,17 @@ CGFloat RCTDegreesToRadians(CGFloat degrees)
{
return degrees / 180.0 * M_PI;
}

#if TARGET_IPHONE_SIMULATOR
// Based on https://stackoverflow.com/a/13307674
float UIAnimationDragCoefficient(void);
#endif

CGFloat RCTAnimationDragCoefficient()
{
#if TARGET_IPHONE_SIMULATOR
return (CGFloat)UIAnimationDragCoefficient();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on this POP code, maybe we need to guard against 0 for some reason?

/~https://github.com/facebook/pop/blob/master/pop/POPAnimationExtras.mm#L37

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nope. For some reason the value is 10 when testing...I'll fix it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh that's strange. Thanks for investigating this!

#else
return 1.0;
#endif
}