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

最新推荐文章于 2024-03-06 16:16:20 发布

miao_zz

最新推荐文章于 2024-03-06 16:16:20 发布

阅读量560

点赞数 2

分类专栏： react-native React 文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/qq_37117408/article/details/136504517

版权

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

26 篇文章 2 订阅

订阅专栏

React

19 篇文章 0 订阅

订阅专栏

本文介绍了如何在ReactNative应用中利用Animated组件创建一个三张图片动态旋转的效果，通过useRef和useEffecthook管理动画值和定时器，实现从0度到-15度和15度的循环旋转。

摘要由CSDN通过智能技术生成

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;