Android folder zooming animation imitation IOS fusion

Results are as follows, from small to large size consistent with the final position when you open a folder, narrowing the closed folder icon to the original position to achieve seamless integration effect.

 

Process Analysis

Layout after (a) file Expand

After opening above chart folder hierarchy layout

1. Background of the lowermost layer (the background does not move, but there is a change in transparency)

2. Edit Control folder, the folder indicator, add application control as the penultimate layer (the layer displacement, transparency, size scaling animation)

3. The folder contents semitransparent white layer is also rounded as a background (the displacement layer, resizing, moving distance folder icon animation)

problem:

Why not as a background layer, the other as a layer, because the whole folder plus rectangular box after editing application and add controls, if you do have a deformed zoom animation effects, edit and add additional folders application controls transparency change Therefore handled separately.

The overall layout as shown below

<com.android.launcher3.folder.Folder xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:launcher="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <View
            android:id="@+id/folder_bg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/folder_bg_color" />

        <LinearLayout
            android:id="@+id/folder"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:background="@null"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="visible">

            <com.android.launcher3.ExtendedEditText
                android:id="@+id/folder_name"
                android:layout_width="@dimen/folder_extended_edit_text_width"
                android:layout_height="@dimen/folder_extended_edit_text_height"
                android:layout_gravity="center"
                android:layout_marginBottom="30dp"
                android:background="@null"
                android:fontFamily="sans-serif-condensed"
                android:gravity="center"
                android:hint="@string/folder_hint_text"
                android:imeOptions="flagNoExtractUi"
                android:singleLine="true"
                android:textColor="@android:color/white"
                android:textColorHighlight="?android:attr/colorControlHighlight"
                android:textColorHint="?android:attr/textColorHint"
                android:textSize="@dimen/folder_label_text_size"
                android:textStyle="bold" />

            <LinearLayout
                android:id="@+id/folder_content_layout"
                android:layout_width="@dimen/folder_content_layout_width"
                android:layout_height="@dimen/folder_content_layout_height"
                android:gravity="center"
                android:orientation="vertical">

                <com.android.launcher3.pageindicators.PageIndicatorDots
                    android:id="@+id/folder_page_indicator"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/folder_page_dicatorsots_margig_top"
                    android:elevation="1dp"
                    android:gravity="center" />
            </LinearLayout>

            <TextView
                android:id="@+id/folder_page_add_application"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="80dp"
                android:drawableStart="@drawable/ic_add_application"
                android:drawablePadding="12dp"
                android:gravity="center_vertical"
                android:paddingTop="7.5dp"
                android:paddingBottom="7.5dp"
                android:text="@string/add_application"
                android:textColor="@android:color/white"
                android:textSize="14sp" />

            <LinearLayout
                android:id="@+id/folder_footer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clipChildren="false"
                android:orientation="horizontal"
                android:paddingLeft="12dp"
                android:paddingRight="12dp"
                android:visibility="gone"></LinearLayout>
        </LinearLayout>

        <com.android.launcher3.folder.FolderPagedView
            android:id="@+id/folder_content"
            android:layout_width="@dimen/folder_paged_view_width"
            android:layout_height="@dimen/folder_paged_view_height"
            android:layout_gravity="center"
            android:background="@drawable/bg_folder_content"
            android:paddingLeft="8dp"
            android:paddingTop="@dimen/folder_page_view_margin_top"
            android:paddingRight="8dp"
            android:visibility="visible"
            launcher:pageIndicator="@+id/folder_page_indicator" />
    </FrameLayout>

</com.android.launcher3.folder.Folder>

(B) open and close the folder animation analysis

Open closed two reverse process, well open the folder animation, the animation is closed as long as the opposite parameter.

1. In accordance with the above description we need to do the following movies:

1. changes in the underlying background transparency, hide your desktop animation

2. The middle layer folder editing controls such as transparency animation

3. The intermediate layer folder editing controls the size of the displacement animation

4. The size of the mobile top-level folder contents change animation

The contents of the folder icon changes the size of the spacing animation

6. The contents of the folder icon to change the transparency of the text animation

7. Desktop folder icon to change the transparency of the text animation

Second, the process is the most troublesome of two places:

