React-native-animations
提供:Dev Guides
React Native-アニメーション
この章では、React Nativeで LayoutAnimation を使用する方法を示します。
アニメーションコンポーネント
状態のプロパティとして myStyle を設定します。 このプロパティは、 PresentationalAnimationComponent 内の要素のスタイル設定に使用されます。
また、 expandElement と collapseElement の2つの関数を作成します。 これらの関数は、状態から値を更新します。 最初のアニメーションは spring プリセットアニメーションを使用し、2番目のアニメーションは linear プリセットを使用します。 これらも小道具として渡します。 Expand および Collapse ボタンは、* expandElement()および collapseElement()*関数を呼び出します。
この例では、ボックスの幅と高さを動的に変更します。 Home コンポーネントは同じであるため、 Animations コンポーネントのみを変更します。
この例では、ボックスの幅と高さを動的に変更します。 Home コンポーネントは同じであるため、 Animations コンポーネントのみを変更します。
App.js
import React, { Component } from 'react'
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'
class Animations extends Component {
componentWillMount = () => {
this.animatedWidth = new Animated.Value(50)
this.animatedHeight = new Animated.Value(100)
}
animatedBox = () => {
Animated.timing(this.animatedWidth, {
toValue: 200,
duration: 1000
}).start()
Animated.timing(this.animatedHeight, {
toValue: 500,
duration: 500
}).start()
}
render() {
const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }
return (
<TouchableOpacity style = {styles.container} onPress = {this.animatedBox}>
<Animated.View style = {[styles.box, animatedStyle]}/>
</TouchableOpacity>
)
}
}
export default Animations
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
},
box: {
backgroundColor: 'blue',
width: 50,
height: 100
}
})