问题
Edited: Adding the XML layout of my view (How to achieve flip animation android (GIF Added))
TopLayout : ivImage BottomLayout : layoutL
I want to implement Vertical ViewPager as shown in the GIF image below. Implemented Vertical ViewPager but can't implement Flip Animation
Any Code snippet or Library
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>
I want to create a layout like a given GIF, I tried so many animations but not worked perfectly for me.
回答1:
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();
}
});
Output
I hope this can help you!
来源：https://stackoverflow.com/questions/60280662/how-to-implement-flip-animation-for-viewpager-in-android-gif-added