最近发现网易美学app启动页动画特效挺好玩的，于是自己也模仿写了一个。
welcome.gif
其实写起来比不复杂，仅仅是对各imageview进行重绘。话不多说，就是撸。
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:id="@+id/rl"
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_gravity="center">
<View
android:id="@+id/viewVertivcal"
android:layout_width="1px"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"/>
<View
android:id="@+id/viewHorizontal"
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_centerVertical="true"/>
<ImageView
android:id="@+id/iv6"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignRight="@id/viewVertivcal"
android:layout_alignBottom="@id/viewHorizontal"/>
<ImageView
android:id="@+id/iv5"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@mipmap/welcome_3_r_b"
android:layout_alignLeft="@id/viewVertivcal"
android:layout_alignTop="@id/viewHorizontal"
android:visibility="invisible"/>
<ImageView
android:id="@+id/iv51"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@mipmap/welcome_4_0"
android:layout_alignLeft="@id/viewVertivcal"
android:layout_alignTop="@id/viewHorizontal"
android:visibility="invisible"/>
<ImageView
android:id="@+id/iv4"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:visibility="invisible"
android:background="@mipmap/welcome_2_2"/>
<ImageView
android:id="@+id/iv3"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:visibility="invisible"
android:background="@mipmap/welcome_2_1"/>
<ImageView
android:id="@+id/iv21"
android:layout_width="200dp"
android:layout_height="250dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:background="@mipmap/welcome_2_0"
android:visibility="invisible"/>
<ImageView
android:id="@+id/iv2"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="@mipmap/welcome_1_0"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"/>
<ImageView
android:id="@+id/iv1"
android:layout_width="200dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:background="@mipmap/welcome_1_1"/>
</RelativeLayout>
</FrameLayout>
就是先把所要操作的imageview先布局出来，然后根据viewpager的滑动监听OnPageChangeListener()对相应的imageview进行位置、大小及透明度设置。
其中对各imageview操作的关键代码如下：
private void alphaAnimationIv1(float positionOffset) {
iv1.setAlpha(1.0f * (1.0f - positionOffset));
}
private void translationIv1(float positionOffset) {
int transY = (iv1Top - iv2Top) / 2;
iv1.setTop(iv1Top - ((int) (transY * positionOffset + 0.5f)));
iv1.setBottom(iv1Top + iv1Height - ((int) (transY * positionOffset + 0.5f)));
}
private void translationYIv2(float positionOffset) {
int transTop = (iv1Top - iv2Top) / 2;
int transBottom = iv1Top + iv1Height - iv2Top - iv2Height - transTop;
iv2.setTop(iv2Top + ((int) (transTop * positionOffset + 0.5f)));
iv2.setBottom(iv2Top + iv2Height + ((int) (transBottom * positionOffset + 0.5f)));
}
private void scaleIv2(float positionOffset) {
int scaleLeft = iv2Left - iv1Left;
int scaleRight = iv1Left + iv1Width - iv2Left - iv2Width;
iv2.setLeft(iv2Left - ((int) (scaleLeft * positionOffset + 0.5f)));
iv2.setRight(iv2Left + iv2Width + ((int) (scaleRight * positionOffset + 0.5)));
}
private void translationYIv21(float positionOffset){
int transTop = (iv1Top - iv21Top) / 2;
int transBottom = iv1Top + iv1Height - iv21Top - iv21Height - transTop;
iv21.setTop(iv21Top + ((int) (transTop * positionOffset + 0.5f)));
iv21.setBottom(iv21Top + iv21Height + ((int) (transBottom * positionOffset + 0.5f)));
}
private void translationIv3AndIv4(float positionOffset) {
int transLeft3 = (int) (iv3Width * (positionOffset - 0.7f) + 0.5f);
iv3.setLeft(iv3Left - transLeft3);
iv3.setRight(iv3Left + iv3Width - transLeft3);
int trasRight4 = (int) (iv4Width * (positionOffset - 0.7f) + 0.5f);
iv4.setLeft(iv4Left + trasRight4);
iv4.setRight(iv4Left + iv4Width + trasRight4);
}
private void translationXIv2AndI21AndIv3(float positionOffsetPixels) {
iv2.setLeft(iv1Left - ((int) (positionOffsetPixels + 0.5f)));
iv2.setRight(iv1Left + iv1Width - ((int) (positionOffsetPixels + 0.5f)));
iv21.setLeft(iv1Left - ((int) (positionOffsetPixels + 0.5f)));
iv21.setRight(iv1Left + iv1Width - ((int) (positionOffsetPixels + 0.5f)));
iv3.setLeft(iv3Left - ((int) (iv3Width * 0.3f + positionOffsetPixels + 0.5f)));
iv3.setRight(iv3Left + iv3Width - ((int) (iv3Width * 0.3f + positionOffsetPixels + 0.5f)));
}
private void translationIv4ToIv6(float positionOffset) {
int transTop = (int) ((iv4Top - iv6Top) * positionOffset + 0.5f);
int transLeft = (int) ((iv4Left + iv4Width * 0.3f - iv6Left) * positionOffset + 0.5f);
int transBottom = (int) ((iv4Top + iv4Height - (iv6Top + iv6Height)) * positionOffset + 0.5f);
int transRight = (int) ((iv4Left + iv4Width * 0.3f + iv4Width - (iv6Left + iv6Width)) * positionOffset + 0.5f);
iv4.setTop(iv4Top - transTop);
iv4.setLeft((int) (iv4Left + iv4Width * 0.3f - transLeft));
iv4.setBottom(iv4Top + iv4Height - transBottom);
iv4.setRight((int) (iv4Left + iv4Width + iv4Width * 0.3f - transRight));
}
private void translationIv4X(float positionOffsetPixels){
iv4.setTop(iv6Top);
iv4.setLeft((int) (iv6Left - positionOffsetPixels));
iv4.setRight((int) (iv6Left + iv6Width - positionOffsetPixels));
iv4.setBottom(iv6Top + iv6Height);
}
private void translationIv5(float positionOffset){
int transTop = (int) ((iv5Top - iv1Top) * positionOffset);
int transLeft = (int) ((iv5Left - iv1Left) * positionOffset);
int transBottom = (int) ((iv1Top + iv1Height - (iv5Top + iv5Height)) * positionOffset);
int transRight = (int) ((iv5Left + iv5Width - (iv1Left + iv1Width)) * positionOffset);
iv5.setTop(iv5Top - transTop);
iv5.setLeft(iv5Left - transLeft);
iv5.setBottom(iv5Top + iv5Height + transBottom);
iv5.setRight(iv5Left + iv5Width - transRight);
}
private void translationIv51(float positionOffset){
int transTop = (int) ((iv51Top - iv1Top) * positionOffset);
int transLeft = (int) ((iv51Left - iv1Left) * positionOffset);
int transBottom = (int) ((iv1Top + iv1Height - (iv51Top + iv51Height)) * positionOffset);
int transRight = (int) ((iv51Left + iv51Width - (iv1Left + iv1Width)) * positionOffset);
iv51.setTop(iv51Top - transTop);
iv51.setLeft(iv51Left - transLeft);
iv51.setBottom(iv51Top + iv51Height + transBottom);
iv51.setRight(iv51Left + iv51Width - transRight);
iv51.setAlpha(1.0f * positionOffset);
}
其中positionOffset、positionOffsetPixels分别对应OnPageChangeListener()中onPageScrolled()的个参数。若要查看源码可访问我的仓库。欢迎Star、Fork。
网友评论