web-dev-qa-db-ja.com

React Nativeで揺れる画像アニメーションを作成するには？

React Native TouchableOpacityを押したときにネイティブで揺れる画像アニメーションを作成したい。

これまでのところ、次のコードでアニメーション画像を作成しました。

const backgroundImage = require('./components/images/baby-sleep.jpg')

class App extends Component {

    constructor(props) {
        super(props)
        this.animatedValue = new Animated.Value(0)
    }

    handleAnimation = () => {
        Animated.timing(this.animatedValue, {
            toValue: 1,
            duration: 1000,
            easing: Easing.ease
        }).start()

    }

これは私がhandleAnimation（） in TouchableOpacity：を呼び出すコードです。

<TouchableOpacity onPress={this.handleAnimation}>
   <Text style={{fontSize: 24, fontWeight: 'bold'}}>Play</Text>
</TouchableOpacity>

そしてこれは私がアニメーション画像を作るコードです：

<Animated.Image
    source={backgroundImage}
    resizeMode='contain'
    style={{

    transform: [
        {
            translateX: this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 120]
            })
        },
        {
            translateY: this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 230]
            })
        },
        {
            scaleX: this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [1, 15]
            })
        },
        {
            scaleY: this.animatedValue.interpolate({
            inputRange: [0, 9],
            outputRange: [1, 150.5]
            })
        }
    ]
    }}
/>

TouchableOpacityを押すと、そのコードでアニメーションが作成されますが、TouchableOpacityを押すと、画像が揺れるアニメーションにする方法がわかりません。

javascriptandroidcssreactjsreact-native
4
Tri

あなたは実際にはかなり近いです。以下に、1回の小刻みに動く回転の完全な例を示します。その後、要件に応じてアニメーションを追加できます。

const backgroundImage = require('./components/images/baby-sleep.jpg')

class App extends Component {

  constructor(props) {
    super(props)
    this.animatedValue = new Animated.Value(0)
  }

  handleAnimation = () => {
    // A loop is needed for continuous animation
    Animated.loop(
      // Animation consists of a sequence of steps
      Animated.sequence([
        // start rotation in one direction (only half the time is needed)
        Animated.timing(this.animatedValue, {toValue: 1.0, duration: 150, easing: Easing.linear, useNativeDriver: true}),
        // rotate in other direction, to minimum value (= twice the duration of above)
        Animated.timing(this.animatedValue, {toValue: -1.0, duration: 300, easing: Easing.linear, useNativeDriver: true}),
        // return to begin position
        Animated.timing(this.animatedValue, {toValue: 0.0, duration: 150, easing: Easing.linear, useNativeDriver: true})
      ])
    ).start(); 
  }
}

次に、この回転をImageコンポーネントに追加するには：

<Animated.Image
  source={backgroundImage}
  resizeMode='contain'
  style={{
    transform: [{
      rotate: this.animatedValue.interpolate({
        inputRange: [-1, 1],
        outputRange: ['-0.1rad', '0.1rad']
      })
    }]
  }}
/>
7
dentemm