需求：

類似pdd百億補貼里面的頭像自動循環(huán)縮放展示

注意：由于項目需要，加入頭像自動循環(huán)縮放展示，研究了下動畫，以下是效果，可自行在代碼中調(diào)整動畫執(zhí)行時間

1uw9v-jm8d2.gif

1、創(chuàng)建動畫組件

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 (
      <Animated.View
        style={{
          flexDirection: 'row',
          width: px2dp(100),
          transform: [
            {
              translateX: this.state.marginLeft,
            },
          ],
        }}>
        <Animated.View
          style={[
            styles.topTwoIconView,
            {
              opacity: this.state.iconOneOpacity,
              transform: [{scale: this.state.iconOneScale}],
            },
          ]}>
          <Image
            style={styles.iconView}
            source={{
              uri: iconOne,
            }}
            fadeDuration={0}
            contentMode="stretch"
          />
        </Animated.View>
        <View
          style={[styles.topTwoIconView, {zIndex: 3, marginLeft: -px2dp(20)}]}>
          <Image
            style={styles.iconView}
            source={{
              uri: iconTwo,
            }}
            fadeDuration={0}
            contentMode="stretch"
          />
        </View>
        <View
          style={[styles.topTwoIconView, {zIndex: 2, marginLeft: -px2dp(20)}]}>
          <Image
            style={styles.iconView}
            source={{
              uri: iconThree,
            }}
            fadeDuration={0}
            contentMode="stretch"
          />
        </View>
        <Animated.View
          style={[
            styles.topTwoIconView,
            {
              zIndex: 1,
              marginLeft: -px2dp(20),
              opacity: this.state.iconFourScale,
              transform: [{scale: this.state.iconFourScale}],
            },
          ]}>
          <Image
            style={styles.iconView}
            source={{
              uri: iconFour,
            }}
            fadeDuration={0}
            contentMode="stretch"
          />
        </Animated.View>
      </Animated.View>
    );
  }
}
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=['','','','',''];
 <HeaderBIconView iconList={iconList} />

以上就是我的頭像自動循環(huán)播放的功能代碼，歡迎各位童鞋評論、指導，謝謝！

PS （以上播放的圖片大都是從網(wǎng)上找到，如若有侵權，請聯(lián)系我馬上刪除，謝謝）