Depth-LIB-Android - 酷炫的Android特效

jkhunter517 8年前
   <p>前些日子在微信朋友圈看到一个朋友发了一个很酷的Android特效,对于喜欢酷炫效果的我来说,真的好想知道它是怎么搞出来的!于是,在知道Google商店可以下载,我反编译了这个Demo并把源码开源到Github上,当然,目的只是想让很多喜欢这个东西的朋友知道是怎么实现的。我以为只要把原作者是谁说明了,就可以开源了,果然还是太年轻了。</p>    <p><img src="https://simg.open-open.com/show/44623fe72553a5f7ba0b0074c45109eb.gif"></p>    <p>那天晚上,代码家的干货群就讨论了我未经作者同意开源源代码的事。我看到后,意识到自己错了,就马上删了!drakeet给了我原作者的联系方式,我也发了邮件向作者说了这件事!</p>    <p><img src="https://simg.open-open.com/show/ecf349864fcc9748980173ff53698305.jpg"></p>    <p><br> 没错,果然今天作者就在Github上开源了! 源码下载地址:<a href="/misc/goto?guid=4959672006413788721">戳我</a></p>    <p>因为之前就看了源码实现,也有朋友叫我写一篇分析文,今天我带大家看看它是怎么实现的!</p>    <p><strong>一、小说界面过渡动画</strong></p>    <p><img src="https://simg.open-open.com/show/289f4d4a225104d844fa92f360f29b7a.gif"></p>    <p><br> (1)点击Fab,开启过渡界面动画效果,监听事件如下:</p>    <pre>  <code class="language-java">   root.findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {              @Override              public void onClick(View v) {                  root.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {                      @Override                      public void onGlobalLayout() {//在一个视图树中的焦点状态发生改变时,所要调用的回调函数的接口类                          root.getViewTreeObserver().removeOnGlobalLayoutListener(this);                          TransitionHelper.startExitAnim(root);//当前界面离开时的动画                      }                  });                  WindFragment windFragment = new WindFragment();                  windFragment.setIntroAnimate(true);//设置WindFragment的动画标志                   ((RootActivity) getActivity()).goToFragment(windFragment);//添加进入的Fragment                  /**佘略部分代码**/              }          });</code></pre>    <p>这里退出动画的实现是这句<code>TransitionHelper.startExitAnim(root)</code>,传入的参数是当前Fragment的视图root。<code>TransitionHelper</code>是个动画实现类,主要做了视图进入、离开、恢复这些动画。我们进去看看退出动画的实现。源码如下:</p>    <pre>  <code class="language-java">    public static void startExitAnim(View root) {          exitAnimate((DepthLayout) root.findViewById(R.id.root_dl), 0, 30f, 15, 190, true);          exitAnimate((DepthLayout) root.findViewById(R.id.appbar), MOVE_Y_STEP, 20f, 30, 170, true);          exitAnimate((DepthLayout) root.findViewById(R.id.fab_container), MOVE_Y_STEP * 2f, 20f, 45, 210, true);          exitAnimate((DepthLayout) root.findViewById(R.id.dl2), MOVE_Y_STEP, 20f, 60, 230, true);          exitAnimate((DepthLayout) root.findViewById(R.id.dl3), MOVE_Y_STEP * 2, 20f, 75, 250, true);      }</code></pre>    <p>以上代码,你可以看出<code>startExitAnim</code>对当前Fragment的视图Root的每个子控件都做了不一样的动画,具体是实现是在<code>exitAnimate(...)</code>方法中,代码比较多,我就不贴了。<br> 主要是开启了6个ObjectAnimator动画做了view的旋转、缩放、平移、阴影等动画,其中有句代码很关键<code>View.setCameraDistance()</code>,设置Camera的距离,表现出透视效果。</p>    <p>一个Fragment做了离开的动画,我们看看它进入的Fragment动画是怎么实现的!上文中Fab监听的代码里有这句<code>getActivity()).goToFragment(windFragment)</code>,应该就是另一个Framgen进入的逻辑实现了,跟进去看看!</p>    <pre>  <code class="language-java">   public void goToFragment(final Fragment newFragment) {          getFragmentManager().beginTransaction().add(R.id.fragment_container, newFragment).commit();//添加新的fragment          final Fragment removeFragment = currentFragment;//记录要移除的Fragment          currentFragment = newFragment;          getWindow().getDecorView().postDelayed(new Runnable() {              @Override              public void run() {//延迟两秒后,删除记录删除的Fragment                  getFragmentManager().beginTransaction().remove(removeFragment).commit();              }          }, 2000);      }</code></pre>    <p>握草,没看到进入的Framgent的动画,奇了怪了。我们进入 WindFragment 看具体实现!你会发现在<code>onCreateView</code>实现了。</p>    <pre>  <code class="language-java">    @Override      public View onCreateView(LayoutInflater inflater, ViewGroup container,                               Bundle savedInstanceState) {          root = inflater.inflate(R.layout.fragment_wind, container, false);          ......          doIntroAnimation();//进入动画          .....          return root;      }</code></pre>    <p>而<code>doIntroAnimation</code>方法中调用了<code>TransitionHelper.startIntroAnim(...)</code>,你会看到</p>    <pre>  <code class="language-java"> public static void startIntroAnim(View root, AnimatorListenerAdapter introEndListener) {          introAnimate((DepthLayout) root.findViewById(R.id.root_dl), 0, 30f, 15, 180);          introAnimate((DepthLayout) root.findViewById(R.id.appbar), MOVE_Y_STEP, 20f, 30, 170);          introAnimate((DepthLayout) root.findViewById(R.id.fab_container), MOVE_Y_STEP * 2f, 20f, 45, 190);          introAnimate((DepthLayout) root.findViewById(R.id.dl2), MOVE_Y_STEP, 20f, 60, 200);          introAnimate((DepthLayout) root.findViewById(R.id.dl3), MOVE_Y_STEP * 2, 20f, 75, 210).addListener(introEndListener);      }</code></pre>    <p>这个逻辑有和界面离开时的参不多,开启了多个ObjectAnimator动画做了view的旋转、缩放、平移、阴影等动画。</p>    <p>细心的你会发现,我给的效果和设计图的不同啊,没错,如果只是做过渡动画,还达不到很酷炫的效果,这里还有阴影的效果。</p>    <p><strong>二、小说绘制布局阴影</strong></p>    <p><img src="https://simg.open-open.com/show/6f49119b4dc254f306ee7e868210bfae.jpg"></p>    <p><br> 上图看到出,阴影效果很明显。我们看看Fragment的xml布局是这样的</p>    <pre>  <code class="language-java"><no.agens.depth.lib.DepthRendrer      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"      tools:context=".sample.WaterFragment"      >        <no.agens.depth.lib.DepthLayout          android:id="@+id/appbar"          android:layout_width="match_parent"          android:layout_height="@dimen/appbar_height"          android:background="@color/green"          android:layerType="hardware"          app:edge_color="@color/statusbar2"          >            <ImageView              />        </no.agens.depth.lib.DepthLayout>        ......        <no.agens.depth.lib.DepthLayout          android:id="@+id/fab_container"              ......          >          <android.support.design.widget.FloatingActionButton              ......              />      </no.agens.depth.lib.DepthLayout>    </no.agens.depth.lib.DepthRendrer></code></pre>    <p>你会发现都是一个外层DepthRendrer控件里有几个DepthLayout控件,而DepthRendrer和DepthLayout都继承RelativeLayout。DepthRendrer在初始化的时候设置了视图树中的焦点状态改变时,回调函数监听,计算绘制DepthLayout阴影的范围。</p>    <pre>  <code class="language-java">void setup() {          getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {              @Override              public boolean onPreDraw() {                  for (int i = 0; i < getChildCount(); i++) {//遍历子控件                      View child = getChildAt(i);                      if (child instanceof DepthLayout) {                          //如果是DepthLayout控件 ,就调用DepthLayout的calculateBounds方法计算要绘制阴影的范围                          boolean hasChangedBounds = ((DepthLayout) child).calculateBounds();                          if (hasChangedBounds)                              invalidate();                      }                  }                  return true;              }          });</code></pre>    <p><code>invalidate</code>会调用DepthRendrer中的</p>    <p><code>drawChild(Canvas canvas, View child, long drawingTime)</code>,绘制子 控件阴影。</p>    <pre>  <code class="language-java">    @Override      protected boolean drawChild(Canvas canvas, View child, long drawingTime) {          if (child instanceof DepthLayout && !isInEditMode()) {              DepthLayout dl = (DepthLayout) child;              float[] src = new float[]{0, 0, dl.getWidth(), 0, dl.getWidth(), dl.getHeight(), 0, dl.getHeight()};              if (dl.isCircle()) {//控件是否适圆形的                  dl.getCustomShadow().drawShadow(canvas, dl, roundSoftShadow);                  if (Math.abs(dl.getRotationX()) > 1 || Math.abs(dl.getRotationY()) > 1)                      drawCornerBaseShape(dl, canvas, src);              } else {                  dl.getCustomShadow().drawShadow(canvas, dl, softShadow);                  if (dl.getRotationX() != 0 || dl.getRotationY() != 0) {                      if (getLongestHorizontalEdge(dl) > getLongestVerticalEdge(dl))                          drawVerticalFirst(dl, canvas, src);                      else                          drawHorizontalFist(dl, canvas, src);                  }              }          }          return super.drawChild(canvas, child, drawingTime);      }</code></pre>    <p>这句代码主要是针对不同的控件绘制不同的阴影,比如矩形和圆形绘制阴影的方法是不一样的。</p>    <p><strong>三、小小总结</strong></p>    <p><img src="https://simg.open-open.com/show/e930a39ac36d03d550d8f3be2c54358c.gif"></p>    <p>,<br> 做到以上两步,基本上我们就可以得到上图的效果了,<br> 你会发现,现在看来这些酷炫的效果也只是一些简单的动画组合而成,在绘制好界面,就能弄出不错的效果了,看源码中,我能看出作者对细节的设计真的很用心!至于界面中的波浪、两只小熊的效果有时间说说,你有兴趣看看源码实现,其实也挺简单的。啊对了,这个酷炫的东西最低版本支持21,也就是说4.0系统的手机,只能呵呵哒了。</p>    <p>最后:在简书开坑写文章,呵呵,欢迎关注,最好是来批我的,这样我才能进步啊!</p>    <p>最后的之后:明天就是假期了,祝大家玩的开心点。</p>    <p> </p>    <p>文/<a href="/misc/goto?guid=4959672006508495855">小说家CJJ</a>(简书)<br>  </p>