Question

我试图制造一顿树脂(当压力时,会小得多)。缩略语页: 1

这是我迄今为止的法典:

import React, { useState } from  react ;
import { View } from  react-native ;
import Animated, { Easing, Extrapolate } from  react-native-reanimated ;
import { TouchableWithoutFeedback } from  react-native-gesture-handler ;

const { interpolate, sub } = Animated;

const TouchableResize = (props) => {
  const { onPress, children } = props;
  const [scale, setScale] = useState(0);
  const scaling = interpolate(scale, {
    inputRange: [0, 1],
    outputRange: [1, 0.90],
    extrapolate: Extrapolate.CLAMP
  });
  return (
    <TouchableWithoutFeedback onPressIn={() => setScale(1)} onPressOut={() => setScale(0)}>
      <Animated.View style={{ transform: [{ scaleX: scaling }, { scaleY: scaling }] }}>
        {children}
      </Animated.View>
    </TouchableWithoutFeedback>
  );
};

export { TouchableResize };

该法典有一部分工作。纽特州在压力下转至0.90,但im灭不平。它直飞到0.90,当它释放时, but子直接 s退。

How can I update my code so the animation runs smoothly? Please note I m a complete beginner in react-native-reanimated.

Answer 1

页: 1 数值随时间推移。 http://docs.swmansion.com/react-native-reanimated/docs/1.x.x/declarative”rel=“nofollow noreferer”>docs 。此外,我还创建了 expo snack example 。一、导言

import React, { useState, useMemo } from  react ;
import { View } from  react-native ;
import Animated, { Easing, Extrapolate } from  react-native-reanimated ;
import { TouchableWithoutFeedback } from  react-native-gesture-handler ;

const {
  Clock,
   Value,
   set,
   cond,
   startClock,
   clockRunning,
   timing,
   debug,
   stopClock,
   block,
   interpolate,
   useCode,
} = Animated;
    
function runTiming(clock, from, to) {
  const state = {
    finished: new Value(0),
    position: new Value(from),
    time: new Value(0),
    frameTime: new Value(0),
  };
    
  const config = {
    duration: 100,
    toValue: new Value(to),
    easing: Easing.inOut(Easing.ease),
  };
    
  return block([
    cond(
      clockRunning(clock),
      [],
      startClock(clock),
    ),
    // we run the step here that is going to update position
    timing(clock, state, config),
    // if the animation is over we stop the clock
    cond(state.finished, debug( stop clock , stopClock(clock))),
    // we made the block return the updated position
    state.position,
  ]);
}

const TouchableResize = (props) => {
  const { onPress, children } = props;
  const [pressed, setPressed] = useState(false);
  const {clock, scale} = useMemo(() => ({
    clock: new Clock(),
    scale: new Value(1), 
  }), [])

  useCode(
    () => block([
      pressed ? set(scale, runTiming(clock, 0, 1)) : set(scale, runTiming(clock, 1, 0))
    ]), [pressed]
  );

  const scaling = interpolate(scale, {
    inputRange: [0, 1],
    outputRange: [1, 0.90],
    extrapolate: Extrapolate.CLAMP
  });
  return (
    <TouchableWithoutFeedback onPressIn={() => setPressed(true)} onPressOut={() => setPressed(false)}>
      <Animated.View style={{ transform: [{ scaleX: scaling }, { scaleY: scaling }] }}>
        {children}
      </Animated.View>
    </TouchableWithoutFeedback>
  );
};
    
export { TouchableResize };

友情链接