首页 \ 问答 \ 将原生动画多个视图作为一个圆圈进行反应(react native animating multiple views as a circle)

将原生动画多个视图作为一个圆圈进行反应(react native animating multiple views as a circle)

 我想要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 = Math.sin(value * Math.PI * 2) * radius;
          inputRange.push(value);
          outputRange.push(move);
          outputRange2.push(-move);
      }
      translateX = this.animated.interpolate({ inputRange, outputRange });
      translateX2 = this.animated2.interpolate({inputRange, outputRange2})

      /// translateY
      var inputRange = [] 
      var outputRange = []
      var outputRange2 = []
      for (var i=0; i<=snapshot; ++i) {
          var value = i/snapshot;
          var move = -Math.cos(value * Math.PI * 2) * radius;
          inputRange.push(value);
          outputRange.push(move);
          outputRange2.push(-move);
      }
      translateY = this.animated.interpolate({ inputRange, outputRange });
      translateY2 = this.animated2.interpolate({inputRange, outputRange2})

  }

    animate() {
      this.animated.setValue(0)
      Animated.timing(this.animated, {
        toValue: 1,
        duration: 10000,
      }).start();
      this.animated2.setValue(0)
      Animated.timing(this.animated2, {
        toValue: 1,
        duration: 10000,
      }).start();
    }


    render() {
      //const transform = [{ translateY: this.translateY }, {translateX: this.translateX}];
      return (
        <View style={styles.container}>
          <Animated.View style={
            [{ transform: [{ translateY: translateY }, {translateX: translateX}] }]}>
            <TouchableOpacity style={styles.btn}>
              <Text>hallo</Text>
            </TouchableOpacity>
          </Animated.View>
          <Animated.View style={
            [{ transform: [{ translateY: translateY2 }, {translateX: translateX2}] }]}>
            <TouchableOpacity style={styles.btn}>
              <Text>hallo</Text>
            </TouchableOpacity>
          </Animated.View>
          <Button title="Test" onPress={() => { 
            this.animate() 
            }} />
        </View>
      );
    }
  }

  // define your styles
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#2c3e50',
    },
    btn2: {
      justifyContent: 'center',      
      alignItems: 'flex-end',
      alignSelf: 'flex-end'
    },
    btn: {
      backgroundColor: 'red',
      justifyContent: 'center',
      alignItems: 'center',
      width: 50,
    }
  });

I want 2 views which transform like a circle with no rotation at the same time. The first view starts at the top and the second view at the bottom. I already asked how to do it with one view. I dont get it run with two views. Question Before 
 
//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 = Math.sin(value * Math.PI * 2) * radius;
          inputRange.push(value);
          outputRange.push(move);
          outputRange2.push(-move);
      }
      translateX = this.animated.interpolate({ inputRange, outputRange });
      translateX2 = this.animated2.interpolate({inputRange, outputRange2})

      /// translateY
      var inputRange = [] 
      var outputRange = []
      var outputRange2 = []
      for (var i=0; i<=snapshot; ++i) {
          var value = i/snapshot;
          var move = -Math.cos(value * Math.PI * 2) * radius;
          inputRange.push(value);
          outputRange.push(move);
          outputRange2.push(-move);
      }
      translateY = this.animated.interpolate({ inputRange, outputRange });
      translateY2 = this.animated2.interpolate({inputRange, outputRange2})

  }

    animate() {
      this.animated.setValue(0)
      Animated.timing(this.animated, {
        toValue: 1,
        duration: 10000,
      }).start();
      this.animated2.setValue(0)
      Animated.timing(this.animated2, {
        toValue: 1,
        duration: 10000,
      }).start();
    }


    render() {
      //const transform = [{ translateY: this.translateY }, {translateX: this.translateX}];
      return (
        <View style={styles.container}>
          <Animated.View style={
            [{ transform: [{ translateY: translateY }, {translateX: translateX}] }]}>
            <TouchableOpacity style={styles.btn}>
              <Text>hallo</Text>
            </TouchableOpacity>
          </Animated.View>
          <Animated.View style={
            [{ transform: [{ translateY: translateY2 }, {translateX: translateX2}] }]}>
            <TouchableOpacity style={styles.btn}>
              <Text>hallo</Text>
            </TouchableOpacity>
          </Animated.View>
          <Button title="Test" onPress={() => { 
            this.animate() 
            }} />
        </View>
      );
    }
  }

  // define your styles
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#2c3e50',
    },
    btn2: {
      justifyContent: 'center',      
      alignItems: 'flex-end',
      alignSelf: 'flex-end'
    },
    btn: {
      backgroundColor: 'red',
      justifyContent: 'center',
      alignItems: 'center',
      width: 50,
    }
  });

