Skip to content

Commit

Permalink
Native Animated - Fix timing animation delay on iOS
Browse files Browse the repository at this point in the history
Summary:
Delay was broken with native animations on iOS. After checking what android does to handle delay, I noticed it does nothing at all since the delay is already handled when generating the animation frames. This removes all code that tried to handle delay on iOS since it is not needed and breaks it. Also updated an example to have delay in UI explorer.

Fixes facebook#12388

**Test plan**
Tested that delay works in UIExplorer on iOS and Android.
Closes facebook#12443

Differential Revision: D4582514

Pulled By: javache

fbshipit-source-id: dc53295e716c8476c71ccd578380962f056de2be
  • Loading branch information
janicduplessis authored and thotegowda committed May 7, 2017
1 parent ddc81e0 commit 7b1b2c5
Show file tree
Hide file tree
Showing 4 changed files with 6 additions and 17 deletions.
4 changes: 2 additions & 2 deletions Examples/UIExplorer/js/NativeAnimationsExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -352,12 +352,12 @@ exports.examples = [
},
},
{
title: 'Opacity without interpolation',
title: 'Opacity with delay',
render: function() {
return (
<Tester
type="timing"
config={{ duration: 1000 }}>
config={{ duration: 1000, delay: 1000 }}>
{anim => (
<Animated.View
style={[
Expand Down
1 change: 0 additions & 1 deletion Libraries/Animated/src/AnimatedImplementation.js
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,6 @@ class TimingAnimation extends Animation {
type: 'frames',
frames,
toValue: this._toValue,
delay: this._delay,
iterations: this.__iterations,
};
}
Expand Down
8 changes: 4 additions & 4 deletions Libraries/Animated/src/__tests__/AnimatedNative-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function createAndMountComponent(ComponentClass, props) {

describe('Native Animated', () => {

let nativeAnimatedModule = require('NativeModules').NativeAnimatedModule;
const nativeAnimatedModule = require('NativeModules').NativeAnimatedModule;

beforeEach(() => {
nativeAnimatedModule.addAnimatedEventToView = jest.fn();
Expand Down Expand Up @@ -276,7 +276,7 @@ describe('Native Animated', () => {
expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
jasmine.any(Number),
jasmine.any(Number),
{type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number), delay: jasmine.any(Number), iterations: 1},
{type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number), iterations: 1},
jasmine.any(Function)
);

Expand Down Expand Up @@ -587,7 +587,7 @@ describe('Native Animated', () => {
expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
jasmine.any(Number),
jasmine.any(Number),
{type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number), delay: jasmine.any(Number), iterations: 1},
{type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number), iterations: 1},
jasmine.any(Function)
);
});
Expand Down Expand Up @@ -666,7 +666,7 @@ describe('Native Animated', () => {
expect(nativeAnimatedModule.startAnimatingNode).toBeCalledWith(
jasmine.any(Number),
jasmine.any(Number),
{type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number), delay: jasmine.any(Number), iterations: 1},
{type: 'frames', frames: jasmine.any(Array), toValue: jasmine.any(Number), iterations: 1},
jasmine.any(Function)
);
const animationId = nativeAnimatedModule.startAnimatingNode.mock.calls[0][0];
Expand Down
10 changes: 0 additions & 10 deletions Libraries/NativeAnimation/Drivers/RCTFrameAnimation.m
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ @implementation RCTFrameAnimation
NSArray<NSNumber *> *_frames;
CGFloat _toValue;
CGFloat _fromValue;
NSTimeInterval _delay;
NSTimeInterval _animationStartTime;
NSTimeInterval _animationCurrentTime;
RCTResponseSenderBlock _callback;
Expand All @@ -46,14 +45,12 @@ - (instancetype)initWithId:(NSNumber *)animationId
{
if ((self = [super init])) {
NSNumber *toValue = [RCTConvert NSNumber:config[@"toValue"]] ?: @1;
NSTimeInterval delay = [RCTConvert double:config[@"delay"]];
NSArray<NSNumber *> *frames = [RCTConvert NSNumberArray:config[@"frames"]];

_animationId = animationId;
_toValue = toValue.floatValue;
_fromValue = valueNode.value;
_valueNode = valueNode;
_delay = delay;
_frames = [frames copy];
_callback = [callback copy];
}
Expand Down Expand Up @@ -93,16 +90,9 @@ - (void)stepAnimation
}

NSTimeInterval currentTime = CACurrentMediaTime();
NSTimeInterval stepInterval = currentTime - _animationCurrentTime;
_animationCurrentTime = currentTime;
NSTimeInterval currentDuration = _animationCurrentTime - _animationStartTime;

if (_delay > 0) {
// Decrement delay
_delay -= stepInterval;
return;
}

// 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);
Expand Down

0 comments on commit 7b1b2c5

Please sign in to comment.