react-native - 如何控制视图可以通过使用 react native reanimated 来拉伸和禁用

Question

我react-native-reanimated用于动画。

我想达到视频一样的效果。

https://drive.google.com/file/d/1EuPKYxeuxBd6LttB5sgeYAd40ZUV1gze/view?usp=sharing

但我尝试使用scaleY无法实现。

我搜索了一些解决方案，看起来interpolate可以使用，但我想不通。

我该如何设计我的headerAnimatedStyle?

import React from "react";
import { StyleSheet, Text, View } from "react-native";

import Animated, { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, interpolate } from "react-native-reanimated";

const dummyListData = [
  { title: 'Title 1' },
  { title: 'Title 2' },
  { title: 'Title 3' },
  { title: 'Title 4' },
  { title: 'Title 5' },
  { title: 'Title 6' },
  { title: 'Title 7' },
  { title: 'Title 8' },
  { title: 'Title 9' },
  { title: 'Title 10' },
  { title: 'Title 11' },
  { title: 'Title 12' },
  { title: 'Title 13' },
  { title: 'Title 14' },
  { title: 'Title 15' },
];

const HEADER_HEIGHT = 50;
const listHeight = 80;

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  headerView: {
    width: '100%',
    height: HEADER_HEIGHT,
    backgroundColor: 'blue'
  },
  listContainer: {
    height: listHeight,
    marginHorizontal: 20,
    marginVertical: 8,
    backgroundColor: 'pink'
  }
});

export default () => {
  const translationY = useSharedValue(0);

  const onScroll = useAnimatedScrollHandler((event) => {
    translationY.value = event.contentOffset.y;
  });

  const headerAnimatedStyle = useAnimatedStyle(() => {
    let scaleNumber = HEADER_HEIGHT * 0.05;

    scaleNumber = translationY.value > 0 ? translationY.value * 0.1 : HEADER_HEIGHT * 0.05; 
    return {
      transform: [{ scaleY: scaleNumber }]
    };
  
    // const height = interpolate(0.5, [translationY.value, 1], [0, 100])
    // return { height };
  })


  return (
    <View style={styles.container}>
      <Animated.View style={[styles.headerView, {...headerAnimatedStyle}]} />
      <Animated.ScrollView
        onScroll={onScroll}
        scrollEventThrottle={16}>
          {dummyListData.map((v, i) => (
          <View key={i} style={styles.listContainer}>
            <Text style={{ fontSize: 26, marginLeft: 8, marginTop: 6 }}>{v.title}</Text>
          </View>
          ))}
      </Animated.ScrollView>
    </View>
  );
};