Android仿知乎日报开屏页效果

先看看知乎日报开屏页的效果,非常漂亮的开屏效果

ezgif.com-resize (2).gif

然后我来一个

ezgif.com-resize (1).gif

也不错~感觉可以以假乱真了~

很简单,直接开始。

实现这个效果先制定个三步走策略

  • 底部布局上滑展示。
  • 画一个知弧。
  • 显示图片

底部布局上滑展示

直接上代码吧,属性动画基本使用

private void startAnimation() {
    //位移动画,从底部滑出,Y方向移动,mHeight是底部布局的高度
    ObjectAnimator translationAnimator= ObjectAnimator.ofFloat(rv_bottom, "translationY", mHeight, 0f);
    //设置时长
    translationAnimator.setDuration(1000);
    //透明度渐变动画
    ObjectAnimator alphaAnimatorator = ObjectAnimator.ofFloat(rv_bottom, "alpha", 0f,1f);
    //设置时长
    alphaAnimatorator.setDuration(2500);
    //添加监听器,位移结束后,画圆弧开始
    translationAnimator.addListener(new Animator.AnimatorListener() {
      @Override
      public void onAnimationStart(Animator animation) {

      }

      @Override
      public void onAnimationEnd(Animator animation) {
        zhview.startAnimation();
      }

      @Override
      public void onAnimationCancel(Animator animation) {

      }

      @Override
      public void onAnimationRepeat(Animator animation) {

      }
    });
    AnimatorSet set = new AnimatorSet();
    //两个动画一起执行
    set.play(translationAnimator).with(alphaAnimatorator);
    //go
    set.start();
  }

在位移动画结束的时候,调用了自定义的view的方法,开始了画弧的操作。

画个知弧

接下来开始画画~ 自定义一个view,重写ondraw方法,开画之前先初始化一个合适的画笔。

 private void initPaint() {
    mPaint1 = new Paint();
    //设置画笔颜色
    mPaint1.setColor(Color.WHITE);
    // 设置画笔的样式为圆形
    mPaint1.setStrokeCap(Paint.Cap.ROUND);
    // 设置画笔的填充样式为描边
    mPaint1.setStyle(Paint.Style.STROKE);
    //抗锯齿
    mPaint1.setAntiAlias(true);
    //设置画笔宽度
    mPaint1.setStrokeWidth(mBorderWidth1);

    mPaint2 = new Paint();
    mPaint2.setColor(Color.WHITE);
    mPaint2.setStyle(Paint.Style.STROKE);
    mPaint2.setAntiAlias(true);
    mPaint2.setStrokeWidth(mBorderWidth2);
  }

mPaint1用来画弧,设置填充样式为描边,这样起码我们就能轻松画一个圆环了。其实要画的知弧就是一个圆环被啃去了一块的感觉~ 但被啃的地方很光滑,所以需要一个圆头的画笔 。
mPaint2用来画外面的圆角矩形环,设置也差不多。

@Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.BLACK);
    //矩形轮廓,圆弧在内部,给予一定的内边距
    RectF rectF1 = new RectF(mBorderWidth1/2+dipToPx(8), mBorderWidth1/2+dipToPx(8), getWidth() -mBorderWidth1/2-dipToPx(8),getWidth()-mBorderWidth1/2-dipToPx(8) );
    //画圆弧 参数1:矩形轮廓 参数2:起始位置 参数3:扫过的范围,初始为0 参数4:是否连接圆心
    canvas.drawArc(rectF1, 90, mCurrentRadian, false, mPaint1);
    //矩形轮廓
    RectF rectF2 = new RectF(mBorderWidth2/2,mBorderWidth2/2,getWidth()-mBorderWidth2/2,getWidth()-mBorderWidth2/2);
    //画圆角矩形边框 参数2 3设置x,y方向的圆角corner 都要设置
    canvas.drawRoundRect(rectF2,dipToPx(8),dipToPx(8),mPaint2);

  }

代码量很少,但要明确环的画法,不论是画圆环还是圆角矩形环,需要先确定一个基准矩形。基准矩形的位置和大小确定环的位置和大小。画弧的方法canvas.drawArc中的参数2 3设置了开始画弧的位置和画弧的范围。看一下运行效果,圆弧的起始画点在圆心的正下方,X轴正方向为0度,所以起始画点为90度。

接下来就使用不断增大画弧的范围的方式来完成动画的实现。上代码

private void startAnimationDraw() {
    //圆弧扫过范围为270度
    ValueAnimator valueAnimator=new ValueAnimator().ofFloat(0,270);
    //动画持续时间
    valueAnimator.setDuration(mDuration);
    //设置插值器,中间快两头慢
    valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    //添加状态监听器
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        //不断增大圆弧扫过的范围,并重绘来实现动画效果
        mCurrentRadian= (float) animation.getAnimatedValue();
        invalidate();
      }
    });
    valueAnimator.start();
  }

