标签: react-animated

我正在创建一个可拖动的框。我可以将其拖动到屏幕上的任何位置，但我收到此错误，其中显示“您试图在一个本应不可变且已被冻结的对象上设置密钥_value”。谁能告诉我我做错了什么。

我的代码：

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  Button,
  ScrollView,
  Dimensions,
  PanResponder,
  Animated,
  View
} from 'react-native'

import { StackNavigator } from 'react-navigation'




export default class Home extends Component{

componentWillMount(){

  this.animatedValue = new Animated.ValueXY();

this.panResponder = PanResponder.create({

 onStartShouldSetPanResponder: (evt, gestureState) => true,
  onMoveShouldSetPanResponder: (evt, gestureState) => true,
  onPanResponderGrant: (e, gestureState) => {



      },

  onPanResponderMove:Animated.event([


null,{dx: this.animatedValue.x , dy:this.animatedValue.y}

    ]),  
  onPanResponderRelease: (e, gestureState) => { 
      },       
})
}

  render(){

    const animatedStyle …

我面临的任务是要在背景图像上放置可拖动标记，然后在背景图像中获取标记的坐标。

我已经按照这个整齐的教程，使用拖动的标记Animated.Image，PanResponder和Animated.ValueXY。问题是我无法弄清楚如何将可拖动视图限制为仅在其父视图（背景图像）的边界内移动。

很感谢任何形式的帮助 ：）

最好的问候
詹斯

我想要2个视图,它们像一个圆圈一样变换,同时没有旋转.第一个视图从顶部开始,第二个视图从底部开始.我已经问过如何用一个视图做到这一点.我不认为它运行两个视图. 之前的问题

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, Animated, Button, TouchableOpacity } from 'react-native';

// create a component
export default class App extends Component {
  constructor() {
      super()
      this.animated = new Animated.Value(0);
      this.animated2 = new Animated.Value(0);

      var range = 1, snapshot = 50, radius = 100;
      /// translateX
      var inputRange = []
      var outputRange = [] 
      var outputRange2 = []
      for (var i=0; i<=snapshot; ++i) {
          var value = i/snapshot;
          var move …

我想在我的应用程序中添加可折叠标题。我为标题视图创建了一个单独的组件。

interface Props{
    userData: UserDetails | null
    scrollY: Animated.Value
}
    
const HEADER_EXPANDED_HEIGHT = sizeProportionHeight(320)
const HEADER_COLLAPSED_HEIGHT = sizeProportionHeight(142)

const CollapsableHeader : React.FC<Props> = ({userData, scrollY}) => {
    
   const headerHeight = scrollY.interpolate({
        inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
        outputRange: [HEADER_EXPANDED_HEIGHT, HEADER_COLLAPSED_HEIGHT],
        extrapolate: 'clamp'
    })

    return(
        <Animated.View style={{height: headerHeight, width: SCREEN_WIDTH, position:'absolute', top:0, left: 0}}/>
    )
}

export default CollapsableHeader

我的主页我添加了标题，如下所示：

interface Props{
    navigation: StackNavigationProp<MainParamList,'HomeScreen'>
    route: RouteProp<MainParamList,'HomeScreen'>
}

interface HeaderState {
    scrollY: Animated.Value   
}

interface HomeScreenState {
    header: HeaderState
}

const HomeScreen : React.FC<Props> = …

我在做一个测验。并且所有选项都将在 for 循环中呈现。

预期行为：

当我点击一个选项时，如果它是错误的答案，那么它应该将背景颜色更改为红色并且它应该抖动。

下面是我正在尝试的代码。

import React, { Component } from "react";
import {
  View,
  Text,
  TouchableWithoutFeedback,
  Animated,
  Easing
} from "react-native";

class MCQOptions extends Component {
  state = {
    optionSelectedStatus: 0 // 0: unselected, 1: correct, -1: wrong
  };
  constructor() {
    super();
    this.animatedValue = new Animated.Value(0);
    this.shakeAnimValue = new Animated.Value(0);
  }

  onOptionSelected(i) {

    // this.props.showNextQuestion();

    var answer = this.props.answer;
    if (answer == i) {
      this.setState({ optionSelectedStatus: 1 });
      this.showCorrectAnimation();
    } else {
      this.setState({ optionSelectedStatus: -1 });
      this.showErrorAnimation();
    } …

我有一个 React Native Animated.view 组件，我想根据滚动视图位置对其不透明度进行插值。但是，我想使用两个值（x 和 y）而不是一个值来插值不透明度。

      <Animated.View
        style={[
          {
            opacity: this.state.scrollX.interpolate({
              inputRange: [0, 414, 828],
              outputRange: [0, 1, 1]
            })
          },
          {
            opacity: this.state.scrollY.interpolate({
              inputRange: [-168, -167, -166, -85, -84],
              outputRange: [1, 1, 1, 0, 0]
            })
          }
        ]}
      >
        <Text>Content....</Text>
      </Animated.View>

这当然不起作用，因为一个不透明度值会覆盖另一个不透明度值，但它清楚地表明了我想要实现的目标。

假设我用 开始动画Animated.timing().start()，具体时间（在安装上或在某些外部事件上）并不重要。然后我使用 anAnimated.View来渲染动画。

假设它在组件卸载之前没有完成。

我应该在stop()卸载时显式调用动画（实际上，所有仍然可以运行的动画），还是会隐式清理它？大多数手动分配的资源不会被隐式释放（除非它们附加到组件，如钩子），但动画似乎会这样做。

我正在创建一个可触摸的按钮，以对原生动画做出反应。当按下按钮时，它应该缩小一点。当压力释放后，它应该会恢复正常。

这是我的代码：

export const TouchableButton = (props) => {

    const { onPress, text, icon } = props

    const animatedValue = new Animated.Value(0)

    const animatedValueInterpolateScale = animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [1, 0.95]
    })

    const pressInHandler = () => {
        Animated.timing(
            animatedValue,
            {
                toValue: 1,
                duration: 150
            }
        ).start()
    }

    const pressOutHandler = () => {
        Animated.timing(
            animatedValue,
            {
                toValue: 0,
                duration: 150
            }
        ).start()
    }

return (
    <TouchableWithoutFeedback onPress={onPress} onPressIn={pressInHandler} onPressOut={pressOutHandler}>
        <View style={{ alignItems: 'center' }}>
            <Animated.View style={{ width: '100%', …

目标：

创建一个下拉视图，折叠时高度为 75 像素。展开后，其高度为 225px。当按下启动动画的按钮时，它会并行运行两个动画，一个用于高度的计时函数，一个用于不透明度的计时函数。目标的第二部分是对下拉列表下部的不透明度进行动画处理expanded == true。

问题：

扩展视图时动画按预期运行，没有问题。但是当折叠下拉菜单时，似乎只有不透明动画运行。问题在于高度，没有正确反映在视图中。它保持与展开时相同的高度。

这是组件：

const ListItem = (props) => {
    const [checkInModal, setCheckInModal] = useState(false);
    const [animatedHeight, setAnimatedHeight] = useState(new Animated.Value(0))
    const [animatedOpacity] = useState(new Animated.Value(0))
    const [expanded, setExpanded] = useState(false);

    const toggleDropdown = () => {
        console.log("BEFORE ANIMATION =>" + "\n" + "expanded: " + expanded + "\n" + "animatedHeight: " + JSON.stringify(animatedHeight) + "\n" + "animatedOpacity: " + JSON.stringify(animatedOpacity))
        if (expanded == true) {
            // collapse dropdown
            Animated.parallel([
                Animated.timing(animatedHeight, { …

在类组件中，我有两个视图，一个作为占位符，一个用于图像。占位符会显示，直到某些状态发生变化（当图像完成加载时），然后图像才会显示。我正在尝试添加一些动画，并在状态更改时让图像淡入和占位符淡出。

下面是两个视图的相关渲染函数：

renderImage = (filePath: string): JSX.Element => {
    const { isImageLoaded } = this.state;
    if (isImageLoaded) {
        return (
            <View style={Styles.imageContainer}>
                    <Image source={{ uri: filePath, cache: 'reload' }}/>
            </View>
        );
    }

    return (
        <View style={Styles.placeholderContainer}>
        </View>
    );
};

我知道我需要将视图更改为Animated.View并具有淡入/淡出功能，如下所示：

Animated.timing(this.state.opacity, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true,
    }).start();

setState在状态回调中调用淡入/淡出函数的正确方法是isImageLoaded？或者有没有一种方法可以触发动画而无需手动调用它们setState？