toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix animations for texts and buttons in footer

Browse source
This commit is contained in:
Pablo Velez Vidal 2022-11-04 17:58:28 +01:00
parent 954d28e71e
commit 564c8f2f8e
1 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/screens/onboarding/footer_buttons.tsx
View file

@ -47,42 +47,47 @@ const FooterButtons = ({
const styles = getStyleSheet(theme);
const BUTTON_SIZE = 80;
// keep in mind penultimate and ultimate slides to run buttons animations
// keep in mind penultimate and ultimate slides to run buttons text/opacity/size animations
const penultimateSlide = lastSlideIndex - 1;
const isPenultimateSlide = currentIndex === (lastSlideIndex - 1);
const needToAnimate = isLastSlide || isPenultimateSlide;
const inputRange = [(currentIndex - 1) * width, currentIndex * width, (currentIndex + 1) * width];
const inputRange = [penultimateSlide * width, lastSlideIndex * width];
// the next button must resize in the last slide to be the 80% wide of the screen with animation
const resizeStyle = useAnimatedStyle(() => {
const interpolatedWidth = interpolate(
scrollX.value,
inputRange,
[BUTTON_SIZE, isLastSlide ? width * 0.8 : BUTTON_SIZE, width * 0.8],
[BUTTON_SIZE, width * 0.8],
Extrapolate.CLAMP,
);
return {width: needToAnimate ? interpolatedWidth : BUTTON_SIZE};
return {width: interpolatedWidth};
});
// use for the opacity of the button text in the penultimate and last slide
const opacityTextStyle = useAnimatedStyle(() => {
const interpolatedScale = interpolate(
scrollX.value,
inputRange,
[isPenultimateSlide ? 1 : 0, 1, 0],
isLastSlide ? [0, 1] : [1, 0], // from last to penultimate it must fade out (from 1 to 0), once it starts getting the penultimate range it must fade in again (from 0 to 1)
Extrapolate.CLAMP,
);
return {opacity: needToAnimate ? interpolatedScale : 1};
});
// the sign in button should fade out until dissappear in the last slide
const opacitySignInButton = useAnimatedStyle(() => {
const interpolatedScale = interpolate(
scrollX.value,
inputRange,
[1, (isLastSlide ? 0 : 1), 0],
[1, 0],
Extrapolate.CLAMP,
);
return {opacity: needToAnimate ? interpolatedScale : 1};
return {opacity: interpolatedScale};
});
let mainButtonText = (