React Native浮动动画

Question

我该如何实现与以下codepen链接相似的动画效果？ 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进行探索，但没有成功

有人能展示一下实现相同效果的代码吗？

那将非常有帮助

谢谢

- vivek mengu

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

试试这个！你可以改变缓动曲线！ 不过这个是有效的。希望它能对你有所帮助。

- Hitesh Kumar Saini

---

这真的很酷，有没有任何教程、博客或文章可以帮助我学习React Native的动画效果？ - vivek mengu

我明白了。就我所记得的，当我在学习时也想要某种教程。但最终我阅读了文档。我可以向您推荐同样的做法。Facebook已经为此提供了很好的文档。 - Hitesh Kumar Saini