(1) calculates the starting position and the folder shrink ratio

(2) Calculate the folder icon size variation and the location

As shown above, in order to open and close animation and desktop folder icons perfect blend of size, location, icon distance, angle will affect, so there all sizes require accurate position calculations.

3, desktop file folder icon to calculate the starting position

As Figure animation starting position should be a desktop folder icon with white transparency rounded white background that piece, rather than the entire block position.

Desktop Applications folder icon and then implement controls are inherited TextView control just to add a TextView control topDrawable icon can be realized, how that we want to calculate the position of the icon to calculate it (labe icon without).

4. Icon starting position calculation:

1. First, get the entire border position

mFolderIcon.getGlobalVisibleRect (folderStartBounds)

2. Subtract the up and down padding

folderStartBounds.top += mFolderIcon.getPaddingTop();
folderStartBounds.left += mFolderIcon.getPaddingLeft();
folderStartBounds.right -= mFolderIcon.getPaddingRight();
folderStartBounds.bottom -= mFolderIcon.getPaddingBottom();

3. Calculate the final position

Then the frame is integrally icons centered just because the position and the height of the play can not be calculated but the width is centered

folderStartBounds.left = (int) (folderStartBounds.left + width/2-mFolderIcon.mFolderName.getIconSize()/2);
folderStartBounds.right = (int) (folderStartBounds.left + mFolderIcon.mFolderName.getIconSize());
folderStartBounds.top = folderStartBounds.top + mFolderIcon.mFolderName.getPaddingTop();
folderStartBounds.bottom = folderStartBounds.top + mFolderIcon.mFolderName.getIconSize();

4. Calculation icon end position:

Compared to the end position is very good starting point to calculate, because the folder is ultimately so long as we find the midpoint of the screen and then go to the folder's contents 2/1 of the width and height centered

mLauncher.getDragLayer().getGlobalVisibleRect(temp, globalOffset);
folderFinalBounds.top = (int) (temp.height()/2 - viewPageHeight/2);
folderFinalBounds.bottom = (int) (temp.height()/2 + viewPageHeight/2);
folderFinalBounds.left = (int) (temp.width()/2 - viewPageWidth/2);
folderFinalBounds.right = (int) (temp.width()/2 + viewPageWidth/2);

Now we know the start position, end position, corresponding to the size of the back know whenever the animation corresponding to the displacement can shrink.

private ObjectAnimator animateFolderOffsetScale(View view , Rect folderStartBounds , Rect folderFinalBounds , PointF startScale , PointF finalScale) {
        PropertyValuesHolder x = null;
        PropertyValuesHolder y = null;
        if(folderFinalBounds != null){
            x = PropertyValuesHolder.ofFloat("x", folderStartBounds.left, folderFinalBounds.left);
            y = PropertyValuesHolder.ofFloat("y", folderStartBounds.top, folderFinalBounds.top );
        }else{
            x = PropertyValuesHolder.ofFloat("x", folderStartBounds.left);
            y = PropertyValuesHolder.ofFloat("y", folderStartBounds.top);
        }
        PropertyValuesHolder scaleX = PropertyValuesHolder.ofFloat("scaleX", startScale.x,finalScale.x);
        PropertyValuesHolder scaleY = PropertyValuesHolder.ofFloat("scaleY", startScale.y,finalScale.y);

        final ObjectAnimator oa =
                LauncherAnimUtils.ofPropertyValuesHolder(view, x, y, scaleX, scaleY);
        return oa;
    }

The position of the folder icon size calculation:

The process is relatively complex, we must first get to the Desktop folder by each icon size, and secondly to get to the folder icon to expand the size of the inner and the size of the text you want to remove the label, the label text is also a gradual process transparency, You can not ignore it.

      

Because time is short animation process, I did not do it for the simple spatial separation of the process of change because change icon size will also change the pitch so the overall effect is to meet the basic.

 

Third, the summary

Because more specific codes did not paste the full, it is to analyze the whole process. To do this animation to be aware of the following:

1. To clear hierarchical folder layout, good classified the same layer animation.

2. Calculate your home folder icon position, because there are a lot of details easily overlooked.

3. To adjust the timing of the implementation of the animation.