Android animate Image View синхронно при прокрутке ViewPager

Question

У меня есть пейджер вида, который при прокрутке должен анимировать вид изображения в направлении прокрутки. Вид изображения должен анимироваться влево или вправо в зависимости от значения X позиции ребенка пейджера вида. Вид изображения должен анимация синхронно с прокруткой View Pager. В приведенном ниже коде eat - это ImageView, который я хочу анимировать в зависимости от прокрутки. Я так старался, что ни к чему не дотянул ... было бы большим облегчением ...

Скриншот:

ViewPageListener.java:

         binding.viewpager.addOnPageChangeListener(new 
          ViewPager.OnPageChangeListener() {
                        @Override
                        public void onPageScrolled(int position, float 
          positionOffset, int positionOffsetPixels) {   

  binding.viewpager.getChildAt(position).getLocationOnScreen(view_pager_child_location);
                      binding.eat.getLocaionOnScreen(outLocation);
            ObjectAnimator objectAnimator=ObjectAnimator.ofFloat(binding.eat,"x",binding.eat.getX(),binding.eat.getX()-20);
    //                objectAnimator.setInterpolator(new LinearInterpolator());
    //                objectAnimator.setDuration(200);
    //                objectAnimator.addListener(new AnimatorListenerAdapter() {
    //                    @Override
    //                    public void onAnimationEnd(Animator animation) {
    //                        super.onAnimationEnd(animation);
    //
    //
    //                    }
    //                });
    //                objectAnimator.start();


            }
                        @Override
                        public void onPageSelected(int position) {

                            }
            }

                        @Override
                        public void onPageScrollStateChanged(int state) {
                        Log.e("State",Integer.toString(state));
                        }
                    });

viewpagerlayout.xml:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ripple="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >
    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     android:background="@drawable/masked_splash"   >
    <ImageView
    android:layout_width="@dimen/intro_logo_wdth"
    android:layout_height="@dimen/intro_logo_hght"
    android:background="@drawable/splash_logo"
    android:layout_centerHorizontal="true"
    android:id="@+id/msked_splsh_logo"
    android:layout_marginTop="@dimen/intro_logo_mrgnTop"/>
    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/intro_detlyt"
    android:background="#ffffff"
    android:layout_marginTop="@dimen/intro_det_lyt_top_mrgn">
<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:id="@+id/viewpager"
    android:layout_marginTop="@dimen/intro_lbl_topMrgn">
</android.support.v4.view.ViewPager>
 <RelativeLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
    android:layout_below="@+id/viewpager"
     android:layout_centerHorizontal="true"
     android:layout_marginTop="@dimen/indicator_topmrgn"
     android:gravity="center"
     >

     <ImageView
         android:layout_width="5dp"
         android:layout_height="5dp"
         android:id="@+id/indicato1"
         android:background="@drawable/radio_check"
         />
     <ImageView
         android:layout_width="5dp"
         android:layout_height="5dp"
         android:id="@+id/indicato2"
         android:layout_marginLeft="5dp"
         android:layout_toRightOf="@+id/indicato1"
         android:background="@drawable/radio_uncheck"
         />

     <ImageView
         android:layout_width="5dp"
         android:layout_height="5dp"
         android:id="@+id/indicato3"
         android:layout_marginLeft="5dp"
         android:layout_toRightOf="@+id/indicato2"
         android:background="@drawable/radio_uncheck"
         />
 </RelativeLayout>
</RelativeLayout>
    <ImageView
        android:layout_width="@dimen/intro_det_lyt_img1_wdth"
        android:layout_height="@dimen/intro_det_lyt_img1_hght"
        android:id="@+id/eat"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_marginEnd="@dimen/intro_img_mrgnRght"
        android:layout_marginTop="@dimen/intro_img_topmrgn"
        android:background="@drawable/eat"
        android:layout_alignParentRight="true"
        android:layout_marginRight="@dimen/intro_img_mrgnRght" />
    <com.balysv.materialripple.MaterialRippleLayout
        android:id="@+id/ripple"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:mrl_rippleDuration="350"
        android:layout_alignParentBottom="true"
        app:mrl_rippleColor="#ff0000"
        app:mrl_rippleOverlay="true" >
    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/getstarted_lyt"
   >
        <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/start"
        android:text="GET STARTED"
        android:textAlignment="center"
        android:gravity="center"
        android:layout_centerVertical="true"
        android:textColor="#ffffff"
        android:background="@drawable/button_bg"
        />
    <ImageView
        android:layout_width="15dp"
        android:layout_height="20dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="30dp"
        android:background="@drawable/arrow"
        android:layout_alignParentRight="true"
        android:layout_marginEnd="30dp" />

</RelativeLayout>
    </com.balysv.materialripple.MaterialRippleLayout>
    </RelativeLayout>
</layout>

Answer 1

Я предполагаю, что вы хотите перевести ImageView базу на смещение прокрутки ViewPager.

Вы можете использовать positionOffset или positionOffsetPixels для расчета перевода. positionOffset - это смещение, которое начинается от 0 -> 1, если вы проводите пальцем влево, и 0> -1 из вас проведите пальцем вправо (убедитесь в этом сами). positionOffsetPixels - реальное смещение в пикселях.

Переведите ImageView внутрь onPageScrolled:

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    binding.eat.animate().translateX(positionOffset * -20).setDuration(0).start();
}