使用ValueAnimator.ofFloat创建一个值为0-270的动画,添加状态监听,在动画执行的过程中不断增大扫过的范围并重绘视图从而实现了画弧的动画效果。

整个过程就是canvas配合属性动画的方式完成了动态绘图,一点也不复杂。

显示图片

这里我使用的是Glide加载的本地图片,设置了延迟加载把握图片加载时机,获得更好的开屏效果

 //延时加载图片
        new Handler().postDelayed(new Runnable() {
          @Override
          public void run() {
            Glide.with(MainActivity.this).
                load(R.drawable.timg).
                centerCrop().
                skipMemoryCache(true).
                diskCacheStrategy(DiskCacheStrategy.NONE).
                crossFade(500).
                into(image)
            ;
          }
        },2000);

这里个人认为知乎也是用某种方式预先把图片下载到本地完成来把握精确地加载时机,不知道是不是这样。。

最后贴一下代码

activity

public class MainActivity extends AppCompatActivity {
  private RelativeLayout rv_bottom;
  private Zhview zhview;
  private float mHeight;
  private ImageView image;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    rv_bottom= (RelativeLayout) this.findViewById(R.id.rv_bottom);
    zhview= (Zhview) this.findViewById(R.id.zhview);
    image= (ImageView) this.findViewById(R.id.image);
    rv_bottom.post(new Runnable() {
      @Override
      public void run() {
        //获得底部的高度
        mHeight=rv_bottom.getHeight();
        //开始动画
        startAnimation();
        //延时加载图片
        new Handler().postDelayed(new Runnable() {
          @Override
          public void run() {
            Glide.with(MainActivity.this).
                load(R.drawable.timg).
                centerCrop().
                skipMemoryCache(true).
                diskCacheStrategy(DiskCacheStrategy.NONE).
                crossFade(500).
                into(image)
            ;
          }
        },2000);
      }
    });
  }

  private void startAnimation() {
    //位移动画,从底部滑出,Y方向移动
    ObjectAnimator translationAnimator= ObjectAnimator.ofFloat(rv_bottom, "translationY", mHeight, 0f);
    //设置时长
    translationAnimator.setDuration(1000);
    //透明度渐变动画
    ObjectAnimator alphaAnimatorator = ObjectAnimator.ofFloat(rv_bottom, "alpha", 0f,1f);
    //设置时长
    alphaAnimatorator.setDuration(2500);
    //添加监听器,位移结束后,画圆弧开始
    translationAnimator.addListener(new Animator.AnimatorListener() {
      @Override
      public void onAnimationStart(Animator animation) {

      }

      @Override
      public void onAnimationEnd(Animator animation) {
        zhview.startAnimation();
      }

      @Override
      public void onAnimationCancel(Animator animation) {

      }

      @Override
      public void onAnimationRepeat(Animator animation) {

      }
    });
    AnimatorSet set = new AnimatorSet();
    //两个动画一起执行
    set.play(translationAnimator).with(alphaAnimatorator);
    //go
    set.start();
  }
}

自定义view

public class Zhview extends View {
  private Paint mPaint1; //圆弧画笔
  private Paint mPaint2; //外框画笔
  //圆弧宽度
  private int mBorderWidth1=dipToPx(5);
  //外框宽度
  private int mBorderWidth2=dipToPx(1.5f);
  //扫过的范围
  private float mCurrentRadian=0;
  //动画持续时长
  private int mDuration=1500;

  public Zhview(Context context) {
    this(context,null);
  }

  public Zhview(Context context, @Nullable AttributeSet attrs) {
    this(context, attrs,0);

  }

  public Zhview(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    //初始化画笔
    initPaint();
  }

