react 实现左右滑动效果_【Android初级】如何实现一个比相册更高大上的左右滑动特效...

点击上方蓝字关注

在Android里面，想要实现一个类似相册的左右滑动效果，我们除了可以用Gallery、HorizontalScrollView、ViewPager等控件，还可以用一个叫做  ViewFlipper 的类来代替实现，它 继承于 ViewAnimator。如见其名，这个类是 跟动画有关，会将添加到它里面的两个或者多个View做一个动画，然后每次只显示一个子View，通过在 View 之间切换时执行动画，最终达到一个类似相册能左右滑动的效果。 本次功能要实现的两个基本效果

---

1. 最基本的左右滑动效果
2. 从屏幕的45度方向进入和退出的效果

实现思路

---

1. 按照 ViewFlipper 的源码说明，它是将两个或多个View用动画展示出来。那么我就在 ViewFlipper 内放入两个布局，每个布局都包含一个 TextView 和 ImageView，分别用于显示文字和图片
2. 既然要有动画效果，我准备使用Android的位移动画类 TranslateAnimation，设置起始的横纵坐标值
3. 为了让效果明显，我会设置 ViewFlipper 的进入和退出屏幕的动画，并且在左滑时呈现一个动画、右滑时呈现另一个动画(需要判断是左滑还是右滑：重写 onTouchEvent 方法，比较横坐标X的值的变化)

源码如下：

---

1、主Activity

// import语句省略public class ViewFlipperDemo extends Activity {
         private static final String TAG = "ViewFlipperDemo";    private ViewFlipper mViewFlipper;    private float mOldTouchValue;    @Override    protected void onCreate(Bundle onSavedInstance) {
             super.onCreate(onSavedInstance);        // 设置为全屏        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.view_flipper_demo);        mViewFlipper = findViewById(R.id.viewFlipper1);    }    @Override    public boolean onTouchEvent(MotionEvent event) {
             switch (event.getAction()) {
                 case MotionEvent.ACTION_DOWN:                mOldTouchValue = event.getX();                break;                case MotionEvent.ACTION_UP:                    float currentX = event.getX();                    // 手指向右滑动: 手指向右滑动时横坐标 X 的值会变大，因此 currentX 的值更大                    if (mOldTouchValue < currentX) {
                             // 进入屏幕的动效                        mViewFlipper.setInAnimation(AnimationHelper.inFromLeftAnimation());                        // 退出屏幕的动效                        mViewFlipper.setOutAnimation(AnimationHelper.outToRightAnimation());                        mV