React Native floating animation

user_8823907 0
Viewed 1801

How can I achieve the animation similar to codepen pen link as follows https://codepen.io/whusterj/pres/bdYKop

HTML code

<div class="floating"
     style="height: 50px; width: 50px; background: rgb(200,200,200);">
</div>

CSS code

.floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
   margin-top: 5px;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}

in React Native ( Android App )

I tried exploring with react-native Animated but no luck

can anyone show me the code to implement the same

That will be really helpful

Thank you

react-native android-animation
1 Answers

Mark as answer if this helps!

import React from 'react';
import {Animated, TextInput, View, Easing} from 'react-native';

export default class Main extends React.Component {

    state = {verticalVal: new Animated.Value(0)}

    componentDidMount() {
        Animated.timing(this.state.verticalVal, {toValue: 50, duration: 1000, easing: Easing.inOut(Easing.quad)}).start();
        this.state.verticalVal.addListener(({value}) => {
            if (value == 50) {
                Animated.timing(this.state.verticalVal, {toValue: 0, duration: 1000, easing: Easing.inOut(Easing.quad)}).start();
            }
            else if (value == 0) {
                Animated.timing(this.state.verticalVal, {toValue: 50, duration: 1000, easing: Easing.inOut(Easing.quad)}).start();
            };
        })
    };

    render() {
        return(
            <Animated.View style = {{backgroundColor: "#0787d7", height: 100, width: 100, transform: [{translateY: this.state.verticalVal}]}}></Animated.View>
        );
    };
};

Try this out! You can change the easing curve! This works however. Hope it helped you.

user_128254350
Related