Question

如何实现类似于Codepen Pen链接的动画，如下所示 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 App）中

我尝试使用本机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>
        );
    };
};

试试看！您可以更改缓动曲线！但是，这有效。希望它对您有所帮助。

反应原生浮动动画

1 个答案: