React Native浮动动画

Question

如何实现类似于codepen笔链接的动画，如下图所示https:/codepen.iowhusterjpresbdYKop。

HTML代码

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

CSS代码

.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); }    
}

在React Native ( Android App )

我试着用 react-native 来探索 动画 徒劳无功

谁能告诉我实现同样的代码？

这将是非常有用的

谢谢你了

Answer 1

如果有帮助，请标记为答案

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>
        );
    };
};

试试这个吧! 你可以改变缓和曲线！这个工作然而。希望对你有帮助。