标签: react-animated

我正在尝试对ReactJS本机中的组件进行动画处理，以使其以圆形的方式围绕点连续旋转。基本上，我需要一个不断增加的计时器，可以用来将X，Y坐标设置为类似 {x: r * Math.sin(timer), y: r * Math.cos(timer)}

我发现该指南包含有关插值的一些非常有用的信息，但是我仍然没有成功：

http://browniefed.com/react-native-animation-book/INTERPOLATION.html

我如何像这样更新组件的位置？

额外的问题：如何使动画连续？

我有2个AnimatedAPI 问题.

1st:我可以使用以下代码从左到右显示图像.我想将图像从位置缩放X=40 (leftPadding), Y=100(topPadding), height:20, width:20到X=20, Y=10, height:250, width:300.我该如何实现这一目标？

我的代码:

import React, { Component } from 'react';
import { StyleSheet, Text, Image, Animated, Easing, View, Button } from 'react-native';

class MyTestComp extends Component {
  componentWillMount() {
    this.animatedValue = new Animated.Value(0);
  }
  buttonPress(){
  this.animatedValue.setValue(0);
    Animated.timing(this.animatedValue,{
      toValue:1,
      duration:1000,
      Easing: Easing
    }).start()
  }

  render() {

    const translateX = this.animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [-500, 1]
    })

    const transform = [{translateX}];

    return (
      <View>
        <Text>MyTestComp</Text>
        <Animated.View …

我的React Native应用程序中有一个叠加视图，当用户按下按钮时，需要在屏幕上和屏幕外制作动画。我知道如何放置视图并为其设置动画，但是我不知道如何触发动画。

我的redux存储具有一个非常简单的状态，带有一个isOpen标志，用于指示面板是打开还是关闭。我将状态映射到面板组件的道具，当isOpen道具更改时，我想触发打开或关闭动画。显然，如果用户在动画中间按下切换按钮，则需要取消当前运行的动画。

这应该很简单，但我找不到任何示例。任何帮助将非常感激。

我在父级定义了动画值如下

const scrollY = new Animated.Value(0);

console.log(scrollY); // 0;
console.log(typeof scrollY); // object;

然后我需要将此值传递给我的组件，如下所示

<ChildComponent animatedValue={scrollY} />

现在我想知道，在ChildComponent，我的道具的正确道具类型应该是什么animatedValue？

ChildComponent.propTypes = {
  animatedValue: PropTypes.number.isRequired
};

如果我定义为PropTypes.number我收到警告，这是有道理的，因为 typeofscrollY是对象。

但是由于 eslint 错误我们无法在下面定义，对于对象我们应该使用 PropTypes.shape，但我不知道我应该设置什么形状？

ChildComponent.propTypes = {
  animatedValue: PropTypes.object.isRequired // eslint error
};

当我useNativeDriver在 React Native Animated 中使用时

state = {
    chevronUp: new Animated.Value(-50),
};

Animated.spring(this.state.chevronUp, {
    toValue: 50,
    friction: 5,
    useNativeDriver: true,  // <----- this line
}).start();

并渲染

<Animated.View style={{bottom: this.state.chevronUp,position: "absolute", right: 20, width: 50, height: 50}}>
     <Icon name="chevron-up" size={28} color="#666"/>
</Animated.View>

这些错误给了我

原生动画模块不支持样式属性“底部”

和

无法在未安装的组件上调用 setState（或 forceUpdate）。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务。

这是在我意识到 onStart() 没有被调用之前

使用 PanGestureHandler 并尝试“拖动”AnimatedView 在网络上不起作用。没有明显的错误，应用程序构建得很好，检查时控制台中没有警告。

有一个警告让我相信这可能是问题的根源。我在控制台中收到一条警告，内容如下：

"transform" style array value is deprecated. Use space-separated string functions, e.g., "scaleX(2) rotateX(15deg)".

我使用带有 containerStyle 样式的 AnimatedView 来转换对象并在拖动时移动它。

问题的根源

所以我一直在进一步研究它，尝试调试它，我开始意识到回调onStart()没有被调用。由于onStart()未调用回调，因此上下文值永远不会最终被设置，并且上下文对象总体保持为空。导致我最初的问题是无法拖动对象。

不过，这在 iOS 上仍然有效。由于某种原因，在 iOS 上onStart()会调用回调。这会导致上下文被填充并起作用。

这是到目前为止我的代码，请记住这只是一个组件。在根目录中，我确实有一个包含整个应用程序的 GestureHandlerRootView 组件。

import { View, Image } from 'react-native';
import Animated, {
    useAnimatedStyle,
    useSharedValue,
    useAnimatedGestureHandler,
    withSpring,
} from 'react-native-reanimated';
import { PanGestureHandler, TapGestureHandler } from 'react-native-gesture-handler';

const AnimatedImage = Animated.createAnimatedComponent(Image);
const AnimatedView = Animated.createAnimatedComponent(View);

export default function EmojiSticker ({ imageSize, …

我一直试图修复过去2天的问题,它在iOS上运行正常

constructor(){
  super();

  this.animation = new Animated.Value(0)

  this.state = {
    expanded: false,
  };
}
toggle(){
  let initialValue = this.state.expanded? 1 : 0 ,
     finalValue = this.state.expanded? 0 : 1

  this.setState({
     expanded: !this.state.expanded,
  });

  this.animation.setValue(initialValue)
  Animated.timing(
    this.animation,
    {
      toValue: finalValue,
    }
  ).start();
}

render(){
  return(
    <Animated.View style={{{flex: 1, marginTop: 28, paddingLeft: 25, transform: [{ scale: this.animation }, {perspective: 1000 }]}}}>
     ....
    </Animated.View>

  );
}

这个组件是子组件,在父组件中使用如下:<FeedBack ref={ref => this.feedback = ref}/>没有任何条件要检查显示与否(因为构造函数中的动画比例设置为零,所以不需要)

toggle()当按下按钮时,从父进程调用该方法.

现在this works fine on iOS,当组件加载时,在按下按钮(然后缩放)之前视图不存在.但是 …

import React, { Component } from 'react';
import { View, StyleSheet, Animated } from 'react-native';

export default class Ball extends Component {
  componentWillMount(){
    this.position = new Animated.ValueXY(0,0);
    Animated.spring(this.position, {
      toValue: {x :200, y: 500}
    }).start();
  }

  render() {
    return (
     <Animated.View style={this.position.getLayout()}>
        <View style={styles.ball} />
      </Animated.View>
    );
  }
}

const styles = StyleSheet.create({
  ball: {
    height: 60,
    width: 60,
    borderRadius: 30,
    borderWidth: 30,
    borderColor: 'green'
      }
    });

上图所附代码Animated.ValueXY(100,100)改成后运行没有问题Animated.ValueXY(0,0)

任何人都可以照顾解释为什么这样的行为存在如我的想法是有这个球开始从移动，而不是x:0,y:0我想它开始移动x:100,y:100，而不是

我想要使用scrollToIndex的功能FlatList上作出反应，本地人。但是，当我切换FlatList到 时createAnimatedComponent(FlatList)，它ref变成了undefined。

有没有办法在我使用时保持FlatList's ？refcreateAnimatedComponent

谢谢你的关心。

我正在使用Animated.View更改标题高度。

它在 ios 中运行良好，但在 android 中，当我缓慢滚动时，整个视图都在晃动。

1）首先我设置状态

 this.state = {
      scrollY:new Animated.Value(0)
   }

2）在render()我内部渲染我想要动画的视图的高度。

const HeaderHeight = this.state.scrollY.interpolate({
      inputRange: [0, 100],
      outputRange: [100, 0],
      extrapolate: 'clamp'
    })

3）我这样设置我的标题：

  <Animated.View style={{width:'100%', height:HeaderHeight, backgroundColor:'transparent', justifyContent:'flex-end'}}>
 ...
  </Animated.View>

4）在滚动视图内：

<ScrollView
          scrollEventThrottle={16}
          onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }])}
          >

正如您slowly scroll the view在屏幕抖动时从 gif 文件中看到的那样。这发生在android中。在 ios 上它工作正常。

知道如何解决这个问题吗？

任何评论或建议都会非常有帮助:)