Skip to content

Commit

Permalink
fix(⬆️): Redash for rc.0 (#405)
Browse files Browse the repository at this point in the history 
Breaking Change:
The color API has been removed in favor of the functions shipped by reanimated 2.
The Animation API has breaking changes
  • Loading branch information
@wcandillon
wcandillon authored Dec 11, 2020
1 parent c26ad68 commit d823327
Show file tree
Hide file tree
Showing 7 changed files with 63 additions and 263 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"react": "*",
"react-native": "*",
"react-native-gesture-handler": "*",
"react-native-reanimated": "*"
"react-native-reanimated": ">=2.0.0-rc.0"
},
"devDependencies": {
"@react-native-community/bob": "^0.4.1",
Expand All @@ -42,7 +42,7 @@
"react": "^16.8.6",
"react-native": "^0.61.0",
"react-native-gesture-handler": "~1.5.0",
"react-native-reanimated": "2.0.0-alpha.6",
"react-native-reanimated": "2.0.0-rc.0",
"semantic-release": "^15.13.3",
"semantic-release-cli": "^4.1.2",
"typescript": "4.0.3"
Expand Down
28 changes: 14 additions & 14 deletions src/Animations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ export type Animation<
State extends AnimationState = AnimationState,
PrevState = State
> = {
animation: (animation: State, now: number) => boolean;
start: (
onFrame: (animation: State, now: number) => boolean;
onStart: (
animation: State,
value: number,
now: number,
Expand Down Expand Up @@ -94,31 +94,31 @@ export const withPause = (
return defineAnimation<PausableAnimation>(() => {
"worklet";
const nextAnimation = animationParameter(animationParam);
const animation = (state: PausableAnimation, now: number) => {
const onFrame = (state: PausableAnimation, now: number) => {
const { lastTimestamp, elapsed } = state;
if (paused.value) {
state.elapsed = now - lastTimestamp;
return false;
}
const dt = now - elapsed;
const finished = nextAnimation.animation(nextAnimation, dt);
const finished = nextAnimation.onFrame(nextAnimation, dt);
state.current = nextAnimation.current;
state.lastTimestamp = dt;
return finished;
};
const start = (
const onStart = (
state: PausableAnimation,
value: number,
now: number,
previousState: AnimationState
) => {
state.lastTimestamp = now;
state.elapsed = 0;
nextAnimation.start(nextAnimation, value, now, previousState);
nextAnimation.onStart(nextAnimation, value, now, previousState);
};
return {
animation,
start,
onFrame,
onStart,
};
});
};
Expand All @@ -139,8 +139,8 @@ export const withBouncing = (
return defineAnimation<PhysicsAnimationState, PhysicsAnimationState>(() => {
"worklet";
const nextAnimation = animationParameter(animationParam);
const animation = (state: PhysicsAnimationState, now: number) => {
const finished = nextAnimation.animation(nextAnimation, now);
const onFrame = (state: PhysicsAnimationState, now: number) => {
const finished = nextAnimation.onFrame(nextAnimation, now);
const { velocity, current } = nextAnimation;
state.current = current;
if (
Expand All @@ -152,17 +152,17 @@ export const withBouncing = (
}
return finished;
};
const start = (
const onStart = (
_state: PhysicsAnimationState,
value: number,
now: number,
previousState: PhysicsAnimationState
) => {
nextAnimation.start(nextAnimation, value, now, previousState);
nextAnimation.onStart(nextAnimation, value, now, previousState);
};
return {
animation,
start,
onFrame,
onStart,
};
});
};
232 changes: 2 additions & 230 deletions src/Colors.ts
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,4 @@
import {
interpolate,
Extrapolate,
processColor,
} from "react-native-reanimated";

import { clamp, mix } from "./Math";

/**
* @summary TypeScript type to define an animation value as color.
* @example
// Color can be of string or number depending of the context in which it was executed
const color: Animated.SharedValue<Color> = useDerivedValue(() => mixColor(progress.value, "blue", "red"));
*/
export enum ColorSpace {
RGB,
HSV,
}

const fract = (v: number) => {
"worklet";
return v - Math.floor(v);
};

export const opacity = (c: number) => {
"worklet";
return ((c >> 24) & 255) / 255;
};

export const red = (c: number) => {
"worklet";
return (c >> 16) & 255;
};

export const green = (c: number) => {
"worklet";
return (c >> 8) & 255;
};

export const blue = (c: number) => {
"worklet";
return c & 255;
};

export const color = (r: number, g: number, b: number, alpha = 1): string => {
"worklet";
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};

/**
* @summary Convert HSV to RGB
*/
export const hsv2rgb = (h: number, s: number, v: number) => {
"worklet";
// vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
const K = {
x: 1,
y: 2 / 3,
z: 1 / 3,
w: 3,
};
// vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
const p = {
x: Math.abs(fract(h + K.x) * 6 - K.w),
y: Math.abs(fract(h + K.y) * 6 - K.w),
z: Math.abs(fract(h + K.z) * 6 - K.w),
};
// return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
const rgb = {
x: v * mix(s, K.x, clamp(p.x - K.x, 0, 1)),
y: v * mix(s, K.x, clamp(p.y - K.x, 0, 1)),
z: v * mix(s, K.x, clamp(p.z - K.x, 0, 1)),
};
return {
r: Math.round(rgb.x * 255),
g: Math.round(rgb.y * 255),
b: Math.round(rgb.z * 255),
};
};

/**
* @summary Convert HSV to RGB
*/
export const hsv2color = (h: number, s: number, v: number) => {
"worklet";
const { r, g, b } = hsv2rgb(h, s, v);
return color(r, g, b);
};
import { interpolateColor } from "react-native-reanimated";

/**
* @summary Returns black or white depending on the value of the background color.
Expand All @@ -96,152 +9,11 @@ export const colorForBackground = (r: number, g: number, b: number) => {
return L > 186 ? 0x000000ff : 0xffffffff;
};

/**
* @summary Convert RGB to HSV
*/
const rgbToHsv = (c: number) => {
"worklet";
const r = red(c) / 255;
const g = green(c) / 255;
const b = blue(c) / 255;

const ma = Math.max(r, g, b);
const mi = Math.min(r, g, b);
let h = 0;
const v = ma;

const d = ma - mi;
const s = ma === 0 ? 0 : d / ma;
if (ma === mi) {
h = 0; // achromatic
} else {
switch (ma) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
default: // do nothing
}
h /= 6;
}
return { h, s, v };
};

const interpolateColorsHSV = (
value: number,
inputRange: number[],
colors: number[]
) => {
"worklet";
const colorsAsHSV = colors.map((c) => rgbToHsv(c));
const h = interpolate(
value,
inputRange,
colorsAsHSV.map((c) => c.h),
Extrapolate.CLAMP
);
const s = interpolate(
value,
inputRange,
colorsAsHSV.map((c) => c.s),
Extrapolate.CLAMP
);
const v = interpolate(
value,
inputRange,
colorsAsHSV.map((c) => c.v),
Extrapolate.CLAMP
);
return hsv2color(h, s, v);
};

const interpolateColorsRGB = (
value: number,
inputRange: number[],
colors: number[]
) => {
"worklet";
const r = Math.round(
interpolate(
value,
inputRange,
colors.map((c) => red(c)),
Extrapolate.CLAMP
)
);
const g = Math.round(
interpolate(
value,
inputRange,
colors.map((c) => green(c)),
Extrapolate.CLAMP
)
);
const b = Math.round(
interpolate(
value,
inputRange,
colors.map((c) => blue(c)),
Extrapolate.CLAMP
)
);
const a = interpolate(
value,
inputRange,
colors.map((c) => opacity(c)),
Extrapolate.CLAMP
);
return color(r, g, b, a);
};

/**
* @summary Interpolate an animation value into a color.
The color can be interpolated in the RGB or HSV color space (default is RGB).
* @example
const theta = useSharedValue(Math.PI);
const backgroundColor = useDerivedValue(() => {
return interpolateColor(
theta.value,
[0, Math.PI, Math.PI * 2],
["#ff3884", StyleGuide.palette.primary, "#38ffb3"]
ColorSpace.HSV // default is RGB
);
});
*/
export const interpolateColor = (
value: number,
inputRange: number[],
rawOutputRange: string[],
colorSpace: ColorSpace = ColorSpace.RGB
) => {
"worklet";
const outputRange = rawOutputRange.map((c) =>
typeof c === "number" ? c : processColor(c)
);
if (colorSpace === ColorSpace.HSV) {
return interpolateColorsHSV(value, inputRange, outputRange);
}
const result = interpolateColorsRGB(value, inputRange, outputRange);
return result;
};

/**
* @summary Identical to interpolateColor() but with an animation value that goes from 0 to 1.
* @example
const backgroundColor = useDerivedValue(() =>
mixColor(progress.value, "#ff3884", "#38ffb3")
);
*/
export const mixColor = (
value: number,
color1: string,
color2: string,
colorSpace: ColorSpace = ColorSpace.RGB
colorSpace: "RGB" | "HSV" = "RGB"
) => {
"worklet";
return interpolateColor(value, [0, 1], [color1, color2], colorSpace);
Expand Down
11 changes: 8 additions & 3 deletions src/ReText.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
import * as React from "react";
import { TextStyle, TextProps as RNTextProps, StyleSheet } from "react-native";
import React from "react";
import {
TextStyle,
TextProps as RNTextProps,
StyleSheet,
TextInput,
} from "react-native";
import Animated, { useAnimatedProps } from "react-native-reanimated";
import { TextInput } from "react-native-gesture-handler";

const styles = StyleSheet.create({
baseStyle: {
color: "black",
},
});
Animated.addWhitelistedNativeProps({ text: true });

interface TextProps {
text: Animated.SharedValue<string>;
Expand Down
1 change: 0 additions & 1 deletion src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ export * from "./Coordinates";
export * from "./Transitions";
export * from "./Math";
export * from "./Vectors";
export * from "./Colors";
export * from "./Paths";
export * from "./Physics";
export * from "./Array";
Expand Down
Loading

0 comments on commit d823327

Please sign in to comment.