Анимация, проведите по изображению над другим изображением

Question

Как я могу реализовать салфетки одного изображения на другом, аналогично прикрепленному изображению.

На изображении можно видеть, что фоновое изображение является статическим, и пользователь может прокрутить другое изображение. Его скриншот приложения Housing.com.

Может ли кто-нибудь помочь мне в этом. Примечание: судили за ViewPager, jazzyviewpager, вид Parallex, но без успеха

Answer 1

Таким образом, после стольких дней поиска русских реализаций я получил это точно.

Шаги для достижения: 1. Реализовать Viewpager. 2. Пользовательский просмотр пейджера с переходом. 3. Самый важный, Внедрение clipDrawable для клипа на странице предстоящего просмотра на пейджере.

Вот класс преобразования Scale использует clipdrawable: общественного класс ScalePageTransformer реализует PageTransformer { частного статического окончательного поплавок SCALE_FACTOR = 0.95f;

private final ViewPager mViewPager; 

    public ScalePageTransformer(ViewPager viewPager) { 
     this.mViewPager = viewPager; 
    } 

    @Override 
    public void transformPage(View page, float position){ 
     View mainLayout = page.findViewById(R.id.bg_rel); 
     ClipDrawable clipDrawable = (ClipDrawable) mainLayout.getBackground(); 
     if (position <= 0){ 
      // apply zoom effect and offset translation only for pages to 
      // the left 
      //    final float transformValue = Math.abs(Math.abs(position) - 1) * (1.0f - SCALE_FACTOR) + SCALE_FACTOR; 
      int pageWidth = mViewPager.getWidth(); 
      final float translateValue = position* -pageWidth; 
      //    page.setScaleX(transformValue); 
      //    page.setScaleY(transformValue); 
      if (translateValue > -pageWidth){ 
       page.setTranslationX(translateValue); 
      } else { 
       page.setTranslationX(0); 
      } 
      clipDrawable.setLevel(10000); 
     } else { 
      //entering view 
      int level = (int) ((1 - position) * 10000); 
      clipDrawable.setLevel(level); 
      mainLayout.setTranslationX(-1 * position * page.getWidth()); 
     } 
    } 
} 

rel_bg: Мое основное расположение, имеющее чертежи.

Надеюсь, это поможет кому-то.

Answer 2

Используйте специальный Viewpager (jazzy viewpager library с эффектом стека и отключите функции масштабирования внутри этого), чтобы добиться этого.