react 原生。创建滑动动画

Question

我正在尝试创建一个我无法弄清楚的动画。假设我在 View 的中心有一个正方形 (100x100)。我希望任何长度的文本从它的“后面”滑到 View 的右侧。显然我希望文本不可见，而只是动画。

如果有人可以帮助我，我会很高兴。

干杯

Answer 1

基本上，您需要将动画 x 值设置为 -(正方形的宽度)，因此在本例中为 -100，并将动态样式设置为 Animated.View。诀窍是调用 Animation.spring 处理的动画(但您可以使用 Animation.timing 或 Animated API 提供的任何方法)并设置转换:[{translateX: myAnimatedValue}]。

它与 CSS3 转换真的没有什么不同。你有一个 Canvas 外的元素，你逐渐让它对用户可见。
我希望这可能有用。

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

// const styles = ...

export default class SlidingExample extends Component {

  state = {
    visible: false,
    x: new Animated.Value(-100),
  };

  slide = () => {
    Animated.spring(this.state.x, {
      toValue: 0,
    }).start();
    this.setState({
      visible: true,
    });
  };

  render() {
    // in practice you wanna toggle this.slide() after some props validation, I hope
    this.slide();
    return (
      <View>
        <Animated.View
          style={[styles.slideView, {
            transform: [
              {
                translateX: this.state.x
              }
            ]
          }]}
        >
          {/* your content, such as this.props.children */}
        </Animated.View>
      </View>;
    );
  }
}