RN Animated做个多张图渐隐渐显切换的动画效果

最新推荐文章于 2020-09-02 15:37:08 发布

qskp456

最新推荐文章于 2020-09-02 15:37:08 发布

阅读量1.2k

点赞数

分类专栏： react-native RN 文章标签： RN RN Anmated RN Anmated 动画

react-native 同时被 2 个专栏收录

2 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍了一种使用React Native实现的图片淡入淡出动画效果，通过Animated组件和定时器控制图片的透明度和层级，实现了平滑过渡的动画效果。详细展示了动画参数配置和组件封装过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

RN小白

/**
 *   duration: 1400, // 动画执行时间
 *   delay: 2000,   // 动画间隔时间
 *   easing: Easing.linear,    // 缓动函数
 *   startOpacity: 0,       // 动画初始透明度
 *   endOpacity: 1,     // 动画结束透明度
 *   startScale: 0.95,       // 动画初始放大比例
 *   endScale: 1,    // 动画结束放大比例
 *   cardStyle: {}        // 每个图片的样式
 *  list: [ {type:'',src:' '} ]  数据列表
 */
class ImageFade extends Component {

  constructor(props) {
    super(props)
    let list = this.props.list
    let row = list.length
    this.state = {
      // 第一个index
      zindex: new Animated.Value(row),
    }
    this.duration = this.props.duration || 1400;
    this.delay = this.props.delay || 2000;
    this.easing = this.props.easing || Easing.linear;
    this.startOpacity = this.props.startOpacity || 0;
    this.endOpacity = this.props.startOpacity || 1;
    this.startScale = this.props.startScale || 1;
    this.endScale = this.props.endScale || 1;
  }
  componentWillMount () {
    let list = this.props.list
    let row = list.length
    for (let index = 1; index <= row; index++) {
      let key = `opacity${index}`
      this.setState({
        [key]: new Animated.Value(index === 1 ? 1 : 0)
      })
    }
  }

  startAnimated = () => {
    let list = this.props.list
    let row = list.length
    let sequence = []
    for (let i = 1; i <= row; i++) {
      if (i === row) {
        // 最后一张
        sequence.push(
          // 第一张改变z-index
          Animated.timing(this.state.zindex, {
            toValue: 0,
            duration: 0,
            delay: 0,
            easing: this.easing // 缓动函数
          })
        )
        sequence.push(
          // 第一张显示
          Animated.timing(this.state.opacity1, {
            toValue: 1,
            duration: 0,
            delay: 0,
            easing: this.easing // 缓动函数
          })
        )
        sequence.push(
          // 最后一张隐藏
          Animated.timing(this.state[`opacity${i}`], {
            toValue: this.startOpacity,
            duration: this.duration,
            delay: this.delay,
            easing: this.easing // 缓动函数
          }))
        sequence.push(// 第一张改变z-index
          Animated.timing(this.state.zindex, {
            toValue: row,
            duration: 0,
            delay: 0,
            easing: this.easing // 缓动函数
          })
        )
      } else {
        sequence.push(
          // 第x张显示
          Animated.timing(this.state[`opacity${i + 1}`], {
            toValue: this.endOpacity,
            duration: 0,
            delay: 0,
            easing: this.easing // 缓动函数
          })
        )
        sequence.push(
          // 第x张隐藏
          Animated.timing(this.state[`opacity${i}`], {
            toValue: this.startOpacity,
            duration: this.duration,
            delay: this.delay,
            easing: this.easing // 缓动函数
          })
        )
      }
    }
    const animation = Animated.sequence(sequence)
    // const animation = Animated.sequence([
    //   // 第二张显示
    //   Animated.timing(this.state.opacity2, {
    //     toValue: this.endOpacity,
    //     duration: 0,
    //     delay: 0,
    //     easing: this.easing // 缓动函数
    //   }),
    //   // 第一张隐藏
    //   Animated.timing(this.state.opacity1, {
    //     toValue: this.startOpacity,
    //     duration: this.duration,
    //     delay: this.delay,
    //     easing: this.easing // 缓动函数
    //   }),

    //   // 第三张显示
    //   Animated.timing(this.state.opacity3, {
    //     toValue: this.endOpacity,
    //     duration: 0,
    //     delay: 0,
    //     easing: this.easing // 缓动函数
    //   }),
    //   // 第二张隐藏
    //   Animated.timing(this.state.opacity2, {
    //     toValue: this.startOpacity,
    //     duration: this.duration,
    //     delay: this.delay,
    //     easing: this.easing // 缓动函数
    //   }),

    //   // 第四张显示
    //   Animated.timing(this.state.opacity4, {
    //     toValue: this.endOpacity,
    //     duration: 0,
    //     delay: 0,
    //     easing: this.easing // 缓动函数
    //   }),
    //   // 第三张隐藏
    //   Animated.timing(this.state.opacity3, {
    //     toValue: this.startOpacity,
    //     duration: this.duration,
    //     delay: this.delay,
    //     easing: this.easing // 缓动函数
    //   }),

    //   // 第一张改变z-index
    //   Animated.timing(this.state.zindex, {
    //     toValue: 0,
    //     duration: 0,
    //     delay: 0,
    //     easing: this.easing // 缓动函数
    //   }),
    //   // 第一张显示
    //   Animated.timing(this.state.opacity1, {
    //     toValue: 1,
    //     duration: 0,
    //     delay: 0,
    //     easing: this.easing // 缓动函数
    //   }),
    //   // 第四张隐藏
    //   Animated.timing(this.state.opacity4, {
    //     toValue: this.startOpacity,
    //     duration: this.duration,
    //     delay: this.delay,
    //     easing: this.easing // 缓动函数
    //   }),

    //   // 第一张改变z-index
    //   Animated.timing(this.state.zindex, {
    //     toValue: 4,
    //     duration: 0,
    //     delay: 0,
    //     easing: this.easing // 缓动函数
    //   }),
    // ]);
    // animation.start()
    // 必须大于1才启动动画
    row > 1 && Animated.loop(animation, {
      useNativeDriver: true
    }).start();
  }

  render () {
    const imageAddStyle = {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    }
    const imageStyle = {
      width: '100%',
      height: '100%'
    }
    return (
      <View style={this.props.style}>
        {
          this.props.list.map((v, index) => {
            return (
              <Animated.View
                key={index}
                style={[
                  {
                    // 索引
                    zIndex: index === 0 ? this.state.zindex : this.props.list.length - index,
                    opacity: this.state[`opacity${index + 1}`],
                    transform: [
                      {
                        scale: this.state[`opacity${index + 1}`].interpolate({
                          inputRange: [0, 1],
                          outputRange: [this.startScale, this.endScale],
                        })
                      },
                    ],
                  },
                  imageAddStyle
                ]}
              >
                <Image
                  style={imageStyle}
                  source={{ uri: v.src }}
                />
              </Animated.View>
            )
          })
        }
      </View>
    );
  }

  componentDidMount () {
    this.startAnimated()
  }
}

做个简单的封装，使用如下：

<ImageFade
         duration={800}
         delay={5000}
         list={{ type: 'image', 'src': 'xxx.jpg' },{ type: 'image', 'src': 'xxx.jpg' }}
         style={{ height: 300, borderBottomColor: 'transparent', borderBottomWidth: 0, borderStyle: 'solid',  position: 'relative'}}
 />

参考原文简单修改
原文：https://blog.youkuaiyun.com/weixin_37695006/article/details/82664003