高仿小红书引导页实现效果

立即下载用AI写一个

发布时间：2017-09-28

4人 | 浏览：7235次 | 收藏 |

技术：Android

运行环境：jdk1.7 + minSdk 19 + maxSdk 25 + buildToolsVersion 25.0.1

概述

1.本Demo是高仿小红书2017年8月的引导页效果。 2.Demo展示的效果是通过ViewPager的滑动监听和属性动画来实现的。 3.学习和参考只是了解动画的实现方式，让大家也能够实现这样有意思的效果。 4.该效果难度系数并不高，适合初学者，以及属性动画刚了解的同学学习。

详细

### 演示效果

![暂时先借用小红帽图片素材的app效果来演示
](/contentImages/image/20170928/mJegwYOjLiGWqlmnG28.gif)

【暂时先借用小红帽图片素材的app效果来演示】

### 文件结构

（1）Android层的代码实现

（2）实现效果Gif一张

### 代码实现过程：

#### 第三方库

（1）butterknife

通过Gradle引入

（2）viewpagerindicator

通过Model引入

#### 代码层

（1）在ViewPager的滑动监听做处理
```
    mNewVp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

private int lastOffset = -1;

@Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                Log.d("onPageScrolled参数", "position  : " + position + "---" + "positionOffset : " + positionOffset + "---" + "positionOffsetPixels : " + positionOffsetPixels);
                //-----------------------------第一部分------------------------------------
                if (position == 0) {
                  settingOne(positionOffset);
                } else if (position == 1) {
                    settingTwo(positionOffset);
                } else if (position == 2) {
                    mHintFragment.startHintAnim();
                }
                //----------------------------第二部分--------------------------------------
                if (lastOffset >= positionOffsetPixels) {
                    //右滑
                    Log.d("方向", "右");
                } else if (lastOffset < positionOffsetPixels && position == 1) {
                    //左滑
                    Log.d("方向", "左");
                    mHintFragment.endHintAnim();
                }
                lastOffset = positionOffsetPixels;
            }

@Override
            public void onPageSelected(int position) {
 
            }

@Override
            public void onPageScrollStateChanged(int state) {

}
        });
```

### 第一部分

第一部分主要控制各个页面滑动的效果：

```
控制第一个页面
settingOne()

控制第二个页面
settingTwo()

控制第三个页面
mHintFragment.startHintAnim();

```
第三个页面没有额外的头像动画，只是有个提示的弹出的效果，这是在Fragment中实现的。

#### settingOne 方法

* 设置第一个界面滑动
     */
    private void settingOne(float positionOffset) {
        //位移
        int[] size = ((NewFragment) fragments.get(0)).getContentSize();
        int xMove = (int) (size[0] * 0.53);
        int yMove = (int) (size[1] * 0.47);
        mAccountIv.setTranslationX(positionOffset * xMove);
        mAccountIv.setTranslationY(positionOffset * yMove);
        //大小改变
        int moveSize = (int) (startSize * 0.4);
        ViewGroup.LayoutParams params = mAccountIv.getLayoutParams();
        params.width = (int) (dip2px(startSize) - dip2px(moveSize) * positionOffset);
        params.height = (int) (dip2px(startSize) - dip2px(moveSize) * positionOffset);
        mAccountIv.setLayoutParams(params);
    }

这个方法主要是先设置好头像的滑动空间的比率：

然后通过控制ViewPager的滑动距离，一点一点移动到需要移动的位置。

通过setTranslationX和setTranslationY实现的。

mAccountIv.setTranslationX(positionOffset * xMove);
        mAccountIv.setTranslationY(positionOffset * yMove);

而变化大小，则通过改变LayoutParams来实现的

ViewGroup.LayoutParams params = mAccountIv.getLayoutParams();
        params.width = (int) (dip2px(startSize) - dip2px(moveSize) * positionOffset);
        params.height = (int) (dip2px(startSize) - dip2px(moveSize) * positionOffset);

这里的mAccountIv指的就是头像。

### settingTwo 方法

private void settingTwo(float positionOffset) {
        //位移
        int[] size = ((NewFragment) fragments.get(1)).getContentSize();
        int xMove = (int) (size[0] * 0.53);
        int yMove = (int) (size[1] * 0.47);
        mAccountIv.setTranslationX(xMove * (1 - positionOffset));
        mAccountIv.setTranslationY(yMove * (1 - positionOffset));
        //大小改变
        int moveSize = (int) (startSize * 0.4);
        ViewGroup.LayoutParams params = mAccountIv.getLayoutParams();
        params.width = (int) (dip2px(startSize - moveSize) + dip2px(moveSize) * positionOffset);
        params.height = (int) (dip2px(startSize - moveSize) + dip2px(moveSize) * positionOffset);
        mAccountIv.setLayoutParams(params);
    }

这个方法和settingOne类似这里就不做多介绍了。

### startHintAnim 方法

这个方法只是做了一个属性动画

/**
     * 开启提示动画
     */
    public void startHintAnim() {
        if (mHintTv.getX() < 0) {
            mHintTv.postDelayed(new Runnable() {
                @Override
                public void run() {
                    int width = mHintTv.getWidth();
                    ValueAnimator animator = ObjectAnimator.ofFloat(mHintTv, "translationX", -width, 0);
                    animator.setDuration(650);
                    animator.start();
                }
            }, 350);
        }
    }
	
	
### endHintAnim 方法

/**
     * 结束提示动画
     */
    public void endHintAnim() {
        if (mHintTv.getX() == 0) {
            int width = mHintTv.getWidth();
            ValueAnimator animator = ObjectAnimator.ofFloat(mHintTv, "translationX", 0, -width);
            animator.setDuration(400);
            animator.start();
        }
    }

### 项目目录截图
![](/contentImages/image/20170928/k6LvUmqK9AjtEnM9iOo.png)

### 备注

剩下具体的实现逻辑在Demo中，可以具体看到。

如果大家在Demo的运行的过程中遇到问题可以联系我的邮箱：

issuperd@foxmail.com

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

高仿小红书引导页实现效果

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子