react native中使用Animated实现三张图片动态旋转效果

react native中使用Animated实现三张图片动态旋转效果

• • 效果示例图
  • 示例代码

效果示例图

示例代码

import React, {useEffect, useRef} from 'react';
import {Animated, StyleSheet, View} from 'react-native';
import {pxToPd} from '../../common/js/device';

const TestShowCard = () => {
  const rotationValue = useRef(new Animated.Value(0)).current;

  const firstCardRotation = '0deg';
  const secondCardRotation = rotationValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '-15deg'],
  });
  const thirdCardRotation = rotationValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '15deg'],
  });

  useEffect(() => {
    Animated.timing(rotationValue, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
    return () => {};
  }, []);

  return (
    <>
      <View style={styles.container}>
        <View style={styles.dynCard}>
          <Animated.View
            style={[
              styles.cardItem,
              {transform: [{rotate: thirdCardRotation}]},
            ]}></Animated.View>
          <Animated.View
            style={[
              styles.cardItem,
              {transform: [{rotate: secondCardRotation}]},
            ]}></Animated.View>
          <Animated.View
            style={[
              styles.cardItem,
              {transform: [{rotate: firstCardRotation}]},
            ]}></Animated.View>
        </View>
      </View>
    </>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  dynCard: {
    width: pxToPd(174),
    height: pxToPd(203),
    position: 'relative',
    marginTop: pxToPd(200),
    marginLeft: pxToPd(100),
  },
  cardItem: {
    width: '100%',
    height: '100%',
    borderColor: 'blue',
    borderWidth: pxToPd(1),
    borderStyle: 'solid',
    position: 'absolute',
    backgroundColor: 'white',
  },
});

export default TestShowCard;