RN Animated动画 - 头像自动循环缩放展示

需求：

类似pdd百亿补贴里面的头像自动循环缩放展示

注意：由于项目需要，加入头像自动循环缩放展示，研究了下动画，以下是效果，可自行在代码中调整动画执行时间

1uw9v-jm8d2.gif

1、创建动画组件

import React from 'react';
import {View, StyleSheet, Animated, Image} from 'react-native';
import px2dp from '../../../utils/px2dp';

const showTime = 2000; //启动时间
//头像动画
export default class HeaderIconView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      marginLeft: new Animated.Value(px2dp(20)),
      iconOneOpacity: new Animated.Value(1),
      iconOneScale: new Animated.Value(1),
      iconFourOpacity: new Animated.Value(0),
      iconFourScale: new Animated.Value(0),
      iconOne: (props.iconList && props.iconList[0]) || '',
      iconTwo: (props.iconList && props.iconList[1]) || '',
      iconThree: (props.iconList && props.iconList[2]) || '',
      iconFour: (props.iconList && props.iconList[3]) || '',
    };
    this.startIndex = 0;
  }

  componentDidMount() {
    const {iconList = []} = this.props;
    if (iconList.length >= 4) {
      this.animatedShowAction();
    }
  }
  animatedShowAction() {
    const {iconList = []} = this.props;
    Animated.parallel([
      Animated.timing(this.state.marginLeft, {
        toValue: 0,
        duration: showTime,
        useNativeDriver: true,
      }),
      Animated.timing(this.state.iconOneOpacity, {
        toValue: 0,
        duration: showTime,
        useNativeDriver: true,
      }),
      Animated.timing(this.state.iconOneScale, {
        toValue: 0,
        duration: showTime,
        useNativeDriver: true,
      }),
      Animated.timing(this.state.iconFourScale, {
        toValue: 1,
        duration: showTime,
        useNativeDriver: true,
      }),
      Animated.timing(this.state.iconFourOpacity, {
        toValue: 1,
        duration: showTime,
        useNativeDriver: true,
      }),
    ]).start(() => {
      ++this.startIndex;
      let twoIndex = this.startIndex + 1;
      let threeIndex = this.startIndex + 2;
      let fourIndex = this.startIndex + 3;
      if (this.startIndex > iconList.length - 1) {
        this.startIndex = 0;
        twoIndex = 1;
        threeIndex = 2;
        fourIndex = 3;
      }
      if (twoIndex > iconList.length - 1) {
        twoIndex = 0;
        threeIndex = 1;
        fourIndex = 2;
      }
      if (threeIndex > iconList.length - 1) {
        threeIndex = 0;
        fourIndex = 1;
      }
      if (fourIndex > iconList.length - 1) {
        fourIndex = 0;
      }

      this.setState(
        {
          marginLeft: new Animated.Value(px2dp(20)),
          iconOneOpacity: new Animated.Value(1),
          iconOneScale: new Animated.Value(1),
          iconFourScale: new Animated.Value(0),
          iconFourOpacity: new Animated.Value(0),
          iconOne: iconList[this.startIndex],
          iconTwo: iconList[twoIndex],
          iconThree: iconList[threeIndex],
          iconFour: iconList[fourIndex],
        },
        () => {
          this.animatedShowAction();
        },
      );
    });
  }

  render() {
    const {
      iconOne = '',
      iconTwo = '',
      iconThree = '',
      iconFour = '',
    } = this.state;
    return (
      
        
          
        
        
          
        
        
          
        
        
          
        
      
    );
  }
}
const styles = StyleSheet.create({
  topTwoIconView: {
    width: px2dp(40),
    height: px2dp(40),
    borderRadius: px2dp(20),
    borderWidth: px2dp(2),
    zIndex: 4,
    borderColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
  },
  iconView: {
    width: px2dp(40),
    height: px2dp(40),
    borderRadius: px2dp(20),
  },
});

2、引入动画组件

const iconList=['','','','',''];
 

以上就是我的头像自动循环播放的功能代码，欢迎各位童鞋评论、指导，谢谢！

PS （以上播放的图片大都是从网上找到，如若有侵权，请联系我马上删除，谢谢）