transform 相关问题

旋转是一种风格变换，在 RN 中，你可以旋转这样的东西使成为（） { 返回（旋转是一种样式变换，在 RN 中，你可以像这样旋转东西 render() { return ( <View style={{transform:[{rotate: '10 deg'}]}}> <Image source={require('./logo.png')} /> </View> ); } 但是，要在 RN 中制作动画，您必须使用数字，而不是字符串。你还能在 RN 中制作动画变换吗？还是我必须想出某种精灵表并以某个 fps 更改图像 src？您实际上可以使用 interpolate 方法对字符串进行动画处理。 interpolate 接受一系列值，通常 0 到 1 对于大多数情况都适用，并将它们插入到一系列值中（这些值可以是字符串、数字，甚至是返回值的函数）。您要做的就是获取现有的动画值并将其传递给插值函数，如下所示： spinValue = new Animated.Value(0); // First set up animation Animated.timing( this.spinValue, { toValue: 1, duration: 3000, easing: Easing.linear, // Easing is an additional import from react-native useNativeDriver: true // To make use of native driver for performance } ).start() // Next, interpolate beginning and end values (in this case 0 and 1) const spin = this.spinValue.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] }) 然后在你的组件中使用它，如下所示： <Animated.Image style={{transform: [{rotate: spin}] }} source={{uri: 'somesource.png'}} /> 如果您想循环旋转，请在 Animated.timing 中添加 Animated.loop Animated.loop( Animated.timing( this.spinValue, { toValue: 1, duration: 3000, easing: Easing.linear, useNativeDriver: true } ) ).start(); 不要忘记添加属性 useNativeDriver 以确保您从该动画中获得最佳性能： // First set up animation Animated.timing( this.state.spinValue, { toValue: 1, duration: 3000, easing: Easing.linear, useNativeDriver: true } ).start(); 给像我这样的新手的注意事项：要制作其他动画，您需要将其包裹在中才能正常工作。否则编译器会对该转换属性感到恐慌： import {Animated} from 'react-native'; ... //animation code above ... <Animated.View style={{transform: [{rotate: spinValue}] }} > <YourComponent /> </Animated.View> 但是对于图像（Animated.Image）来说，上面的例子是 100% 好的并且是正确的。只需放弃我通过将此处答案中的各个部分拼接在一起解决的解决方案。 import { Feather } from '@expo/vector-icons' import * as React from 'react' import { TextStyle, Animated, Easing } from 'react-native' import { Colors, FontSize } from '~/constants/Theme' export const LoadingSpinner = React.memo( ({ color = Colors['sand'], size = FontSize['md'] - 1, fadeInDelay = 1000, ...props }: Props) => { const fadeInValue = new Animated.Value(0) const spinValue = new Animated.Value(0) Animated.sequence([ Animated.delay(fadeInDelay), Animated.timing(fadeInValue, { toValue: 1, duration: 1500, easing: Easing.linear, useNativeDriver: true, }), ]).start() Animated.loop( Animated.timing(spinValue, { toValue: 360, duration: 300000, easing: Easing.linear, useNativeDriver: true, }) ).start() return ( <Animated.View style={{ opacity: fadeInValue, transform: [{ rotate: spinValue }], }} > <Feather name="loader" size={size} style={{ color, alignSelf: 'center', }} {...props.featherProps} /> </Animated.View> ) } ) type Props = { color?: TextStyle['color'] size?: number featherProps?: Partial<Omit<React.ComponentProps<typeof Feather>, 'style'>> fadeInDelay?: number } 希望有帮助👍 由于大多数答案都是基于 functions 和 hooks，因此这里有一个基于 class 的图像动画的完整示例。 import React from 'react'; import { SafeAreaView, View, Animated, Easing, TouchableHighlight, Text, } from 'react-native'; export default class App extends React.Component { constructor(props) { super(props); this.state = { rotateValueHolder: new Animated.Value(0) }; } componentDidMount = () => { this.startImageRotateFunction(); } startImageRotateFunction = () => { Animated.loop(Animated.timing(this.state.rotateValueHolder, { toValue: 1, duration: 3000, easing: Easing.linear, useNativeDriver: false, })).start(); }; render(){ return( <SafeAreaView> <View> <Animated.Image style={{ width: 200, height: 200, alignSelf:"center", transform: [ { rotate: this.state.rotateValueHolder.interpolate( { inputRange: [0, 1], outputRange: ['0deg', '360deg'], } ) } ], }} source={{uri:'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png',}} /> <TouchableHighlight onPress={() => this.startImageRotateFunction()}> <Text style={{textAlign:"center"}}> CLICK HERE </Text> </TouchableHighlight> </View> </SafeAreaView> ); } } 如果您正在寻找旋转器，只需使用 ReactNative 的内置 <ActivityIndicator />！ import { ActivityIndicator, Text } from 'react-native'; <Text> Loading... <ActivityIndicator /> </Text>

javascript react-native animation rotation transform

回答 6 投票 0

检查 xslt 代码中是否有重复的变量名称并替换它们

我使用自动生成的代码工具来生成 xslt 代码，但我发现了一个问题。有时，声明的变量名是相同的，这会导致我的实现出现问题。让我

xml transform xslt-2.0

回答 1 投票 0

不区分大小写的条件包含摇动变换

输入 { “类型”：“我的 Mnl” } type 可以包含“My mnlString”、“My Manual String”、“Credit mnl String”等值不管怎样我都想

json transform jolt

回答 1 投票 0

如何解释 iOS 相机视图透视上标记的现实世界地标对象的偏航和俯仰倾斜

拥有一个 iOS 应用程序，可以在相机视图中实时标记地标（例如建筑物、用户的山脉），即用户在他面前看到的内容。当它直接接通时，没有问题并且准确...

swift transform trigonometry projection perspectivecamera

回答 1 投票 0

OpenGL在ComputeShader中误读UniformBuffer

出于某种原因，我正在测试计算着色器中变换顶点位置的新方法，但遇到了问题。我想要的只是将顶点（其 id 为 2）向上变换 1.0f，但是...

opengl buffer transform compute-shader uniform

回答 1 投票 0

变换：translateX 正在影响变换：translateY

我正在尝试为汉堡菜单制作动画。当我尝试更改 .burger-icon:before - 变换：translateX(20px) 中的 X 坐标时 - 它也会更改 Y 。谢谢！这是 HTML：我正在尝试为汉堡菜单制作动画。当我尝试更改 .burger-icon:before - transform: translateX(20px) 中的 X 坐标时，它也会更改 Y 坐标。谢谢！这是 HTML： <button class="menu-button" type="button" data-toggle="-menu" id="burger-button"> <span class="burger-icon"></span> </button> 这是我的CSS： .menu-button.is-active .burger-icon { transform: translateY(2px) rotate(135deg); } .menu-button.is-active .burger-icon:before { transform: translateX(20px) translateY(10px) rotate(-45deg); } .menu-button.is-active .burger-icon:after { transform: translateY(-19px) rotate(33deg); } 当我尝试更改 .burger-icon:before 中的 X 坐标时 - transform: translateX(20px) - 它也会更改 Y。您的意思是当您指定 only transform: translateY(10px) 时？嗯，当然可以。您仅在此处更改单个 CSS 属性的值 - 该属性是 transform。如果您没有为不同的变换函数指定显式值 - 那么它们将采用默认值。我想我没有明白这个问题。当我尝试更改 .burger-icon:before - 变换：translateX(20px) 中的 X 坐标时 - 它也会更改 Y 。在你的代码中你有： .burger-icon:before { transform: translateX(20px) **translateY(10px)** rotate(-45deg); } 你想说什么？如果您将该代码更改为： .burger-icon:before { transform: translateX(35px) translateY(10px) rotate(-45deg); } 算法的 y 坐标会改变吗？因为那会很奇怪。但如果您将其更改为： .burger-icon:before { transform: translateX(35px); } 这是正常的，因为您消除了 translateY 变换，因此它返回到默认值 (0)。我只是猜测：也许您正在尝试通过 JavaScript 更改转换的值，如下所示： element.style.transform = "translateX(35px)"; 在这种情况下，就好像您将变换属性值设置为“translateX(35px)”，所以我们的情况与上面解释的情况相同。我知道这个问题已经有几年了，但我想做类似的事情：更改 X 的翻译而不改变 Y 的翻译。因为如果你设置了transform:translateY(10px);然后在另一个CSS规则集下变换：translateX(35px);它将覆盖 Y 的翻译，并将其设置回 0。我想出了一个技巧来做到这一点，但是使用CSS变量。您可以做的是将翻译设置为两个变量的值，并根据需要更改变量的值。 #popup { --x:-50%; --y:-50%; transform:translate(var(--x), var(--y)); } #popup.top { --y:--100%; } #popup.bottom { --y:0; } #popup.left { --x:-100%; } #popup.right { --x:0; }

html css transform translate

回答 3 投票 0

如何使用pandas为groupby上的唯一值创建新列？

假设我有一个 pandas 数据框，例如，身份证号、日期、学校、姓名 1,2019-01-01,U,道格 1,2021-01-01,U,克里斯 1,2022-01-01,U,克里斯 1,2023-01-01,U,克里斯 1,2022-01-01,K,利亚姆 3,2024-01-01,M,南希 3,2024-01-01,M,是...

pandas group-by transform

回答 2 投票 0

在 groupby 和 get_group 之后更新 df 中的值

我有一个以下形式的数据框 df = pd.DataFrame({'dim_unit' :['m', 'cm', 'cm', 'm', 'ft', 'in'], '长度' : [1,2,3,4, 5,6], '宽度' : [5,6,7,8,9,10] }) 我正在尝试使用 groupby 对 b 进行分组...

pandas dataframe group-by merge transform

回答 1 投票 0

transform 相关问题

最新问题