  private void initPaint() {
    mPaint1 = new Paint();
    //设置画笔颜色
    mPaint1.setColor(Color.WHITE);
    // 设置画笔的样式为圆形
    mPaint1.setStrokeCap(Paint.Cap.ROUND);
    // 设置画笔的填充样式为描边
    mPaint1.setStyle(Paint.Style.STROKE);
    //抗锯齿
    mPaint1.setAntiAlias(true);
    //设置画笔宽度
    mPaint1.setStrokeWidth(mBorderWidth1);

    mPaint2 = new Paint();
    mPaint2.setColor(Color.WHITE);
    mPaint2.setStyle(Paint.Style.STROKE);
    mPaint2.setAntiAlias(true);
    mPaint2.setStrokeWidth(mBorderWidth2);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.BLACK);
    //矩形轮廓,圆弧在内部,给予一定的内边距
    RectF rectF1 = new RectF(mBorderWidth1/2+dipToPx(8), mBorderWidth1/2+dipToPx(8), getWidth() -mBorderWidth1/2-dipToPx(8),getWidth()-mBorderWidth1/2-dipToPx(8) );
    //画圆弧 参数1:矩形轮廓 参数2:起始位置 参数3:扫过的范围,初始为0 参数4:是否连接圆心
    canvas.drawArc(rectF1, 90, mCurrentRadian, false, mPaint1);
    //矩形轮廓
    RectF rectF2 = new RectF(mBorderWidth2/2,mBorderWidth2/2,getWidth()-mBorderWidth2/2,getWidth()-mBorderWidth2/2);
    //画圆角矩形边框 参数2 3设置x,y方向的圆角corner 都要设置
    canvas.drawRoundRect(rectF2,dipToPx(8),dipToPx(8),mPaint2);

  }

  private void startAnimationDraw() {
    //圆弧扫过范围为270度
    ValueAnimator valueAnimator=new ValueAnimator().ofFloat(0,270);
    //动画持续时间
    valueAnimator.setDuration(mDuration);
    //设置插值器,中间快两头慢
    valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    //添加状态监听器
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        //不断增大圆弧扫过的范围,并重绘来实现动画效果
        mCurrentRadian= (float) animation.getAnimatedValue();
        invalidate();
      }
    });
    valueAnimator.start();
  }
  //开始动画
  public void startAnimation(){
    startAnimationDraw();
  }
  private int dipToPx(float dip) {
    float density = getContext().getResources().getDisplayMetrics().density;
    return (int) (dip * density + 0.5f * (dip >= 0 ? 1 : -1));
  }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@android:color/black"
  tools:context="com.zhview.MainActivity">

  <ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/rv_bottom" />

  <RelativeLayout
    android:id="@+id/rv_bottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:padding="20dp">

    <com.zhview.Zhview
      android:id="@+id/zhview"
      android:layout_width="46dp"
      android:layout_height="46dp"
      android:layout_marginLeft="10dp" />

    <TextView
      android:id="@+id/tv_title"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginLeft="20dp"
      android:layout_toRightOf="@+id/zhview"
      android:text="知乎日报"
      android:textColor="@android:color/white"
      android:textSize="19sp"

      />

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignBottom="@+id/zhview"
      android:layout_marginLeft="20dp"
      android:layout_toRightOf="@+id/zhview"
      android:text="每天三次,每次七分钟"
      android:textColor="@android:color/darker_gray"
      android:textSize="13sp" />
  </RelativeLayout>
</RelativeLayout>

我个人挺喜欢这些实现起来不复杂但体验非常好的设计,见到了就努力实现一下,然后边学边分享,要是跟我一样感兴趣的话可以关注我一下哦~

完整代码地址https://github.com/yanyiqun001/zhview

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-06-20

Android模仿知乎的回答详情页的动画效果

废话不多说,咱们第一篇文章就是模仿"知乎"的回答详情页的动画效果,先上个原版的效果图,咱们就是要做出这个效果 在实现之前,我们先根据上面的动画效果,研究下需求,因为gif帧数有限,所以不是很连贯,推荐你直接下载一个知乎,找到这个界面自己玩玩 ☞当文章往上移动到一定位置之后,最上面的标题栏Bar和问题布局Title是会隐藏的,回答者Author布局不会隐藏 ☞当文章往下移动移动到一定位置之后,原先隐藏的标题栏Bar和问题布局Title会下降显示 ☞当文章往上移动的时候,下部隐藏的Tool

Android开屏页倒计时功能实现的详细教程

最近我司产品提出了一个很常见的需求:App 在开屏页(Splash 界面) 需要加上一个 3s 倒计时按钮,可以选择看 3s 的广告,或者点击按钮跳过广告. 一.布局实现(使用 FrameLayout 悬浮在广告的右上角,显示倒计时的 TextView 的宽高尽量不要写死,要考虑字体很多的情况!!) <FrameLayout android:id="@+id/start_skip" android:layout_width="wrap_content" and

Material Design系列之Behavior实现Android知乎首页

本博客目的:仿知乎首页向上滑动时动画隐藏Toolbar.FlocationActionButton.Tab导航,下滑时显示,如果和你的期望不同,那么你可以不需要看了,免的浪费你的宝贵时间噢. 效果预览 知乎效果: 本博客实现效果: 今天效果的源代码下载链接在文章末尾. 实现分析 这个效果其实并不难实现,但是它的用处很大,当用户手指上滑,屏幕上显示下方内容的时候,隐藏Toolbar.Tab导航.FAB来腾出更大的空间显示内容,让用户爽.简单粗暴,但这就是我们的目的. 首先就是头部的Toolbar,

