<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          Android實現(xiàn)界面3D立體旋轉(zhuǎn)效果

          共 2835字,需瀏覽 6分鐘

           ·

          2022-06-26 17:07

          如下圖所示:


          如圖所示,當手勢從右向左滑動的時候A界面切換到B界面,中間的動畫是一種3D旋轉(zhuǎn)動畫。


          為了實現(xiàn)這種效果,我們可以想一想,既然是手勢滑動而且還是橫向滑動,自然就想到了ViewPager。


          問題是怎樣實現(xiàn)這種動畫效果?  


          viewPager默認的動畫效果就是橫向平移效果,但是也為我們開放了添加動畫的接口,滿足各種需求,那就是:

          viewpager.setPageTransformer(boolean reverseDrawingOrder,@Nullable PageTransformer transformer);


          接收兩個參數(shù),重點關(guān)注第二個參數(shù):PageTransformer.是一個interface接口,需要我們?nèi)崿F(xiàn)它。

          public  class BasePageTransformer implements ViewPager.PageTransformer {
          @Override public void transformPage(View view, float position) { Log.e("position",position+""); }}


          實現(xiàn)了transformPage并且回調(diào)了一個View和position,view一定是指當前的顯示的view,而position通過Log打印可以發(fā)現(xiàn):



          上圖是向左滑動時,position的變化示意圖:


          • 當向左滑動時, position會返回每個頁面的區(qū)間變化值,如果設(shè)置預加載值為1(默認為1),就會返回3個區(qū)間變化值。分別是前一個界面左邊邊界的變化值[-2,-1] ; 當前界面左邊邊界的變化值[-1,0] ; 后一個界面左邊邊界的變化值[0,1].對應上圖position就應該是: 左邊:p1(-1 到 -2 ); 當前:p2(0 到 -1 ); 右邊:p3(1 到 0 );

          • 當向右滑動時, position會返回每個頁面的區(qū)間變化值,如果設(shè)置預加載值為1(默認為1),就會返回3個區(qū)間變化值。分別是前一個界面右邊邊界的變化值[-1,0] ; 當前界面右邊邊界的變化值[0,1] ; 后一個界面右邊邊界的變化值[1,2].對應上圖position就應該是: 左邊:p1(-1 到 0 ); 當前:p2(0 到 1 ); 右邊:p3(1 到 2 );


          有上面兩點可以觀察到,[-1,0]和[0,1]這兩個變化區(qū)間,無論是向左還是向右滑都會出現(xiàn),而且變化方向正好相反,也是用戶可見的變化區(qū)間.所有我們只用關(guān)注這兩個區(qū)間。


          • 當向左滑動時,position的由0趨向于-1,記做[-1,0],是一個隨滑動不斷變化的值

          • 當向右滑動時,position的由0趨向于1,記做(0,1],是一個隨滑動不斷變化的值


            既然是橫向旋轉(zhuǎn)動畫,那就可以根據(jù)這個隨手滑動變化的值改變旋轉(zhuǎn)的角度就可以了.

          public abstract class BasePageTransformer implements ViewPager.PageTransformer {
          @Override public void transformPage(View view, float position) { Log.e("position",position+" "+view.toString()); if (position <= 0.0f) { // [-1,0] handleLeftPage(view, position); } else if (position <= 1.0f) { // (0,1] handleRightPage(view, position); } } public abstract void touch2Left(View view, float position);
          public abstract void touch2Right(View view, float position);}


          繼承抽象類,實現(xiàn)兩個抽象方法即可,一個是向左滑的動畫,一個是向右滑動的動畫。

          public class PageTransformer3D extends BasePageTransformer {    private float mMaxRotation = 90.0f;//旋轉(zhuǎn)角度    public PageTransformer3D() {    }    public PageTransformer3D(float maxRotation) {        setMaxRotation(maxRotation);    }    @Override    public void touch2Left(View view, float position) {        //設(shè)置旋轉(zhuǎn)中心點在當前界面的右側(cè)        view.setPivotX(view.getMeasuredWidth());        view.setPivotY(view.getMeasuredHeight() * 0.5f);        view.setRotationY(mMaxRotation * position);    }    @Override    public void touch2Right(View view, float position) {        //設(shè)置旋轉(zhuǎn)中心點在當前界面的左側(cè)        view.setPivotX(0);        view.setPivotY(view.getMeasuredHeight() * 0.5f);        view.setRotationY(mMaxRotation * position);//動態(tài)改變旋轉(zhuǎn)角度    }    public void setMaxRotation(float maxRotation) {        if (maxRotation >= 0.0f && maxRotation <= 90.0f) {            mMaxRotation = maxRotation;        }    }}

          然后通過:

          viewpager.setPageTransformer(true,new PageTransformer3D());

          設(shè)置給viewpager即可。


          下面是演示動畫:


          通過PageTransformer可以實現(xiàn)你想要的動畫效果!

          瀏覽 148
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  亚洲字幕在线观看视频 | 一级黄色在线观看 | 成人影视频 | 影音先锋成人在线资源 | 中文字幕日本在线 |