标签: react-native-animatable

你好，我正在尝试使用 Animatable 制作一个原生反应旋转轮。按照这里的示例（https://code.tutsplus.com/tutorials/practical-animations-in-react-native--cms-27567）我能够旋转一个矩形框。这是代码！

  <Animatable.View
                        ref={animation[0]}
                        style={[styles.box, { backgroundColor: animation[1] }]}
                        animation={animation[0]}
                        iterationCount={"infinite"}>
                        <Text style={styles.box_text}>{animation[0]}</Text>
 </Animatable.View>


const styles = StyleSheet.create({
        container: {
            flex: 1,
            flexDirection: 'column',
            padding: 20
        },
        row: {
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-between'
        },
        box: {
            alignItems: 'center',
            justifyContent: 'center',
            height: 100,
            width: 100,
            backgroundColor: '#ccc'
        },
        box_text: {
            color: '#FFF'
        }
    });

但问题是我们正在旋转一个使用 css 创建的盒子，有没有一种方法可以让我使用 html 和 css 制作自己的旋转器，并根据业务规则旋转它并停止它？

需要一些指导和建议，谢谢！

以下是我要实现的演示屏幕。

因此，我想做的是，当我向上滑动绿色区域时，我希望黄色区域与之同时向上移动，以及下面的蓝色框区域（FlatList在我的情况下）。

当黄色区域最终被隐藏时，我希望绿色区域停留在屏幕顶部，并且用户可以在下面的蓝色框区域中滚动。

如何使用API PanResponder和AnimatedAPI？据我所知，可以使用插值来完成，但是在这种情况下我无法获得逻辑。

我的问题是关于在react和/或react-native动画中使用translateX和translateY，以将对象设置为动画。

这两个变换使对象相对于现有点移动。

但是对于这种情况，现有坐标并不重要，我想确保将对象移动到屏幕上可能存在的任何点。

附加的限制是，我不能动画的风格top，bottom，left并right因为在反应本地的，如果我们这些动画风格那么我们不能使用useNativeDriver={true}这会导致性能问题指令。

在这段由 William Candillon 从http://start-react-native.dev制作的精彩视频中，他展示了如何制作这个离屏菜单。代码可以在这里找到：https://github.com/wcandillon/can-it-be-done-in-react-native/tree/master/the-10-min/src/Menu

我的问题是，是否可以创建一个可以以编程方式关闭个人资料屏幕的功能，而不是用户在个人资料卡上滑动。最好是随着动画结束，但 B 计划可能只是优雅地将动画状态返回到起始点。如果有一个能够伪造滑动的通用函数就太棒了。

提前致谢！

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

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

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

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> = …

我正在尝试将动画添加到我的反应本机应用程序中。但在 Android 和 IOS 上播放不流畅 我该怎么办才能解决这个问题

我已经尝试使用动画组件运行动画。我的反应本机版本是“0.57.8”这是我的代码：

export default class MainPage extends Component{

    constructor(props) {
        super(props)
        this.moveAnimation = new Animated.ValueXY({ x: 0, y: 0})
    }
    _openCardContainer = () => {
        Animated.spring(this.moveAnimation, {
          toValue: {x:0, y: 0},
          speed: 5,
        }).start()
    }
    render() {
        return(
            <Animated.View style={this.moveAnimation.getLayout()}>
              <EditorChoiceContainer/>
            </Animated.View>
        )
    }
}

这段代码工作正常，但不流畅并且非常滞后

请帮我解决这个问题

我继承了以下组件，它与以前版本的 react-native 配合得很好，在其他组件显示的按钮上显示不透明的滚动进度条。

最近，当我升级到 react-native 0.62.2 时出现错误，要求添加 useNativeDriver. 添加它并将其设置为“是”时，我收到一条错误消息，指出“ style property 'width' is not supported by native animated module”。

当设置useNativeDriver为 false 时，我没有收到错误，但动画不起作用（至少在 android 上不是。没有在 iOS 上测试）。

关于如何修改代码以使其适用于最新版本的 react-native 的任何建议？

import React, { Component } from 'react';
import { Animated, Easing } from 'react-native';
import { connect } from 'react-redux';

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

    this.state = {
      progress: 0
    }
    this.d_isMounted = false;
    this.d_initialTime = 0;
    this.d_animation_width = new Animated.Value(1);
    this.d_animation_progressTime = 3000; …

我onHandlerStateChange在TapGestureHandler. 当 onHandlerStateChange 被触发时，我想改变里面一个按钮的不透明度TapGestureHandler。

<View style={{ height: height / 3, justifyContent: 'center' }}>
  <TapGestureHandler onHandlerStateChange={ this.onStateChange }>
    <Animated.View 
        style={{ ...styles.button, opacity: this.buttonOpacity }}>
      <Text style= {{ fontSize:16, fontWeight: 'bold' }}>GET STARTED</Text>
    </Animated.View>
  </TapGestureHandler>        
</View>

在里面this.onStateChange我有以下代码来改变不透明度。

constructor(props) {
    super(props);
    this.state={
    }
    this.buttonOpacity = new Value(1)
    this.onStateChange = event([{
      nativeEvent: ({ state }) => 
      block([
        cond( eq(state, State.END), set(this.buttonOpacity, 0) )
      ])
    }])
  }

我正在使用 android studio 模拟器并尝试使用react-native run-android并导入运行 android 应用程序

import …