reanimated.macro
v0.0.0-semantically-released
Published
Pre-evaluate code at build-time
Downloads
6
Maintainers
Readme
reanimated.macro
React-native-reanimated achieves excellent performance by allowing developers to describe operations on animated value as a data structure. Unfortunately expressing your code as a data structure structure can be awkward. This approach requires you to use special functions for control flow, assignment, and mathematical operations rather than using idiomatic JavaScript syntax. As an example, consider the code below:
const getAnimation = (min, max) => {
const clock = new Clock()
const state = {
finished: new Value(1),
position: new Value(min),
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, min)), [
...reset,
set(config.toValue, max),
]),
cond(and(state.finished, eq(state.position, max)), [
...reset,
set(config.toValue, min),
]),
cond(clockRunning(clock), 0, startClock(clock)),
timing(clock, state, config),
state.position,
])
}
Using the reanimated macro, the code above can be rewritten this way:
import {exec, animate} from 'reanimated.macro';
const getAnimation = (min, max) => {
const clock = new Clock();
const state = {
finished: new Value(1),
position: new Value(min),
time: new Value(0),
frameTime: new Value(0),
};
const config = {
duration: 500,
toValue: new Value(0),
easing: Easing.inOut(Easing.ease),
};
const reset = define() => {
state.finished = 0;
state.time = 0;
state.frameTime = 0;
});
return define(() => {
if(state.finished && state.position === min) {
exec(reset);
config.toValue = max;
}
else if(state.finished && state.position === max) {
exec(reset);
config.toValue = min;
}
if(!clockRunning(clock)) {
startClock(clock);
}
timing(clock, state, config);
return state.position,
});
};