Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Parallax effect in the launcher #164

Open
louis993546 opened this issue Mar 15, 2023 · 0 comments
Open

Parallax effect in the launcher #164

louis993546 opened this issue Mar 15, 2023 · 0 comments

Comments

@louis993546
Copy link
Owner

Screenshot 2023-03-16 at 00 23 42

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

@Composable
fun ParallaxExample() {
    // Create a ScrollState object to track the scroll position
    val scrollState = rememberScrollState()

    // Calculate the parallax offset based on the current scroll position
    val parallaxOffset = with(LocalDensity.current) { scrollState.value.dp / 3 }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(scrollState)
    ) {
        // Add a background image that will move with the scroll
        Image(
            painter = painterResource(id = R.drawable.background_image),
            contentDescription = "Background image",
            modifier = Modifier
                .graphicsLayer(
                    translationY = -parallaxOffset
                )
                .height(400.dp)
                .fillMaxWidth()
        )

        // Add some content that will scroll normally
        Column(
            modifier = Modifier.padding(16.dp)
        ) {
            // Add some text content
            // ...

            // Add some more image content
            // ...
        }
    }
}

Screenshot 2023-03-16 at 00 22 38

Canvas(modifier = Modifier.fillMaxSize()) {
    // Define the source rectangle, which specifies the portion of the image to display
    val sourceRect = Rect(left = 50f, top = 50f, right = 150f, bottom = 150f)
    
    // Define the destination rectangle, which specifies where to draw the portion of the image
    val destinationRect = Rect(left = 0f, top = 0f, right = 100f, bottom = 100f)
    
    // Draw the portion of the image using the DrawImage API
    drawImage(
        image = imageResource(R.drawable.my_image),
        srcOffset = Offset(x = sourceRect.left, y = sourceRect.top),
        srcSize = Size(width = sourceRect.width(), height = sourceRect.height()),
        dstOffset = Offset(x = destinationRect.left, y = destinationRect.top),
        dstSize = Size(width = destinationRect.width(), height = destinationRect.height())
    )
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Backlog
Development

No branches or pull requests

1 participant