嗨,我希望animated.view像圆圈一样移动。我用窦思考这个但是它不起作用。有人知道怎么做吗?我不想旋转视图。它应该在圆圈中移动。我是新来的本地人。如果有人可以帮助我会很好。
//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;
答案 0 :(得分:9)
您必须使用Trigonometric Function计算translateX
和translateY
。
translateX
对应Math.sin()
,translateY
对应Math.cos()
。
虽然 react-native animated.interpolate
不支持函数回调,但您可以将其分为几个部分进行模拟(我在代码示例中选择了50个):
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,
}
});
答案 1 :(得分:3)
如果,您正在寻找高性能的圆形旋转。 (无需发抖)(不再需要复杂的数学运算法则)
在这里
int main(void)
{
char** pArr = 0;
char string[] = "hello";
pArr = (char**)malloc(sizeof(char) * 1); //make it an array with one element
*pArr = (char*)malloc(sizeof(char) * (strlen(string) + 1)); //make it an array with the size of string
strcpy(*pArr, string); //copy string to the first element of the array
printf("%p", pArr); //the pointer where the heap corruption is detected
free(pArr);
getchar();
return 0;
}
它将为您提供帮助。