React Native 浮动动画

Question

如何实现类似codepen笔的动画link如下 https://codepen.io/whusterj/pres/bdYKop

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 应用程序）

我尝试使用 react-native 探索 Animated 但没有成功

谁能告诉我实现相同的代码

那真的很有帮助

谢谢

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

试试这个！您可以更改缓动曲线！然而，这有效。希望对你有帮助。

React Native 浮动动画

React Native floating animation

android-animation

react-native

react-native-android