如何实现屏幕图片悬浮及启动页Logo点击上移动画效果？

Hey there! Let's tackle your two UI animation requirements one by one—they're both straightforward to implement with a bit of code. I'll use Android as an example since it's a common platform for these features, but the core logic applies to other frameworks like iOS or web with minor adjustments.

1. 实现图片在屏幕上的悬浮效果 #

To create a draggable floating image that stays on top of other apps, follow these steps:

Step 1: Add Required Permissions #

First, declare the overlay permission in your AndroidManifest.xml (mandatory for Android 6.0+):

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

Step 2: Create & Configure the Floating View #

Use WindowManager to add a floating ImageView to the system window. Here's the Kotlin code:

import android.os.Build
import android.view.MotionEvent
import android.view.WindowManager
import android.widget.ImageView

// Inside your Activity or Service
val windowManager = getSystemService(WINDOW_SERVICE) as WindowManager

// Initialize the floating image
val floatImageView = ImageView(this).apply {
    setImageResource(R.drawable.your_floating_image)
    // Set layout parameters for overlay behavior
    layoutParams = WindowManager.LayoutParams(
        WindowManager.LayoutParams.WRAP_CONTENT,
        WindowManager.LayoutParams.WRAP_CONTENT,
        // Window type: Use TYPE_APPLICATION_OVERLAY for Android 8.0+
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) 
            WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY 
        else 
            WindowManager.LayoutParams.TYPE_PHONE,
        // Flags: Make the view non-focusable and draw over the screen
        WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE or WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN,
        PixelFormat.TRANSLUCENT
    )
}

Step 3: Add Drag Functionality #

Implement touch listeners to let users drag the floating image around:

var lastTouchX = 0
var lastTouchY = 0

floatImageView.setOnTouchListener { _, event ->
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            // Record initial touch position
            lastTouchX = event.rawX.toInt()
            lastTouchY = event.rawY.toInt()
        }
        MotionEvent.ACTION_MOVE -> {
            // Calculate movement delta
            val deltaX = event.rawX.toInt() - lastTouchX
            val deltaY = event.rawY.toInt() - lastTouchY
            
            // Update the view's position
            val params = floatImageView.layoutParams as WindowManager.LayoutParams
            params.x += deltaX
            params.y += deltaY
            windowManager.updateViewLayout(floatImageView, params)
            
            // Update last touch position
            lastTouchX = event.rawX.toInt()
            lastTouchY = event.rawY.toInt()
        }
    }
    true
}

// Add the view to the window
windowManager.addView(floatImageView, floatImageView.layoutParams as WindowManager.LayoutParams)

2. 启动页Logo上移动画实现 #

For the splash screen animation where the central logo moves to the top-center after a button tap:

Step 1: Set Up the Splash Layout #

Create an XML layout (activity_splash.xml) with the logo centered and a welcome button below it:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/splash_logo"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_centerInParent="true"
        android:src="@drawable/your_app_logo"/>

    <Button
        android:id="@+id/welcome_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/splash_logo"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:text="欢迎进入"/>

</RelativeLayout>

Step 2: Implement the Click & Animation Logic #

Use ObjectAnimator to create a smooth upward movement animation when the button is clicked:

import android.animation.ObjectAnimator
import android.view.animation.DecelerateInterpolator
import android.widget.Button
import android.widget.ImageView

class SplashActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)

        val logoIv = findViewById<ImageView>(R.id.splash_logo)
        val welcomeBtn = findViewById<Button>(R.id.welcome_button)

        welcomeBtn.setOnClickListener {
            // Calculate target Y position (top-center of the screen)
            val statusBarHeight = resources.getDimensionPixelSize(
                resources.getIdentifier("status_bar_height", "dimen", "android")
            )
            // Target Y: Status bar height + half the logo's height (to keep it centered vertically at the top)
            val targetY = statusBarHeight + (logoIv.height / 2) - logoIv.y

            // Create and start the translation animation
            ObjectAnimator.ofFloat(logoIv, "translationY", 0f, targetY.toFloat()).apply {
                duration = 1000 // 1-second animation duration (adjust as needed)
                interpolator = DecelerateInterpolator() // Smooth deceleration at the end
                start()
            }
        }
    }
}

Notes #

• Adjust the duration value to make the animation faster or slower.
• Use different interpolators (like AccelerateInterpolator) if you want a different animation curve.

内容的提问来源于stack exchange，提问作者Shubham Tiwari