标签: react-animated

我目前正在尝试在我的react-native应用程序上实现自动隐藏标头.感谢这个例子,我设法做到了,但它破坏了一些东西.事实上onEndReached,当我到达列表末尾时,我的方法不再被调用.我也使用该RefreshControl组件来实现一个pull-to-refresh有效但这AnimatedScrollView似乎干扰了经典的ListView功能.

我创建了一个AnimatedScrollView这样的组件:

const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);

这是我的组件的渲染:

<View>
  <AnimatedScrollView
    ...someProps
  >
    <ListView
        ...someOtherProps
    />
  </AnimatedScrollView>
  <Animated.View>
    <Text>My Header Title</Text>
  </Animated.View>
</View>

正如我所说的那样,我很确定AnimatedScrollView滚动功能会覆盖它们ListView,但我不知道如何解决这个问题......

如果你们有一个提示/知道一个解决方法,或者甚至知道一个可以帮助我标题的库,我将不胜感激:)

对于那些现在想要表达的东西someProps,它们与我链接的示例完全相同.

谢谢

我试图将X值从0设置为PI,将Y值从0设置为sin(x).

就像是:

this.positionX = new Animated.Value(0);
Animated.timing(
  this.positionX, {
    toValue: Math.PI,
    duration: 1000,
  }
).start();

// this obviously won't work
this.positionY = Math.sin(this.positionX);

我尝试用以下内容插入X值:

this.positionX.interpolate({
  inputRange: [0, ..., PI],
  outputRange: [0, ..., sin(PI)],
});

但我仍然得到一个线性逼近并大幅减慢动画速度.

如何以相同的方式Animated.add或自定义功能从自定义函数编写Animated.Value Animated.divide？

我想做一个动画标题。

1. 我创建了一个 FlatList 的动画组件，
2. 使用该onScroll函数更新动画值。
3. 使用绝对位置放置一个视图 (Animated.View) 作为动画 FlatList 上方的标题。
4. 最后，使用变换属性插入动画值以更改视图 (Animated.View)。

动画效果很好，但动画一点也不流畅。

我看到了使用如何scrollEventThrottle帮助平滑度的问题。所以我认为使用 FlatList 会很顺利，但事实并非如此。如果您在按下时滚动，则很流畅。但是如果你滚动并离开手指，它会很紧张（我不知道如何描述它。抱歉）。滚动很流畅，但动画视图（标题）动画一点也不流畅。

环境

• 反应：16.0.0-alpha.12，
• 反应原生：^0.47.0，
• 节点：v7.7.3
• npm：4.1.2
• 纱线：0.21.3

目标平台： iOS 和 Android

构建工具： expo

链接到小吃演示

export default class AnimatedHeader extends React.Component {
	state = {
		animatedValue: new Animated.Value(0),
	};
	
	_renderItem = ({item}) => {
		return (
			<View style={styles.nonsenseItem}>
				<Text style={styles.itemText}>{item}</Text>
			</View>
		)
	};
	
	render() {
		let scaleY = this.state.animatedValue.interpolate({
			inputRange: [0, 180],
			outputRange: [1, 0.5],
			extrapolate: 'clamp',
		});
		
		let translateY …

出于某种原因，我无法看到我的代码做错了什么。我似乎正在使用 Animated 就像文档显示的那样，但这个错误不断出现。代码片段：

import React, {
  Component
} from 'react';
import {
  StyleSheet,
  Image,
  Animated,
} from 'react-native'
import Header from './../components/Header'


export default class DrawerShell extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showNav: false,
    }
    this.anim = new Animated.Value(0)
    this.openDrawer = this.openDrawer.bind(this)
  }
  openDrawer() {
    let toValue
    this.setState({
      showNav: !this.state.showNav
    }) !this.state.showNav ? toValue = 1 : toValue = 0
    Animated.timing( // Animate value over time
      this.anim, // The value to drive
      {
        toValue: 1, // Animate …

我正在尝试为具有以下动画代码（在componentDidMount上调用）的动画组件运行快照测试：

animate() {
  Animated.loop(
    Animated.sequence([
      Animated.timing(this.state.pulseAnimation, {
        toValue: 1,
        duration: 1000,
        easing: Easing.in(Easing.ease)
      })
    ]),
    {
      iterations: this.props.totalNumPulses
    }
  ).start();
}

我尝试用以下方法模拟Animated：

  jest.mock('Animated', () => {
    return {
      loop: jest.fn(() => {
        return {
          start: jest.fn(),
          reset: jest.fn()
        };
      }),
      timing: jest.fn(() => {
        return {
          start: jest.fn(),
        };
      }),
      Value: jest.fn(() => {
        return {
          interpolate: jest.fn(),
        };
      }),
    };
  });

但是，运行测试会导致以下错误：

TypeError: animation.reset is not a function

  54 |         iterations: this.props.totalNumPulses
  55 |       }
> 56 |     ).start(); …

我有一个带有两列的平面列表，用于呈现卡片组件。一旦用户点击一张卡片，它就会通过 React Native 的 Animated API 弹出。

我将单击组件的 ZIndex 值更改为 10。当它关闭时，该值设置为 0。

问题是这个逻辑只适用于行元素，而不适用于行之间。因此，位于较低索引行中的所有其他卡片都位于其他卡片之后。

我应该怎么做这个问题？先感谢您。

这是示例；

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

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库!

谢谢!

我看到许多移动应用程序都有一个功能，用户可以绘制一个正方形来指示要在图像上标记的内容。

我正在构建Face Tagging应用程序，基本上用户在图像上人脸的边界上绘制正方形。

我在谷歌上搜索过很多次，但我不确定 RN 是否有一些用于标记的功能库。

我怎样才能做到这一点？有什么好的库可以在图像上绘制正方形吗？如果我能记住它的坐标宽度、高度和矩形的位置就更好了。

任何想法或建议将不胜感激！

这是下面的一个例子

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

基本上它是这样工作的：

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

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

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

有诀窍吗？

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

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,
            }), …