0
私は反応ネイティブでプレイしていますが、トランジションのアニメーションに問題があります。リアクションネイティブのアニメーショントランジションが正しく動作しません。
Windows 10 - Hyper V、ビジュアルコードエミュレータAndroid - Ignite Boilerplate。
私が何をしようとしている：
私がクリックすると、私はクリック位置の0から2までのスケールアニメーションの円を表示したいです。
は（私が最初のフレームを参照するにはsetTimoutを入れている）以下の画像を参照してください：私が持っているもの
。最初のクリックでは、コンポーネントは自然な幅と高さで非常に素早く表示されますが、0,001のスケールは効果がありません。その後、0,001〜2のスケールでアニメーションが開始されます。
その他のクリックで、円は前の円の寸法で最初のフレームを開始します。アニメーションが開始されます。しかしもう一度、スケール：0は最初のフレームで効果がありません。
ここでランチ画面のコードです：
export default class LaunchScreen extends Component {
state = {
clicks: []
};
handlePress(evt) {
console.log(evt.nativeEvent.locationX, evt.nativeEvent.locationY)
let xCoord = evt.nativeEvent.locationX;
let yCoord = evt.nativeEvent.locationY;
this
.state
.clicks
.push({x: xCoord, y: yCoord});
this.setState({clicks: this.state.clicks});
}
renderClick() {
if (this.state.clicks.length > 0) {
return this
.state
.clicks
.map((item, i) =>< ClickAnimation key = {
item.x
}
x = {
item.x
}
y = {
item.y
} />)
} else {
return <View/>
}
}
render() {
return (
<View style={styles.container}>
<ScrollView
style={styles.scrollView}
horizontal={true}
showsHorizontalScrollIndicator={true}
contentContainerStyle={styles.scrollView}>
<TouchableWithoutFeedback
style={styles.touchableWithoutFeedback}
onPress=
{evt => this.handlePress(evt)}>
<View style={styles.scrollView}>
{this.renderClick()}
</View>
</TouchableWithoutFeedback>
</ScrollView>
</View>
)
}
}
そして、ここでは、円のコンポーネント：
import React from 'react';
import PropTypes from 'prop-types';
import {Animated, View, Easing} from 'react-native';
export default class ClickAnimation extends React.Component {
constructor() {
super();
console.log(this.state)
this.state = {
scaleAnim: new Animated.Value(0.001);
};
}
componentDidMount() {
Animated
.timing(this.state.scaleAnim, {
toValue: 2,
duration: 2000
})
.start();
.scaleAnim
}
render() {
return (<Animated.View
style={{
zIndex: 10,
borderColor: "blue",
borderRadius: 400,
borderWidth: 1,
position: "absolute",
top: this.props.y,
left: this.props.x,
width: 60,
height: 60,
backgroundColor: "red",
transform: [
{
scaleY: this.state.scaleAnim
? this.state.scaleAnim
: 0
}, {
scaleX: this.state.scaleAnim
? this.state.scaleAnim
: 0
}
]
}}/>);
}
}
あなたはなぜそうなのかアイデアを持っていますか？