Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save mkiisoft/430308896a18a03ef57d to your computer and use it in GitHub Desktop.
Save mkiisoft/430308896a18a03ef57d to your computer and use it in GitHub Desktop.
Parallax transformer for ViewPagers that let you set different parallax effects for each view in your Fragments.
package com.aracem.utils.animations.pagetransformation;
import org.jetbrains.annotations.NotNull;
import android.support.v4.view.ViewPager;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
/**
* Parallax transformer for ViewPagers that let you set different parallax
* effects for each view in your Fragments.
*
* Created by Marcos Trujillo (#^.^#) on 1/10/14.
*/
public class ParallaxPageTransformer implements ViewPager.PageTransformer {
private List<ParallaxTransformInformation> mViewsToParallax
= new ArrayList<ParallaxTransformInformation>();
public ParallaxPageTransformer() {
}
public ParallaxPageTransformer(@NotNull List<ParallaxTransformInformation> viewsToParallax) {
mViewsToParallax = viewsToParallax;
}
public ParallaxPageTransformer addViewToParallax(
@NotNull ParallaxTransformInformation viewInfo) {
if (mViewsToParallax != null) {
mViewsToParallax.add(viewInfo);
}
return this;
}
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) {
// This page is way off-screen to the left.
view.setAlpha(1);
} else if (position <= 1 && mViewsToParallax != null) { // [-1,1]
for (ParallaxTransformInformation parallaxTransformInformation : mViewsToParallax) {
applyParallaxEffect(view, position, pageWidth, parallaxTransformInformation,
position > 0);
}
} else {
// This page is way off-screen to the right.
view.setAlpha(1);
}
}
private void applyParallaxEffect(View view, float position, int pageWidth,
ParallaxTransformInformation information, boolean isEnter) {
if (information.isValid() && view.findViewById(information.resource) != null) {
if (isEnter && !information.isEnterDefault()) {
view.findViewById(information.resource)
.setTranslationX(-position * (pageWidth / information.parallaxEnterEffect));
} else if (!isEnter && !information.isExitDefault()) {
view.findViewById(information.resource)
.setTranslationX(-position * (pageWidth / information.parallaxExitEffect));
}
}
}
/**
* Information to make the parallax effect in a concrete view.
*
* parallaxEffect positive values reduces the speed of the view in the translation
* ParallaxEffect negative values increase the speed of the view in the translation
* Try values to see the different effects. I recommend 2, 0.75 and 0.5
*/
public static class ParallaxTransformInformation {
public static final float PARALLAX_EFFECT_DEFAULT = -101.1986f;
int resource = -1;
float parallaxEnterEffect = 1f;
float parallaxExitEffect = 1f;
public ParallaxTransformInformation(int resource, float parallaxEnterEffect,
float parallaxExitEffect) {
this.resource = resource;
this.parallaxEnterEffect = parallaxEnterEffect;
this.parallaxExitEffect = parallaxExitEffect;
}
public boolean isValid() {
return parallaxEnterEffect != 0 && parallaxExitEffect != 0 && resource != -1;
}
public boolean isEnterDefault() {
return parallaxEnterEffect == PARALLAX_EFFECT_DEFAULT;
}
public boolean isExitDefault() {
return parallaxExitEffect == PARALLAX_EFFECT_DEFAULT;
}
}
}
// Example of use
// Views affected. Background & 'horizontal phone image'
// You can watch this video with the result https://www.youtube.com/watch?v=3fp5Bdk29OQ&feature=youtu.be
ParallaxPageTransformer pageTransformer = new ParallaxPageTransformer()
.addViewToParallax(new ParallaxTransformInformation(R.id.img_background, 2, 2))
.addViewToParallax(new ParallaxTransformInformation(R.id.tutorial_img_phone, -0.65f,
PARALLAX_EFFECT_DEFAULT));
mViewPager.setPageTransformer(true, pageTransformer);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment