SHARE
TWEET

Untitled

a guest Jul 21st, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function scrollInterpolator(index) {
  2.   const range = [3, 2, 1, 0, -1, -2, -3];
  3.   const inputRange = getInputRangeFromIndexes(range, index);
  4.   const outputRange = range;
  5.  
  6.   return { inputRange, outputRange };
  7. }
  8.  
  9. function animatedStyles(index, animatedValue) {
  10.   return {
  11.     // Funciona
  12.     opacity: animatedValue.interpolate({
  13.       inputRange: [-3, -2, -1, 0, 1, 2, 3],
  14.       outputRange: [0, 0, 0, 20, 0, 0, 0],
  15.     }),
  16.     // Não funciona
  17.     borderRadius: animatedValue.interpolate({
  18.       inputRange: [-3, -2, -1, 0, 1, 2, 3],
  19.       outputRange: [0, 0, 0, 1, 0, 0, 0],
  20.     }),
  21.   };
  22. }
  23.  
  24. class Test extends React.Component {
  25.   renderItem = ({ item, index }) => (
  26.     <View style={{
  27.       backgroundColor: 'orange', borderRadius: 8, width: SIZE + 20, height: SIZE + 20, marginHorizontal: 10,
  28.     }}
  29.     />
  30.   )
  31.  
  32.   render() {
  33.     return (
  34.       <View style={{
  35.         flex: 1, justifyContent: 'flex-end',
  36.       }}
  37.       >
  38.         <Carousel
  39.           data={carouselItems}
  40.           renderItem={this.renderItem}
  41.           itemWidth={SIZE}
  42.           itemHeight={SIZE}
  43.           sliderWidth={screenWidth}
  44.           sliderHeight={SIZE}
  45.           scrollInterpolator={scrollInterpolator}
  46.           slideInterpolatedStyle={animatedStyles}
  47.           firstItem={initialIndex}
  48.           onScroll={e => console.log('!!onScroll e', e.nativeEvent)}
  49.           useScrollView
  50.         />
  51.       </View>
  52.     );
  53.   }
  54. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top