原文：https://stackoverflow.com/questions/47923061

更新时间：2022-05-04 08:05

最满意答案

 @ pe8ter让我走上了正确的道路。 事实证明我的服务器端代码没有问题，这是我的客户端代码。 我使用fetch来使用api，但我没有处理fetch正确返回的承诺。 我需要做的就是改变我的客户端代码：  
export function fetchVerificationLink() {
    return async( dispatch ) => {
        dispatch(requestVerificationLink());

        let response, link;
        try {
            response = await read(urls.etradeVerification); // I have a wrapper around node-fetch, but failed to handle the promise that fetch returns

            dispatch(receiveVerificationLink(response));
        }
        catch ( error ) {
            console.error('Unable to get verification link from eTrade.', error);
        }
    }
}
 
 我将代码更改为此以处理来自fetch的响应：  
export function fetchVerificationLink() {
    return async( dispatch ) => {
        dispatch(requestVerificationLink());

        let response, link;
        try {
            response = await read(urls.etradeVerification);
            try {
                link = await response.json();  // Here was the solution to my problem.
                dispatch(receiveVerificationLink(link));
            }
            catch ( error ) {
                console.error('Unable to parse authorization link response.', error);
            }                
        }
        catch ( error ) {
            console.error('Unable to get verification link from eTrade.', error);
        }
    }
}
 
 现在一切都按预期工作了。 谢谢你的帮助！ 

@pe8ter got me onto the right path. Turns out there wasn't a problem with my server-side code, it was my client-side code. I was using fetch to consume the api, but I wasn't handling the promise that fetch returns correctly. All I needed to do was change my client side code from this: 
export function fetchVerificationLink() {
    return async( dispatch ) => {
        dispatch(requestVerificationLink());

        let response, link;
        try {
            response = await read(urls.etradeVerification); // I have a wrapper around node-fetch, but failed to handle the promise that fetch returns

            dispatch(receiveVerificationLink(response));
        }
        catch ( error ) {
            console.error('Unable to get verification link from eTrade.', error);
        }
    }
}
 
I changed the code to this to handle the response from fetch: 
export function fetchVerificationLink() {
    return async( dispatch ) => {
        dispatch(requestVerificationLink());

        let response, link;
        try {
            response = await read(urls.etradeVerification);
            try {
                link = await response.json();  // Here was the solution to my problem.
                dispatch(receiveVerificationLink(link));
            }
            catch ( error ) {
                console.error('Unable to parse authorization link response.', error);
            }                
        }
        catch ( error ) {
            console.error('Unable to get verification link from eTrade.', error);
        }
    }
}
 
And now everything is working as expected. Thank you for the assist!

将原生动画多个视图作为一个圆圈进行反应(react native animating multiple views as a circle)

最满意答案

相关问答

在Koa发送响应后运行代码(Running code AFTER the response has been sent by Koa)[2022-02-24]

使用koa2和koa-router获取204 api - 响应正文未被传递(Getting 204 using koa2 and koa-router for REST api - response body not being passed)[2022-07-19]

使用koa2的koa-ejs推荐代码是什么？(What's the recommend code for koa-ejs using koa2?)[2023-04-12]

koa-router error router.routes不是函数(koa-router error router.routes is not a function)[2023-08-21]

Koa路由器不嵌套(Koa-router not nesting)[2022-11-12]

我在我的程序中使用koa，koa-router，koa-body。但是this.reauest.body的值是“{}”(I use koa,koa-router,koa-body in my program.But the value of this.reauest.body is “{}”)[2023-08-26]

如何使用Koa2和koa-router将REST api的GET响应发送到React客户端？(How do I send GET response of REST api to React client using Koa2 and koa-router?)[2023-06-19]

结合koa-router与koa-handlebar(Combining koa-router with koa-handlebar)[2021-12-07]

Koa cookie返回`undefined`(Koa cookie returning `undefined`)[2022-03-13]

Koa w /客户端路由器(Koa w/client side router)[2023-11-15]

相关文章

最新问答