Android Studio中动画开发两类问题咨询

Hey there! Let's work through your two Android animation issues step by step, using your existing code as a base.

1. Translating Attachment-like ImageViews to Screen Corners (or Specific Angles) #

Right now, you're using fixed values like translationXBy(120) which only moves the icon a set distance, not precisely to a corner or along a specific angle. Here are two reliable approaches:

Approach 1: Move Directly to Screen Corners

To get icons exactly to the four corners, calculate the target position based on the parent layout's dimensions. First, add an ID to your root RelativeLayout in activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parent_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f39c12"
    tools:context="com.rootonelabs.vicky.pulse.MainActivity">

Then, add this helper method to your MainActivity to handle corner animations:

private void animateIconsToCorners() {
    RelativeLayout parentLayout = findViewById(R.id.parent_layout);
    int parentWidth = parentLayout.getWidth();
    int parentHeight = parentLayout.getHeight();

    // Reference all your icons
    ImageView icon1 = findViewById(R.id.icon1);
    ImageView icon2 = findViewById(R.id.icon2);
    ImageView icon3 = findViewById(R.id.icon3);
    ImageView icon4 = findViewById(R.id.icon4);
    ImageView icon5 = findViewById(R.id.icon5);
    ImageView icon6 = findViewById(R.id.icon6);

    // Animate icon1 to bottom-right corner
    float targetX1 = parentWidth - icon1.getWidth();
    float targetY1 = parentHeight - icon1.getHeight();
    icon1.animate()
         .translationX(targetX1 - icon1.getLeft())
         .translationY(targetY1 - icon1.getTop())
         .setDuration(500)
         .start();

    // Animate icon2 to top-right corner
    float targetX2 = parentWidth - icon2.getWidth();
    float targetY2 = 0;
    icon2.animate()
         .translationX(targetX2 - icon2.getLeft())
         .translationY(targetY2 - icon2.getTop())
         .setDuration(500)
         .start();

    // Animate icon3 to top-left corner
    float targetX3 = 0;
    float targetY3 = 0;
    icon3.animate()
         .translationX(targetX3 - icon3.getLeft())
         .translationY(targetY3 - icon3.getTop())
         .setDuration(500)
         .start();

    // Animate icon4 to bottom-left corner
    float targetX4 = 0;
    float targetY4 = parentHeight - icon4.getHeight();
    icon4.animate()
         .translationX(targetX4 - icon4.getLeft())
         .translationY(targetY4 - icon4.getTop())
         .setDuration(500)
         .start();

    // Animate remaining icons along specific angles (e.g., 45° and 135°)
    float moveDistance = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 180, getResources().getDisplayMetrics());
    // 45° from center
    float angle45 = (float) Math.toRadians(45);
    icon5.animate()
         .translationXBy((float)(moveDistance * Math.cos(angle45)))
         .translationYBy((float)(moveDistance * Math.sin(angle45)))
         .setDuration(500)
         .start();
    // 135° from center
    float angle135 = (float) Math.toRadians(135);
    icon6.animate()
         .translationXBy((float)(moveDistance * Math.cos(angle135)))
         .translationYBy((float)(moveDistance * Math.sin(angle135)))
         .setDuration(500)
         .start();
}

Make sure to get valid parent layout dimensions after it's fully measured—add this to your onCreate method:

RelativeLayout parentLayout = findViewById(R.id.parent_layout);
parentLayout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        parentLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        // Parent dimensions are now available for accurate calculations
    }
});

Finally, call animateIconsToCorners() inside your gear click listener (replace your existing icon1.animate() line).

2. Fixing Blurry Gear Image After Scaling #

The blurriness happens because bitmap images lose quality when scaled up, or your ImageView setup isn't optimized. Here's how to fix it:

Step 1: Use Vector Drawables (Best Solution)

Vector graphics scale infinitely without losing quality. Convert your men3 icon to a VectorDrawable:

1. Right-click your drawable folder → New → Vector Asset
2. Import your icon (SVG is ideal) and generate the vector file.

Step 2: Optimize ImageView Setup

Update your gear ImageView in activity_main.xml to prevent stretching and use a fixed base size:

<ImageView
    android:id="@+id/gear"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:scaleType="centerInside" <!-- Prevents distorting the icon -->
    android:src="@drawable/ic_gear_vector" /> <!-- Replace with your new vector drawable -->

Step 3: Clean Up Animation Code

Your current click listener has duplicate gear.animate() calls which can cause conflicts. Simplify it:

gear.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        if(chkClick == 0) {
            // Scale up gear smoothly
            gear.animate()
                 .scaleX(1.5f)
                 .scaleY(1.5f)
                 .setDuration(500)
                 .start();
            // Hide pulse view
            pulseView.animate().alpha(0).setDuration(500).start();
            pulseView.finishPulse();
            chkClick = 1;
        } else {
            // Scale down gear to original size
            gear.animate()
                 .scaleX(1f)
                 .scaleY(1f)
                 .setDuration(500)
                 .start();
            // Show pulse view
            pulseView.animate().alpha(1f).setDuration(500).start();
            pulseView.startPulse();
            chkClick = 0;
        }
        // Trigger icon corner animation
        animateIconsToCorners();
    }
});

内容的提问来源于stack exchange，提问作者Vikas Tomar