Question

react复活的每个文档都使用类组件，我曾尝试更改按钮的简单不透明动画的方式，但我一生都无法使其正常工作，看来设置不起作用，如果我将设置更改为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;

Answer 1

在默认的Animated API（即.start() .setValue()）中，重新启用的是声明性api而不是命令式api。

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推荐了

您可以像使用它

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％。但是您可以将其扩展到您的要求。

Answer 2

您可以将按钮的点击状态映射到#include<stdio.h> #include<conio.h> #include<string.h> #include<stdlib.h> #define P printf #define S scanf void menu(struct class_sched *classs, int choice); void registerclass (struct class_sched *classs); struct data { char course_code[10]; int offer_code; char course_name[6]; char room_no[7]; char faculty_name[30]; char time[20]; char day[3]; }; struct class_sched { struct data sched; }; int main (void){ int info = 0; int choice; struct class_sched *classs; printf("MENU\n"); printf("\n[1]Registration \n[2]Checking \n[3]Exit\n"); S("%d",&choice); menu(classs,choice); //the error in question or specified getch(); system("cls"); } void menu(struct class_sched *classs,int choice){ //the Main Menu for the program switch (choice) { case 1: registerclass(classs); break; default: break; } } void registerclass (struct class_sched *classs){ // for registering or the inputs for the user P("Registration \n"); P("input: \nCourse Code: "); fflush(stdin); gets(classs->sched.course_code); P("Offer Code: "); fflush(stdin);S("%d",&classs->sched.offer_code); P("Course Name: "); fflush(stdin); gets(classs->sched.course_name); P("Room Number: "); fflush(stdin); gets(classs->sched.room_no); P("Faculty Name: "); fflush(stdin); gets(classs->sched.faculty_name); P("Time: "); fflush(stdin); gets(classs->sched.time); P("Day: "); fflush(stdin); gets(classs->sched.day); }变量。然后，您可以将tap钩子与useCode用作依赖项，并相应地将不透明度从1更改为0。

tap

如何使用功能组件制作简单的不透明动画以及如何对本地动画进行动画处理

2 个答案: