2

Reanimated 的每个文档都在使用类组件设置为 Opacity.setvalue(0) 它可以工作，但我需要设置为以便将时钟用于其他动画，请提供任何帮助。

import React, { useState } from "react";
import { View, Text, StyleSheet, Image, Dimensions } from "react-native";
import Animated, { Easing } from "react-native-reanimated";
import { TapGestureHandler, State } from "react-native-gesture-handler";

function MusicApp() {
  const {
    Value,
    Clock,
    startClock,
    stopClock,
    debug,
    timing,
    clockRunning,
    block,
    cond,
    set,
    eq
  } = Animated;


  const { width, height } = Dimensions.get("window");
  const [buttonOpacity, setbuttonOpacity] = useState(1);

 const Opacity = new Value(1);   



  function onStateChange() {
    Animated.event([
      {
        nativeEvent: ({state}) =>
          Animated.block([cond(eq(state, State.END),set(Opacity,0) )
          ])
      }
    ]);
  }

  return (
    <View style={{ backgroundColor: "black", justifyContent: "flex-end" }}>
      <View
        style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }}
      >
        <Image
          source={require("../assets/bg.jpg")}
          style={{ height: height, width: width }}
        />
      </View>

      <View style={{ height: height / 3, justifyContent: "center" }}>
        <TapGestureHandler
          onHandlerStateChange={() => {
            onStateChange();
          }}
        >
          <Animated.View style={{ ...styles.button, opacity: Opacity}}>
            <Text style={{ fontSize: 20 }}>SIGN IN</Text>
          </Animated.View>
        </TapGestureHandler>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  },
  button: {
    backgroundColor: "red",
    height: 70,
    marginHorizontal: 20,
    borderRadius: 35,
    alignItems: "center",
    justifyContent: "center"
  },
  button2: {
    backgroundColor: "blue",
    height: 70,
    marginHorizontal: 20,
    borderRadius: 35,
    alignItems: "center",
    justifyContent: "center"
  }
});

export default MusicApp;
4

2 回答 2

2

AnimatedReanimated 在默认api ie中使用声明式 api 而不是命令式 api .start() .setValue()。

Clock() 是 reanimated 中的特殊节点，它在引擎盖下只是一个每帧更新时间戳的值。

使用这个时钟，您可以定义辅助函数，例如

function runTiming(clock, value, dest) {
  const state = {
    finished: new Value(0),
    position: new Value(0),
    time: new Value(0),
    frameTime: new Value(0),
  };

  const config = {
    duration: 5000,
    toValue: new Value(0),
    easing: Easing.inOut(Easing.ease),
  };

  return block([
    cond(
      clockRunning(clock),
      [
        // if the clock is already running we update the toValue, in case a new dest has been passed in
        set(config.toValue, dest),
      ],
      [
        // if the clock isn't running we reset all the animation params and start the clock
        set(state.finished, 0),
        set(state.time, 0),
        set(state.position, value),
        set(state.frameTime, 0),
        set(config.toValue, dest),
        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,
  ]);
}

在组件中，有多种方法可以为值设置动画。

我推荐使用 Code 或 useCode from reanimated

你可以像这样使用它

function OpacityButton({}) {
  const opacity = new Value(1);
  const clock = new Clock();
  const clicked = new Value(0);
  const buttonState = new Value();

  useCode(() => block([cond(eq(clicked, 1), set(opacity, runTiming(clock, opacity, 0.5)))]));

  return (
    <TouchableOpacity onPress={() => clicked.setValue(1)}>
      <Animated.View style={[styles.button, { opacity }]} />
    </TouchableOpacity>
  );
}

这只是 70% 的代码。但是您可以将其扩展到您的要求。

于 2020-03-07T07:36:13.157 回答
1

您可以将按钮的点击状态映射到tap变量。然后，您可以将useCode钩子tap用作依赖项，并相应地将不透明度从 1 更改为 0。

const { height } = Dimensions.get('window');
const { eq, useCode, timing, Clock, Value, set, cond } = Animated;

const App = () => {
  const [tap, setTap] = useState(new Value(-1));
  const opacity = new Value(1);
  const handleChange = (e) => {
    tap.setValue(e.nativeEvent.state);
  };

  useCode(() => cond(eq(tap, State.BEGAN), set(opacity, 0), 0), [tap]);
  return (
    <>
      <View
        style={{
          height: height / 3,
          justifyContent: 'flex-end',
          backgroundColor: 'green',
        }}
      >
        <TapGestureHandler onHandlerStateChange={handleChange}>
          <Animated.View style={{ ...styles.button, opacity }}>
            <Text style={{ fontSize: 20 }}>SIGN IN</Text>
          </Animated.View>
        </TapGestureHandler>
      </View>
    </>
  );
};
于 2020-03-07T07:22:17.037 回答