Advertisement
Guest User

Untitled

a guest
Jul 21st, 2019
101
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.36 KB | None | 0 0
  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. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement