ImageView中的并行动画

Question

我想要实现像下面这张图片一样的动画。

我已经使用了ThreePhaseBottomLibrary，根据我的经验，当我向上滚动时，动画应该与上面的图片并行进行！

以下是我的Fragment类。它可以正常工作，除了屏幕上的图像平行动画：

Myfragment.java

public class MyFragment extends BottomSheetFragment {
private BottomSheetLayout mBottomSheetLayout;
private ImageView mBottomSheetBackgroundImageView;
private int mBottomSheetHeight;
private ImageView movingIconImageView;
private AppBarLayout mAppBarLayout;
private int mMStartMarginBottom;
private int mMStartMarginLeft;
private Toolbar mToolbar;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    final View view = inflater.inflate(R.layout.fragment_my, container, false);
    mBottomSheetHeight = getResources().getDimensionPixelSize(R.dimen.header_height);
    mAppBarLayout = (AppBarLayout) view.findViewById(R.id.appbar);
    view.setMinimumHeight(getResources().getDisplayMetrics().heightPixels);
    CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) view.findViewById(R.id.collapsing_toolbar);
    //collapsingToolbar.setTitle("Title");
    collapsingToolbar.setTitleEnabled(false);
    mToolbar = (Toolbar) view.findViewById(R.id.toolbar);
    //final AppCompatActivity activity = (AppCompatActivity) getActivity();
    //activity.setSupportActionBar(toolbar);
    //final ActionBar actionBar = activity.getSupportActionBar();
    //actionBar.setDisplayHomeAsUpEnabled(true);
    //actionBar.setTitle(null);
    mToolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
    mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mBottomSheetLayout.dismissSheet();
        }
    });
    mToolbar.setAlpha(0);
    mBottomSheetBackgroundImageView = (ImageView) view.findViewById(R.id.backdrop);
    mBottomSheetBackgroundImageView.setAlpha(0.0f);
    movingIconImageView = (ImageView) view.findViewById(R.id.movingIconImageView);
    Glide.with(this).load(R.drawable.cheese_1).centerCrop().into(mBottomSheetBackgroundImageView);
    if (mBottomSheetLayout != null)
        mBottomSheetLayout.setAppBarLayout(mAppBarLayout);
    final int actionBarHeight = getActionBarHeight(getActivity());
    mMStartMarginBottom = getResources().getDimensionPixelSize(R.dimen.header_view_start_margin_bottom);
    mMStartMarginLeft = getResources().getDimensionPixelSize(R.dimen.header_view_start_margin_left);
    movingIconImageView.setPivotX(0);
    final float actionBarIconPadding = getResources().getDimensionPixelSize(R.dimen.action_bar_icon_padding);
    mAppBarLayout.addOnOffsetChangedListener(new OnOffsetChangedListener() {
        float startY = 0;
        float scaleDiff = 0;

        @Override
        public void onOffsetChanged(final AppBarLayout appBarLayout, final int verticalOffset) {
            if (mBottomSheetLayout != null && mBottomSheetLayout.isSheetShowing() && mBottomSheetLayout.getState() == State.EXPANDED) {
                float progress = (float) -verticalOffset / mAppBarLayout.getTotalScrollRange();
                movingIconImageView.setX(mMStartMarginLeft + (progress * (actionBarHeight - mMStartMarginLeft)));
                if (startY == 0)
                    startY = movingIconImageView.getY();
                if (scaleDiff == 0) {
                    scaleDiff = 1 - (actionBarHeight - actionBarIconPadding) / movingIconImageView.getHeight();
                    movingIconImageView.setPivotY(movingIconImageView.getHeight());
                }
                movingIconImageView.setScaleX(1f - progress * scaleDiff);
                movingIconImageView.setScaleY(1f - progress * scaleDiff);
                movingIconImageView.setY(startY - progress * actionBarIconPadding / 2 + mMStartMarginBottom * progress);
            }
        }
    });
    return view;
}

/**
 * returns the height of the action bar
 */
public static int getActionBarHeight(final Context context) {
    // based on https://dev59.com/OWct5IYBdhLWcg3wKqUd
    final TypedValue tv = new TypedValue();
    int actionBarHeight = 0;
    if (context.getTheme().resolveAttribute(R.attr.actionBarSize, tv, true))
        actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, context.getResources()
                .getDisplayMetrics());
    return actionBarHeight;
}

public void setBottomSheetLayout(final BottomSheetLayout bottomSheetLayout)     {
    mBottomSheetLayout = bottomSheetLayout;
    if (mBottomSheetLayout != null && mAppBarLayout != null)
        mBottomSheetLayout.setAppBarLayout(mAppBarLayout);
    mBottomSheetLayout.addOnSheetStateChangeListener(new OnSheetStateChangeListener() {
        private ViewPropertyAnimator mToolbarAnimation;
        State lastState;

        @Override
        public void onSheetStateChanged(final State state) {
            if (lastState == state)
                return;
            lastState = state;
            if (state != State.EXPANDED) {
                if (mToolbarAnimation != null)
                    mToolbarAnimation.cancel();
                mToolbarAnimation = null;
                mToolbar.setAlpha(0);
                mToolbar.setVisibility(View.INVISIBLE);
            } else if (mToolbarAnimation == null) {
                mToolbar.setVisibility(View.VISIBLE);
                mToolbar.setTranslationY(-mToolbar.getHeight() / 3);
                mToolbarAnimation = mToolbar.animate().setDuration(getResources().getInteger(android.R.integer.config_longAnimTime));
                mToolbarAnimation.alpha(1).translationY(0).start();
            }
        }
    });
}

