kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-30 22:12:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adds Animated.loop to Animated API

Browse Source 
Summary:
* Any animation can be looped on the javascript thread
* Only basic animations supported natively at this stage, loops run
using the native driver cannot contain animations of type sequence,
parallel, stagger, or loop

Motivation: We need a spinner in our app that is displayed and animated while the javascript thread is tied up with other tasks. This means it needs to be offloaded from the javascript thread, so that it will continue to run while those tasks are churning away.

I originally submitted PR #9513, which has served our needs, but brentvatne pointed out a better way to do it. Had hoped his suggestion would be implemented by janicduplessis or another fb employee, but after 5 months I thought I'd give it another push.

I've put together an implementation that basically matches the suggested API. Let me know what you think, and whether others can pick it up from here and get it in to core.

Personal Motivation: I am leaving my current organisation on Feb 10th, so am trying to clean thing
Closes https://github.com/facebook/react-native/pull/11973

Differential Revision: D4704381

fbshipit-source-id: 42a2cdf5d53a7c0d08f86a58485f7f38739e6cd9
This commit is contained in:
Edwin
2017-03-13 23:49:47 -07:00
committed by Facebook Github Bot
parent 22e03a09b1
commit 8a7eb170dd
6 changed files with 603 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ReactAndroid/src/main/java/com/facebook/react/animated/DecayAnimation.java
View File

@@ -21,12 +21,17 @@ public class DecayAnimation extends AnimationDriver {
private final double mDeceleration;
private long mStartFrameTimeMillis = -1;
private double mFromValue;
private double mLastValue;
private double mFromValue = 0d;
private double mLastValue = 0d;
private int mIterations;
private int mCurrentLoop;
public DecayAnimation(ReadableMap config) {
mVelocity = config.getDouble("velocity");
mDeceleration = config.getDouble("deceleration");
mIterations = config.hasKey("iterations") ? config.getInt("iterations") : 1;
mCurrentLoop = 1;
mHasFinished = mIterations == 0;
}
@Override
@@ -35,7 +40,11 @@ public class DecayAnimation extends AnimationDriver {
if (mStartFrameTimeMillis == -1) {
// since this is the first animation step, consider the start to be on the previous frame
mStartFrameTimeMillis = frameTimeMillis - 16;
mFromValue = mAnimatedValue.mValue;
if (mFromValue == mLastValue) { // first iteration, assign mFromValue based on mAnimatedValue
mFromValue = mAnimatedValue.mValue;
} else { // not the first iteration, reset mAnimatedValue based on mFromValue
mAnimatedValue.mValue = mFromValue;
}
mLastValue = mAnimatedValue.mValue;
}
@@ -44,8 +53,15 @@ public class DecayAnimation extends AnimationDriver {
(1 - Math.exp(-(1 - mDeceleration) * (frameTimeMillis - mStartFrameTimeMillis)));
if (Math.abs(mLastValue - value) < 0.1) {
mHasFinished = true;
return;
if (mIterations == -1 || mCurrentLoop < mIterations) { // looping animation, return to start
// set mStartFrameTimeMillis to -1 to reset instance variables on the next runAnimationStep
mStartFrameTimeMillis = -1;
mCurrentLoop++;
} else { // animation has completed
mHasFinished = true;
return;
}
}
mLastValue = value;