标签: react-animated

所以基本上我试图让这个渲染函数实时更新值(截至目前它只是在完成动画后跳转到最终值)

this.state = {
  pleaseDisplayMe: Animated.value(0);
}

triggerAnimation(){
  Animated.timing(
        this.state.pleaseDisplayMe,
        {toValue: 100,
        duration: 5000}
      ).start();
}

render(){
  return  <Animated.Text>{this.state.pleaseDisplayMe}</Animated.Text>
}

我觉得因为这个库可以在引擎盖下动画值,然后必须有一种方法来显示发生了什么.或者是否可以通过样式提供某种内容/价值属性？

我已经尝试自定义编写我自己的setInterval函数,但我需要它与其他动画的时间排序更好,我喜欢访问RN的Easing库!

谢谢!

我需要一些帮助来实现搜索和滚动以命中本机反应。进行了大量搜索并最终陷入了死胡同（找到了一些refs我无法开始工作的示例）。

尝试构建此代码段作为开始：

https://snack.expo.io/@norfeldt/searching-and-scroll-to

import React, { Component } from 'react';
import { Text, View, ScrollView, TextInput, StyleSheet } from 'react-native';

export default class App extends Component {

  state = {
    text: '41'
  }

  render() {
    return (
      <View style={styles.container}>

      <TextInput
        style={{height: 60, borderColor: 'gray', borderWidth: 1, borderRadius: 10, margin: 5, padding:30, color: 'black', }}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />

      <ScrollView >

          {[...Array(100)].map((_, i) => {return <Text style={styles.paragraph} key={i}>{i}</Text>})}

      </ScrollView>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: …

我想使用 Animated 函数将组件移动到屏幕上的绝对位置。

基本上它是这样工作的：

 this.state.pan = new Animated.ValueXY({x: 50, y:50})  

 Animated.spring(
   this.state.pan, { toValue: { x: 0, y: 0 } }
 ).start();

我想知道如何将组件移动到屏幕的左上角。toValue 相对于对象的最后一个位置。

有诀窍吗？

我正在尝试react-native-interactable创建一个只能在按下一段时间后才能移动的组件（如 android 和 ios 跳板）我设法找到了解决方案，但我的问题是，当Interactable.View可拖动时，我必须移开我的手指TouchableOpacity才能移动 Interactable。

我希望它在onLongPress被触发时可以直接移动，但看起来它TouchableOpacity正在捕捉所有手势。

我也想dragEnabled在调用 onPressOut 时重置为 false，但这种行为似乎不可能。

这是我的代码：

<Interactable.View
    animatedNativeDriver={true}
    dragEnabled={this.state.editMode}    
>
    <TouchableOpacity
        onPress={() => alert('Touchable Pressed')}
        onLongPress={() => this.setState({editMode: true})}
    >
        <Text>Test Button</Text>
    </TouchableOpacity>
</Interactable.View>

相同的项目在iOS模拟器上运行60FPS，但是在android模拟器中，一切都很缓慢。我什么也不做，但是帧速率从53跳到56。JSFPS和UI FPS始终相同。我创建了动画组件，当我单击它时，所有组件都可以在iOS（〜60FPS）上流畅运行，但是android的JS FPS和UI FPS降至10FPS。正常吗 我已经阅读了链接。调试模式已关闭，代码中没有任何console.log（）。我插入Android手机，界面变得更流畅，但是当我开始动画播放时，JS FPS下降到〜14。React Native中的动画使用本地线程。那怎么可能？我应该进行一些调整吗？

PS Mac Mini 2012年末，四核i7，16Gb RAM，SSD。AVD：Pixel XL，Android 6，x86，API 23、2048Mb RAM，图形-硬件GLES 2.0，多核CPU4。据我了解，使用了HAXM ...

在实现影响许多不同元素或同一组件的许多实例的过渡动画时，是否有关于在哪里控制动画的最佳实践？我玩过两种不同的方法，但我不确定哪个更好。

一种选择是让树中最高层的组件创建一个 Animated.Value 作为从 0 到 1 的计时器。它将这个计时器作为道具向下传递给后代，后代使用 Value.interpolate 来做些什么他们需要接受它。这符合 React 向上移动状态的设计原则，但是将 Animated.Value 作为 prop 传递感觉很奇怪（尽管它工作正常）并且该值总是需要插值才能有用。

另一种选择是传递一个布尔属性，比如“isTransitioning”。每个后代都拥有自己的 Animated.Value 并有一个 useEffect 钩子，当 isTransitioning 切换为 true 时，它​​会启动动画。

我在反应本机中使用上下动画，但动画只是从上到下滑动，然后停在底部我想连续上下移动它。我也使用了动画循环，所以请检查并为我提供解决方案

import React, { useEffect, useState } from 'react'
import { Text, View, Animated, Easing, StyleSheet } from 'react-native'
import LoaderLogo from '../../icons/commonicons/LoaderLogo'
import { Loadericon } from '../../constants/Image';
import LinearGradient from 'react-native-linear-gradient';
import { dynamicSize } from '../sizechoose';

const amimationScreen = () => {
    const startValue = new Animated.Value(0);
    const endValue = dynamicSize(225);

    const startValue2 = new Animated.Value(225);
    const endValue2 = dynamicSize(0);
    const duration = 5000;

    useEffect(() => {

        Animated.sequence([
            Animated.timing(startValue, {
                toValue: endValue,
                duration: duration,
                useNativeDriver: true,
            }), …

我有一个MainFooter包含页脚和迷你播放器的组件，单击时可动画显示为全视图。我有一个问题，每当我们点击一​​个页脚选项卡时，播放器最大化然后卡在那里，没有响应。

此外，播放器内部的向下箭头图标在单击时不会将其最小化，单击 MiniPlayer 也不会将其最大化，但是我们可以通过单击并将其拖动到全视图来最大化 MiniPlayer，对于最大化的 Player 也是如此。

这是MainFooter组件：

export const MainFooter = ({ setCounter, counter }: Props) => {
  const translationY = new Value(0);
  const velocityY = new Value(0);
  const state = new Value(State.UNDETERMINED);
  const offset = new Value(SNAP_BOTTOM);
  const goUp: Animated.Value<0 | 1> = new Value(0);
  const goDown: Animated.Value<0 | 1> = new Value(0);

  const gestureHandler = onGestureEvent({
    state,
    translationY,
    velocityY,
  });

  const translateY = clamp(
    withSpring({
      state,
      value: translationY,
      velocity: velocityY,
      snapPoints: [SNAP_TOP, SNAP_BOTTOM], …

背景

使用 React Native 我能够制作可折叠的卡片组件。在图标上单击卡片向上滑动隐藏其内容，或展开显示其内容。我认为设置默认值就像设置扩展为 false 或 true 一样简单，但我认为这里的问题是，当它被切换时，会触发一个动画，从而改变卡片的高度。

例子

class CardCollapsible extends Component{
  constructor(props){
    super(props);

    this.state = {
      title: props.title,
      expanded: true,
      animation: new Animated.Value(),
      iconExpand: "keyboard-arrow-down",
    };
  }

  _setMaxHeight(event){
      this.setState({
          maxHeight   : event.nativeEvent.layout.height
      });
  }

  _setMinHeight(event){
      this.setState({
          minHeight   : event.nativeEvent.layout.height
      });

      this.toggle = this.toggle.bind(this);
  }

  toggle(){
    let initialValue    = this.state.expanded? this.state.maxHeight + this.state.minHeight : this.state.minHeight,
        finalValue      = this.state.expanded? this.state.minHeight : this.state.maxHeight + this.state.minHeight;

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

    if (this.state.iconExpand === "keyboard-arrow-up") {
      this.setState({
        iconExpand : "keyboard-arrow-down"
      }) …

简短的回答是：使用addListener. 每个动画变量都有可访问的 addListener() 方法。对？我们不应该从__getValue().

我正在努力从这个常量中获取内插值（数字）：

const interpolatedvalue = this.state.myanimvalue.interpolate({...})

我想从中获取数值interpolatedvalue。我试图使用 __getValue()，但我意识到我不应该这样做。

如果您需要帮助，请查看下面我的回答并发表评论。