反应原生圆变换翻译动画 [英] react native circle transform translate animation

问题描述

我希望animated.view像圆圈一样移动。我用窦思考这个但是它不起作用。有人知道怎么做吗？我不想旋转视图。它应该在圆圈中移动。我是新来的本地人。如果有人可以帮助我会很好。

  //导入库
从'react'导入React，{Component}; 
从'react-native'导入{View，Text，StyleSheet，Animated，Button，TouchableOpacity}; 
 
 //创建一个组件
 class MyClass extends Component {
 constructor（）{
 super（）
 this.animated = new Animated.Value（ 0）; 
} 
 
 animate（）{
 this.animated.setValue（0）
 Animated.timing（this.animated，{
 toValue：Math。 PI * 2，
持续时间：1000，
}）。start（）; 
} 
 
 
 render（）{
 const translateY = this.animated.interpolate（{
 inputRange：[0，Math.PI * 2] ，
 outputRange：[0,200] 
}）; 
 const translateX = translateY 
 const transform = [{translateY}，{translateX}]; 
 return（
< View style = {styles.container}> 
< Animated.View style = {[{transform}]}> 
< TouchableOpacity style = {styles.btn}> 
<文字> hallo< /文字> 
< / TouchableOpacity> 
< /Animated.View> 
< Button title = 测试onPress = {（）=> {
 this.animate（）
}} /> 
< / View> 
）; 
} 
} 
 
 //定义你的样式
 const styles = StyleSheet.create（{
容器：{
 flex：1， 
 justifyContent：'center'，
 alignItems：'center'，
 backgroundColor：'＃2c3e50'，
}，
 btn：{
 backgroundColor： 'red'，
 justifyContent：'center'，
 alignItems：'center'，
 width：50，
} 
}）; 
 
 //使该组件可用于app 
导出默认MyClass; 
  

解决方案

你必须使用

hi i want that the animated.view move like a circle. I thought to this with sinus but it does not work. Somebody knows how to do it? I dont want to rotate the view. It just should move in circle. I am new to react native. It would be nice if somebody can help me.

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, Animated, Button, TouchableOpacity } from 'react-native';

// create a component
class MyClass extends Component {
  constructor() {
    super()
    this.animated = new Animated.Value(0);
  }

  animate() {    
    this.animated.setValue(0)
    Animated.timing(this.animated, {
      toValue: Math.PI *2,
      duration: 1000,
    }).start();
  }


  render() {
    const translateY = this.animated.interpolate({
      inputRange: [0, Math.PI *2],
      outputRange: [0, 200]
    });
    const translateX = translateY
    const transform = [{ translateY }, {translateX}];
    return (
      <View style={styles.container}>
        <Animated.View style={[{ transform }]}>
          <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',
  },
  btn: {
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
    width: 50,
  }
});

//make this component available to the app
export default MyClass;

解决方案

You have to calculate translateX and translateY with Trigonometric Function.

translateX is corresponding to Math.sin(), and translateY is corresponding to Math.cos().

Although react-native animated.interpolate doesn't support function callback, you can simulate it by divided into several parts (I picked 50 in my code example):

Full Code:

export class App extends Component {
    constructor() {
        super()
        this.animated = new Animated.Value(0);

        var range = 1, snapshot = 50, radius = 100;
        /// translateX
        var inputRange = [], outputRange = [];
        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);
        }
        this.translateX = this.animated.interpolate({ inputRange, outputRange });

        /// translateY
        var inputRange = [], outputRange = [];
        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);
        }
        this.translateY = this.animated.interpolate({ inputRange, outputRange });
    }

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


      render() {
        const transform = [{ translateY: this.translateY }, {translateX: this.translateX}];
        return (
          <View style={styles.container}>
            <Animated.View style={[{ transform }]}>
              <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',
      },
      btn: {
        backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center',
        width: 50,
      }
    });

Result:

这篇关于反应原生圆变换翻译动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！