Material Design系列之Behavior实现支付密码弹窗和商品属性选择效果

今天的效果在支付宝.淘宝.京东等电商App中很常见.比如支付宝输入密码弹窗.商城下单时选择商品属性时,从下面浮动上来一个PopupWindow,那么今天就带大家用Behavior来实现这两个效果,结果你会发现简直只需要一行代码. 总结下现在用的APP: 1. 仿支付宝弹出的输入支付密码窗口. 2. 仿淘宝/天猫弹出商品属性选择框. 3. 知乎首页上下滑动隐藏ToolBar和NavigationBar. 4. - 系列博客: 1. Material Design系列,Behavior之Bottom

Material Design系列之Behavior上滑显示返回顶部按钮

效果预览 源码在文章末尾. 引文 有时候我们的页面内容过长的时候,滑动到页面底部用户再滑动到顶部很麻烦,Android不像iOS可以点击statusBar回到顶部,一般都是双击Toolbar/ActionBar或者在底部放一个按钮. 今天就底部放一个回到顶部按钮这个效果来做一个基于Behavior的实现.那么我们传统的方式来做就是监听这个滑动View,比如:ScrollView/ListView/RecyclerView/GridView等,那么如果我们使用了CoordinatorLayout,

Material Design系列之自定义Behavior支持所有View

本文实例为大家分享了Android自定义Behavior支持所有View ,供大家参考,具体内容如下 一.实现效果图 这个右下角的FAB,动画当然可以多种多样,可以放在界面的任何地方,我们这里只举个例子.但是v7包中提供的Behavior目前只能是FloatingActionButton来用,所以今天我们实现的这个Behavior是支持所有的View的,可以用在ImageView.Button.Layout,只要是继承View的类都可以用. 二.自定义Behavior和动画的封装 我们知道Beh

Android构建Material Design应用详解

长久以来.Android的UI并不算美观,以至于很多IT公司在进行界面设计的时候,为了保证双平台的统一性,强烈要求Android端的界面风格必须与iOS端一致,我认为这里非常不合理的,同一操作系统中各个应用之间的界面统一性要远比一个应用在双平台的界面统一性重要的多,只有这样,才能给使用者带来更好的用户体验.为了解决这个问题,Google公司在2014年IO大会上推出了一套全新的界面设计语言--Material Design(材料设计语言),这次Google在界面设计上确实下足了功夫,一个词,好看

学习使用Material Design控件(四)Android实现标题栏自动缩放、放大效果

本文要实现内容移动时,标题栏自动缩放/放大的效果,效果如下: 控件介绍 这次需要用到得新控件比较多,主要有以下几个: CoordinatorLayout 组织它的子views之间协作的一个Layout,它可以给子View切换提供动画效果. AppBarLayout 可以让包含在其中的控件响应被标记了ScrollingViewBehavior的View的滚动事件 CollapsingToolbarLayout 可以控制包含在CollapsingToolbarLayout其中的控件,在响应colla

Android Material Design 阴影实现示例

本文介绍了Android Material Design 阴影实现示例,分享给大家,具体如下: 让 View 产生阴影有以下 4 种方式: 控制 elevation 使用 OutlineProvider 使用 9 图 使用 MD 风格的控件,如 CardView,FloatingActionButton 0.Z轴的概念 Android 在 5.0 及以后采用了 Material Design 设计语言,引入了 Z 轴的概念,也就是垂直于屏幕的轴,Z 轴会让 View 产生阴影的效果: 想象有一束

Android5.0中Material Design的新特性

 Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干净的排版和简单的布局,以此来突出内容. Material Design对排版.材质.配色.光效.间距.文字大小.交互方式.动画轨迹都做出了建议,以帮助设计者设计出符合Material Design风格的应用. Material Design设计语言鼓励大家使用充满活力的鲜艳色彩,并在同一界面建议使用三种色调,并保障有一个强色调,

学习使用Material Design控件(一)

Google 发布的Material Design支持库,对我们的APP设计有很大的影响,如果重新设计APP,支持库应该直接用V4提升到V7了,我们可以用Toolbar代替ActionBar,以及引入了RecycleView, SnakeBar等新控件. 我写了一个Demo来学习使用这些新控件. 新建项目,加入依赖包 我们使用Android Studio来开发这个Demo,在Android Studio新建一个项目,修改App Module的build.gradle文件,把compileSdkV

基于Bootstrap实现Material Design风格表单插件 附源码下载

Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件.该表单通过自定义样式和jQuery来将Bootstrap的表单修改为扁平风格的表单,并带有浮动标签特效. 在线预览         源码下载 使用方法 使用该Material Design风格表单需要在页面中引入jquery,bootstrap相关文件和materialFormStyles.css.materialForm.js文件. <link rel=