@Override
public ViewTransformer getViewTransformer() {
    return new BaseViewTransformer() {
        private ViewPropertyAnimator mBottomSheetBackgroundImageViewFadeInAnimation, mBottomSheetBackgroundImageViewFadeOutAnimation;
        private Float mOriginalContactPhotoXCoordinate = null;
        private final float mOriginalBottomSheetBackgroundImageViewTranslationY = mBottomSheetBackgroundImageView.getTranslationY();

        @Override
        public void transformView(final float translation, final float maxTranslation, final float peekedTranslation, final BottomSheetLayout parent, final View view) {
            if (mOriginalContactPhotoXCoordinate == null)
                mOriginalContactPhotoXCoordinate = movingIconImageView.getX();
            if (translation < mBottomSheetHeight)
                return;
            if (translation == mBottomSheetHeight) {
                if (mBottomSheetBackgroundImageViewFadeInAnimation != null)
                    mBottomSheetBackgroundImageViewFadeInAnimation.cancel();
                mBottomSheetBackgroundImageViewFadeInAnimation = null;
                if (mBottomSheetBackgroundImageViewFadeOutAnimation == null)
                    mBottomSheetBackgroundImageViewFadeOutAnimation = mBottomSheetBackgroundImageView.animate().alpha(0);
            } else {
                if (mBottomSheetBackgroundImageViewFadeOutAnimation != null)
                    mBottomSheetBackgroundImageViewFadeOutAnimation.cancel();
                mBottomSheetBackgroundImageViewFadeOutAnimation = null;
                if (mBottomSheetBackgroundImageViewFadeInAnimation == null) {
                    mBottomSheetBackgroundImageViewFadeInAnimation = mBottomSheetBackgroundImageView.animate().alpha(1);
                }
            }
            float progress = (translation - mBottomSheetHeight) / (maxTranslation - mBottomSheetHeight);
            //Log.d("AppLog", "translation:" + translation + " maxTranslation:" + maxTranslation + " progress:" + progress);

            //movingIconImageView.setY(progress * (mBottomSheetHeight - movingIconImageView.getHeight()));
            movingIconImageView.setY(progress * (mBottomSheetHeight - movingIconImageView.getHeight() - mMStartMarginBottom));
            movingIconImageView.setX(mOriginalContactPhotoXCoordinate - progress * (mOriginalContactPhotoXCoordinate - mMStartMarginLeft));
            //mBottomSheetBackgroundImageView.setAlpha(progress);
            mBottomSheetBackgroundImageView.setTranslationY(mOriginalBottomSheetBackgroundImageViewTranslationY - progress * mOriginalBottomSheetBackgroundImageViewTranslationY);

        }
    };
}
}

这是我的 XML：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/header_height"
    android:background="@null">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="168dp"
            android:layout_marginTop="40dp"
            android:background="#eee">

        </FrameLayout>

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:translationY="40dp"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ToolbarColoredBackArrow"/>

        <ImageView
            android:id="@+id/movingIconImageView"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_gravity="center_horizontal" android:background="#f00"
            android:src="@drawable/test"/>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/window_color"
        android:orientation="vertical"
        android:paddingTop="24dp">

        <include layout="@layout/junk_cardview"/>

        <include layout="@layout/junk_cardview"/>

        <include layout="@layout/junk_cardview"/>

    </LinearLayout>

</android.support.v4.widget.NestedScrollView>


<!--<android.support.design.widget.FloatingActionButton-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_margin="@dimen/fab_margin"-->
<!--android:clickable="true"-->
<!--android:src="@android:drawable/ic_menu_send"-->
<!--app:layout_anchor="@id/appbar"-->
<!--app:layout_anchorGravity="bottom|right|end"/>-->

我想让我的背景图像向上滑动，只有在滑动时才会淡出！

注意：在库示例中，我从ImageView alpha 0到1获取，但我想要将我的图像向上滑动，而不仅仅是像alpha动画一样进行动画！

- Hardy

---

这个问题是从 Meta 引用的。 - Jeffrey Bosboom

@JeffreyBosboom，如果你不能回答问题，那么为什么人们要对此进行负面评价呢？我无法理解。 - Hardy

你能发布你的 XML 吗？ - Pratik Butani

你能发布设计库的版本吗？ - Pratik Butani

嗨，@Hardy 你试过让包裹头部图片的布局改变位置而不是淡入淡出吗？类似FAB的机制可能会有所帮助，一些实现是隐藏并显示出来，而其他转换则是从屏幕下方向下和向上移动，就像Google+应用程序一样。 - mfaisalhyder

Answer 1

你发布的图片最初来源于一个关于2014年Google I/O应用设计的帖子。相应的图片展示了这种动作在实践中的真实效果[右侧]:

正如文章所述，此应用的源代码已经在GitHub上公开。我建议您查看该代码以获取答案。尽管目前可用的源代码是应用程序的2015版本，而不是文章中提到的2014版本。

- Bryan