2

我刚刚开始使用react-native-reanimated. 而且我想使用reanimated v2api（较新的）。

在此示例中，使用interpolateNode和interpolate

这是示例

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, Image } from 'react-native';
import Constants from 'expo-constants';
import Animated, {
  useSharedValue,
  useAnimatedScrollHandler,
  Extrapolate,
  useAnimatedStyle,
  interpolate,
  interpolateNode,
} from "react-native-reanimated";

export const HEADER_IMAGE_HEIGHT = Dimensions.get("window").width / 3

const styles = StyleSheet.create({
  image: {
    position: "absolute",
    top: 0,
    left: 0,
    width: '100%',
    resizeMode: "cover",
  },
});

const IMAGE_URI = 'https://i.pinimg.com/originals/a4/1a/e5/a41ae5ff09234422737d3899cc895184.jpg'

const touchX = 100;

const heightInputRange = [-touchX, 0];
const heightOutputRange = [HEADER_IMAGE_HEIGHT + touchX, HEADER_IMAGE_HEIGHT];
const heightAnimConfig = {
  extrapolateRight: Extrapolate.CLAMP,
}

const topInputRange = [0, touchX];
const topOutputRange = [0, -touchX];
const topAnimConfig = {
  extrapolateLeft: Extrapolate.CLAMP,
}

export default function App() {
  // const scrollY = useSharedValue(0)

  // const scrollHandler = useAnimatedScrollHandler({
  //   onScroll: (e) => {
  //     scrollY.value = e.contentOffset.y;
  //   },
  // });

  // const animStyles = useAnimatedStyle(() => {
  //   return {
  //     height: interpolate(scrollY.value, heightInputRange, heightOutputRange),
  //     top: interpolate(scrollY.value, topInputRange, topOutputRange),
  //   }
  // })

  const scrollY = new Animated.Value(0);
  const scrollHandler = Animated.event([
    {
      nativeEvent: {
        contentOffset: {
          y: scrollY
        }
      }
    }
  ])
  const animStyles = {
    height: interpolateNode(scrollY, { 
      inputRange: heightInputRange,
      outputRange: heightOutputRange,
      extrapolateRight: Extrapolate.CLAMP,
    }),
    top: interpolateNode(scrollY, { 
      inputRange: topInputRange,
      outputRange: topOutputRange,
      extrapolateLeft: Extrapolate.CLAMP,
    }),
  }

  return (
    <View style={{ flex: 1 }}>
      <Animated.Image
        style={[styles.image, animStyles]}
        source={{ uri: IMAGE_URI }}
      />

      <Animated.ScrollView
        scrollEventThrottle={1}
        style={StyleSheet.absoluteFill}
        onScroll={scrollHandler}
      >
        <View style={{ height: HEADER_IMAGE_HEIGHT + 200 }} />
        {Array.from({ length: 50 }).map((v, idx) => {
          return (
            <View key={idx}>
              <Text>{idx}</Text>
            </View>
          )
        })}
      </Animated.ScrollView>
    </View>
  );
}

您可以在这里查看小吃：- https://snack.expo.io/@sapien/tactless-orange。

问题 ：-

  1. interpolate和 和有什么不一样interpolateNode？
  2. 如何选择使用它们中的任何一个？
  3. 为什么一个比另一个性能好？
4

1 回答 1

0
  1. React Native Reanimated 版本 1 使用了插值。由于他们希望您能够使用旧 API（向后兼容性等），因此在版本 2 中，他们引入了 interpolateNode。
  2. interpolateNode 比 interpolate 有更好的性能。
  3. 因为 interpolateNode 较新。他们使用了很多不同的东西来使它更好地工作。
于 2021-06-14T05:09:15.610 回答