如何在Android中为ViewPager实现翻转动画(已添加GIF) [英] How to implement flip animation for ViewPager in Android (GIF Added)

问题描述

添加视图的XML布局(如何实现android翻转动画(已添加GIF)

Edited: Adding the XML layout of my view (How to achieve flip animation android (GIF Added))

TopLayout:ivImage BottomLayout:layoutL

TopLayout : ivImage BottomLayout : layoutL

我想实现Vertical ViewPager，如下面的GIF图像所示.实现了垂直ViewPager，但不能实现翻转动画

I want to implement Vertical ViewPager as shown in the GIF image below. Implemented Vertical ViewPager but can't implement Flip Animation

任何代码段或库

我的自定义VerticalViewPager类在VerticalPageTransformer中实现了具有普通动画Motionevent的Vertical ViewPager

My Customized VerticalViewPager Class Implemented Vertical ViewPager with normal animation Motionevent in VerticalPageTransformer

public class VViewPager2 extends ViewPager {

String TAG = "VViewPager";

float x = 0;
float mStartDragX = 0;
private static final float SWIPE_X_MIN_THRESHOLD = 15; // Decide this magical number as per your requirement

private boolean disableSwipe = false;

public VViewPager2(@NonNull Context context) {
    super(context);
    init();
}

public VViewPager2(@NonNull Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    init();
    // setPageTransformer(true, new PagerTransformer());
}

private void init() {
    // The majority of the magic happens here
    setPageTransformer(true, new VerticalPageTransformer());
    // The easiest way to get rid of the overscroll drawing that happens on the left and right
    setOverScrollMode(OVER_SCROLL_NEVER);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (getAdapter() != null) {
        if (getCurrentItem() >= 0 || getCurrentItem() < getAdapter().getCount()) {
            swapXY(event);
            final int action = event.getAction();
            switch (action & MotionEventCompat.ACTION_MASK) {
                case MotionEvent.ACTION_MOVE:
                    break;
                case MotionEvent.ACTION_UP:
                    mStartDragX = event.getX();
                    if (x < mStartDragX
                            && (mStartDragX - x > SWIPE_X_MIN_THRESHOLD)
                            && getCurrentItem() > 0) {
                        Log.i(TAG, "down " + x + " : " + mStartDragX + " : " + (mStartDragX - x));
                        setCurrentItem(getCurrentItem() - 1, true);
                        return true;
                    } else if (x > mStartDragX
                            && (x - mStartDragX > SWIPE_X_MIN_THRESHOLD)
                            && getCurrentItem() < getAdapter().getCount() - 1) {
                        Log.i(TAG, "up " + x + " : " + mStartDragX + " : " + (x - mStartDragX));
                        mStartDragX = 0;
                        setCurrentItem(getCurrentItem() + 1, true);
                        return true;
                    }
                    break;
            }
        } else {
            mStartDragX = 0;
        }
        swapXY(event);
        return !disableSwipe && super.onTouchEvent(swapXY(event));
    }
    return false;
}

@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
    boolean intercepted = !disableSwipe && super.onInterceptTouchEvent(swapXY(event));
    if ((event.getAction() & MotionEventCompat.ACTION_MASK) == MotionEvent.ACTION_DOWN) {
        x = event.getX();
    }
    swapXY(event); // return touch coordinates to original reference frame for any child views
    return intercepted;
}

public void disableScroll(Boolean disableSwipe) {
    //When disable = true not work the scroll and when disble = false work the scroll
    this.disableSwipe = disableSwipe;
    Log.d(TAG, "disableSwipe " + disableSwipe);
}

/**
 * Swaps the X and Y coordinates of your touch event.
 */
private MotionEvent swapXY(MotionEvent ev) {
    float width = getWidth();
    float height = getHeight();

    float newX = (ev.getY() / height) * width;
    float newY = (ev.getX() / width) * height;

    ev.setLocation(newX, newY);

    return ev;
}

private class VerticalPageTransformer implements PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    @Override
    public void transformPage(@NonNull View view, float position) {

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (position <= 1) { // [-1,1]
            view.setAlpha(1);

            // Counteract the default slide transition
            view.setTranslationX(-position * view.getWidth());
            // set Y position to swipe in from top
            float yPosition = position * view.getHeight();
            view.setTranslationY(yPosition);

            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            ScaleAnimation flipDown = new ScaleAnimation(1.0f, 1.0f, -1.0f, 0.0f, 1, 1);
            flipDown.setDuration(500);
            flipDown.setFillAfter(true); // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
            // view.startAnimation(flipDown);


        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            view.setAlpha(1);
            // Counteract the default slide transition
            view.setTranslationX(view.getWidth() * -position);

            //set Y position to swipe in from top
            float yPosition = position * view.getHeight();
            view.setTranslationY(yPosition);
            view.setScaleX(1);
            view.setScaleY(1);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

}

我想在这些布局之间切换屏幕.底部

I want to flip the screen between these Layouts From TOP & Bottom

<androidx.cardview.widget.CardView
            app:cardCornerRadius="6dp"
            app:cardPreventCornerOverlap="true"
            app:cardUseCompatPadding="true"
            app:cardBackgroundColor="@color/White"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/ivImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:contentDescription="@string/activity_images"
                android:scaleType="fitXY" />

            <LinearLayout
                android:id="@+id/layoutL"
                android:layout_weight="5.5"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:layout_marginTop="8dp"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="0dp">

                <TextView
                    android:id="@+id/tvTTitle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:padding="4dp"
                    android:textStyle="bold"
                    android:text="@string/Topic_Title"
                    android:textColor="@color/Black"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/postDetails"
                    android:textAllCaps="false"
                    android:text="text"
                    android:textSize="12sp"
                    android:layout_marginStart="4dp"
                    android:textStyle="normal"
                    android:textColor="@color/Silver"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

                <TextView
                    android:id="@+id/tvTopicDesc"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="4dp"
                    android:lineSpacingExtra="2dp"
                    android:text="@string/invalid_email_contactno"
                    android:textAllCaps="false"
                    android:textColor="#6D6D6D"
                    android:textSize="15sp" />

            </LinearLayout>

        </androidx.cardview.widget.CardView>

我想创建一个给定的GIF布局，我尝试了很多动画，但对我来说效果并不理想.

I want to create a layout like a given GIF, I tried so many animations but not worked perfectly for me.

推荐答案

尝试以下解决方案，并将yourSecondView设置为Xml.

Try below solution and set yourSecondView as gone in Xml.

yourButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        final ObjectAnimator oa1 = ObjectAnimator.ofFloat(yourFirstView, "scaleY", 1f, 0f);
        final ObjectAnimator oa2 = ObjectAnimator.ofFloat(yourSecondView, "scaleY", 0f, 1f);
        oa1.setInterpolator(new DecelerateInterpolator());
        oa1.setDuration(1000);
        oa2.setInterpolator(new AccelerateDecelerateInterpolator());
        oa2.setDuration(1000);
        oa1.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                yourFirstView.setVisibility(View.GONE);
                yourSecondView.setVisibility(View.VISIBLE);
                oa2.start();
            }
        });
        oa1.start();
    }
});

输出

我希望这可以为您提供帮助！

I hope this can help you!

这篇关于如何在Android中为ViewPager实现翻转动画(已添加GIF)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！