How to create a shaking/floating animation to an image (react native)

user_12485537 0
Viewed 258

I want to create a shaking/floating (call it what you want) animation to an image.

Basically the image will float or wiggle left to right and at the same time up and down. The animation will be triggered automatically.

This is the component I have. Image is a round ball so nothing fancy.

I tried putting values in inputRange and outputRange but nothing happened. Probably because it doesn't trigger the animation (?).

New to react native, not even sure if below is a good start to my animationgoal.

import React, { Component } from "react";
import { Animated } from "react-native";
import Images from "./assets/Images";

export default class Round extends Component {
  constructor(props) {
    super(props);

    this.animatedValue = new Animated.Value(0);
  }

  render() {

    let float = this.animatedValue.interpolate({
      inputRange: [],
      outputRange: [],
    });

    return (
      <Animated.Image
        style={{
          position: "absolute",
          left: x,
          top: y,
          width: width,
          height: height,
          transform: { translate: float },
        }}
        resizeMode="stretch"
        source={Images.round}
      />
    );
  }
}

I used the react-native-animatable library to solve my problem

react-native
1 Answers

I have created something similar to iPhone delete app screen, where all icons wiggle.

You can decrease duration field to increase the speed of wiggle.

const spinValue = new Animated.Value(0);

useEffect(() => {
  Animated.loop(
    Animated.sequence([
      Animated.timing(spinValue, {
        toValue: 1,
        duration: 30,
        useNativeDriver: true,
      }),
      Animated.timing(spinValue, {
        toValue: 2,
        duration: 40,
        useNativeDriver: true,
      }),
    ]),
  ).start();
}, [spinValue]);

const spin = spinValue.interpolate({
  inputRange: [0, 1, 2],
  outputRange: ['0deg', '2deg', '-2deg'],
});


**
JSX **
  <
  Animated.View
style = {
    [
      styles.container,
      styles.deleteContainer,
      {
        transform: [{
          rotate: spin
        }],
      },
    ]
  } >
  <
  Image
style = {
  [styles.thumb, styles.deleteContainer]
}
source = {
  {
    uri: item.thumbnailUrl
  }
}
/> <
/Animated.View>


deleteContainer: {
  opacity: 0.85,
  borderRadius: 5,
  borderColor: 'red',
  borderWidth: 1.4,
},

user_139481900
Related