kylefang/react-native-reanimated
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-reanimated.git synced 2026-04-29 04:45:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

Interpolate method, input validation, linting, refactoring. (#17)

Browse Source 
Interpolate validations are taken from `Animated`.
This commit is contained in:
Dylan Vann
2018-06-07 14:24:48 -04:00
committed by Krzysztof Magiera
parent 401227f8f1
commit ad8b0cf534
23 changed files with 929 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
Example/src/interpolate/AnimatedBounds.js
View File

@@ -12,7 +12,6 @@ const {
eq,
and,
add,
call,
multiply,
lessThan,
startClock,
@@ -20,13 +19,12 @@ const {
clockRunning,
block,
timing,
debug,
spring,
Value,
Clock,
event,
interpolate,
defined,
Extrapolate,
} = Animated;
function runSpring(clock, value, velocity, dest) {
@@ -60,41 +58,6 @@ function runSpring(clock, value, velocity, dest) {
];
}
function runTiming(clock, value, dest) {
const state = {
finished: new Value(1),
position: new Value(value),
time: new Value(0),
frameTime: new Value(0),
};
const config = {
duration: 500,
toValue: new Value(0),
easing: Easing.inOut(Easing.ease),
};
const reset = [
set(state.finished, 0),
set(state.time, 0),
set(state.frameTime, 0),
];
return block([
cond(and(state.finished, eq(state.position, value)), [
...reset,
set(config.toValue, dest),
]),
cond(and(state.finished, eq(state.position, dest)), [
...reset,
set(config.toValue, value),
]),
cond(clockRunning(clock), 0, startClock(clock)),
timing(clock, state, config),
state.position,
]);
}
const getAnimation = (min, max) => {
const clock = new Clock();
const state = {
@@ -173,7 +136,7 @@ export default class AnimatedBounds extends Component {
this._transX = interpolate(this._transX, {
inputRange: [-100, 100],
outputRange: [-100, 100],
extrapolate: 'clamp',
extrapolate: Extrapolate.CLAMP,
});
const min = getAnimation(-100, -50);
@@ -181,7 +144,7 @@ export default class AnimatedBounds extends Component {
this._transXA = interpolate(this._transX, {
inputRange: [-100, 100],
outputRange: [min, max],
extrapolate: 'clamp',
extrapolate: Extrapolate.CLAMP,
});
this.min = min;
this.max = max;

9
Example/src/interpolate/Basic.js
View File

@@ -1,5 +1,4 @@
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, { Easing } from 'react-native-reanimated';
import Box from '../Box';
import Row from '../Row';
@@ -9,20 +8,12 @@ const {
cond,
eq,
and,
add,
call,
multiply,
lessThan,
startClock,
stopClock,
clockRunning,
block,
timing,
debug,
spring,
Value,
Clock,
event,
interpolate,
} = Animated;

41
Example/src/interpolate/WithDrag.js
View File

@@ -10,18 +10,12 @@ const {
cond,
sub,
eq,
and,
add,
call,
multiply,
lessThan,
startClock,
stopClock,
clockRunning,
block,
timing,
debug,
spring,
Value,
Clock,
event,
@@ -60,41 +54,6 @@ function runSpring(clock, value, velocity, dest) {
];
}
function runTiming(clock, value, dest) {
const state = {
finished: new Value(1),
position: new Value(value),
time: new Value(0),
frameTime: new Value(0),
};
const config = {
duration: 500,
toValue: new Value(0),
easing: Easing.inOut(Easing.ease),
};
const reset = [
set(state.finished, 0),
set(state.time, 0),
set(state.frameTime, 0),
];
return block([
cond(and(state.finished, eq(state.position, value)), [
...reset,
set(config.toValue, dest),
]),
cond(and(state.finished, eq(state.position, dest)), [
...reset,
set(config.toValue, value),
]),
cond(clockRunning(clock), 0, startClock(clock)),
timing(clock, state, config),
state.position,
]);
}
export default class WithDrag extends Component {
constructor(props) {
super(props);