如何在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屋!