一步一步实现500px引导动画 -- 酷酷哒

一步一步实现500px引导动画 – 酷酷哒

转载请注明出处 : http://blog.csdn.net/hpu_zyh/article/details/47749859

博客主页 | 简书 | 知乎 | 微博 | github

下了500px应用, 瞬间被它的引导动画吸引住了,下面一步一步来实现引导动画

最终效果图:

---

清晰版

下面的小圆点简单的,就先省略,重点在切换动画

---

创建viewpager

可以左右随手指滑动的只有底部文字部分,所以ViewPager中存放的布局是底部文字部分
activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

先添加viewpager控件

MainActivity.java

//创建adapter
GuideAdapter adapter = new GuideAdapter(getFragmentManager());
//设置viewpager缓存页数,默认的缓存一页,因为引导页共有4页,
//所以设置缓存3页,这样所以page在滑动过程中不会重新创建
viewpager.setOffscreenPageLimit(3);
viewpager.setAdapter(adapter);

在MainActivity中,首先获取到xml中的viewpager,为viewpager设置Adapter,并且设置viewpage的缓存页数

   private List<Fragment> fragmentList = new ArrayList<>();

创建了用于填充viewpager的fragmentList

fragment00 = new GuideFragment();
fragment01 = new GuideFragment();
fragment02 = new GuideFragment();
fragment03 = new GuideFragment();

fragmentList.add(fragment00);
fragmentList.add(fragment01);
fragmentList.add(fragment02);
fragmentList.add(fragment03);

初始化fragmentList

 class GuideAdapter extends FragmentPagerAdapter {
   
        public GuideAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }

        @Override
        public int getCount() {
            return fragmentList.size();
        }
    }

GuideAdapter 继承FragmentPagerAdapter

/**
 * Created by Hanks on 2015/8/13.
 */
public class GuideFragment extends Fragment {
   
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_guide, container, false);
        return view;
    }
}

在Fragment中只是展示了一下布局

运行效果

---

开始引导动画

//给viewpager设置Pagetransformer
viewpager.setPageTransformer(false, new HKTransformer());

/**
 * by Hanks
 */
class HKTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View view, float position) {
        Log.i("", "view:    " + view + "position= " + position);
    }
}

观察滑动过程中view和position的值

从第0页到第1页,

可以看到4个页面的对应的position 从 0, 1, 2, 3 变化为 -1, 0, 1, 2

然后从第1页滑动到第2页

可以看到4个页面的对应的position 从 -1, 0, 1, 2 变化为 -2, -1, 0, 1

继续观察可以看到其中的规律,这里不再贴出图片了.

观察滑动规律

假设4个页面分别为A,B,C,D
只看第0个页面

• 从 A-B, position: 0 ~ -1
• 从 B-C, position: -1 ~ -2
• 从 C-D, position: -2 ~ -3

所以可以以其中一个view的position为标准来确定当前滑动的是哪个页面

/**
 * by Hanks
 */
class HKTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View view, float position) {
        if (fragment00.getView() == view) {
            Log.i("", "view:    " + view + "position= " + position);
            currentPosition = position;
        }

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
        } else if (position <= 1) { // (0,1]
            // Fade the page out.

            float p = Math.abs(position);
            float f = (1 - p);

            Log.i("", "p= " + p);
            // p : 1~0
            // f : 0~1


            if (-1 < currentPosition && currentPosition <= 0) {
               // A ~ B 之间的动画


            } else if (-2 < currentPosition && currentPosition <= -1) {
                //B ~  C 之间的动画


            } else if (-3 < currentPosition && currentPosition <= -2) {
                //C ~  D 之间的动画

            }


        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
        }
    }
}

在position处于(0,1]时,表示两个页面正在滑动切换,可以打印一下看看,然后就是基于上面的规律, 根据currentPosition来判断是从在哪两个页面之间滑动

开始动画

A~B界面的动画

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff">


    <ImageView
        android:id="@+id/iv_device"
        android:layout_width="340dp"
        android:layout_height="500dp"
        android:layout_centerInParent="true"
        android:scaleType="centerInside"
        android:src="@drawable/tour_device" />

    <ImageView
        android:id="@+id/iv_initial_phone"
        android:layout_width="200dp"
        android:layout_height="400dp"
        android:layout_centerInParent="true"
        android:scaleType="centerCrop"
        android:src="@drawable/tour_initial_photo" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>


</RelativeLayout>

一个手机边框 :
- scaleX : 1 ~ 2
- alpha : 1 ~ 0

中间”大人小孩”图片 :
scaleX : 1 ~ 0.5
scaleY : 1 ~ 0.5
translationY: 0 ~ -600

评论模块:
scaleX : 2 ~ 1
scaleY : 2 ~ 1
translationY: 800 ~ 0
alpha : ~ 1

iv_initial_phone.setTranslationY(-600 * f);
iv_initial_phone.setScaleX(0.5f * p + 0.5f);
iv_initial_phone.setScaleY(0.5f * p + 0.5f);
iv_device.setScaleX(1 + 2 * f);

//仔细观察iv_device是在滑到中间时就完全alpha=0了
if (p > 0.5 && p <= 1) {
    iv_device.setAlpha(2 * p - 1);
} else {
    iv_device.setAlpha(0f)