Question

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

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

干杯

Answer 1

基本上你需要将动画x值设置为 - （方形的宽度），所以在这种情况下为-100，并将动态样式设置为Animated.View。诀窍就是调用Animation.spring处理的动画（但你可以使用Animation.timing或Animated API提供的任何方法）并设置transform：[{translateX：myAnimatedValue}]。

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

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

反应母语。创建滑动动画

1 个答案: