在s3图像上使用来自@ shoutem / animation的淡入动画

Question

我正在显示S3中的图片。我希望他们在负载时淡入。这似乎应该是一个简单的请求。如果可能，有人可以给我一些指导吗？

谢谢！

Answer 1

您只需使用TimingDriver为组件设置动画。

import React from 'react';
import { View, Easing } from 'react-native';
import { TimingDriver, FadeIn } from '@shoutem/animation';

class Screen extends React.Component {
  render() {
    driver = new TimingDriver({
      duration: 400 // 250 by default,
      easing: Easing.inOut // Easing.cubic is passed by default
      delay: 0 // 0 by default
    });

    return (
      <View>
        <FadeIn driver={driver}>
          {/* Some components to fade in with time passing */}
        </FadeIn>
      </View>
    )
  }
}

您可以找到有关工具包here的动画部分的更多信息。