1. 程式人生 > >教你實現別人家的動畫2

教你實現別人家的動畫2

上一篇文章我們簡單分析實現了Yalantis公司的SliderMenu,這次我們還是來寫寫它家的另一個動畫
ContextMenu
github地址:https://github.com/Yalantis/Context-Menu.Android
效果如下
這裡寫圖片描述

話不多說,同樣我們來簡單分析下

  • 首先還是2個動畫集合 :顯示動畫集合和隱藏動畫集合
  • 顯示動畫裡面有2種動畫,一種是第一個沿Y軸開啟,第二種其他的沿X軸開啟
  • 隱藏動畫裡面比較特別,要觀察仔細就可以發現裡面有三種不同的動畫,第一種前半部分是沿X軸向下收,第二種就是中間那個(也就是點選的那個)沿Y軸向裡收,第三種下半部分是沿X軸向上收,和上半部分相反,還有一個重要的是上半部分和下半部分是同時播放 播放完後再執行中間那個

額 大家看明白了麼 要多看幾遍 仔細觀察分析 複雜的動畫其實都是由簡單的動畫組成的,不要被嚇倒。
ok ,開始動手了,佈局為了簡單還是沿用上一篇文章的佈局 如下
這裡寫圖片描述

好的開始寫各個不同的動畫了
首先我們來寫顯示動畫集合裡面的2種動畫

 //Y show 開啟-第一個
    private ObjectAnimator createFlipYShowAnim(final View target) {
        target.setPivotX(0);
        target.setPivotY(target.getHeight() / 2);
        ObjectAnimator invisToVis = ObjectAnimator.ofFloat(target, "rotationY"
, 90f, 0f); invisToVis.setDuration(DURATION); invisToVis.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationStart(Animator animation) { super.onAnimationStart(animation); target.setVisibility(View.VISIBLE); } }); return
invisToVis; }
 //x show 開啟-下半部(第一個之外的)
    private ObjectAnimator createFlipXShowAnim(final View target) {
        target.setPivotX(target.getWidth() / 2);
        target.setPivotY(0);
        ObjectAnimator invisToVis = ObjectAnimator.ofFloat(target, "rotationX", -90f, 0f);
        invisToVis.setDuration(DURATION);
        invisToVis.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                target.setVisibility(View.VISIBLE);
            }
        });
        return invisToVis;
    }

再來寫隱藏的三種動畫

//x hidden before 隱藏-上半部
    private ObjectAnimator createFlipXBeforeHiddenAnim(final View target, int i) {
        target.setPivotX(target.getWidth() / 2);
        target.setPivotY(target.getHeight());
        ObjectAnimator visToInvis = ObjectAnimator.ofFloat(target, "rotationX", 0f, 90f);
        if (i == 0) {
            visToInvis.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    //播放完後恢復位置
                    target.setVisibility(View.INVISIBLE);
                    target.setPivotX(target.getWidth() / 2);
                    target.setPivotY(target.getHeight());
                    ObjectAnimator openAnim = ObjectAnimator.ofFloat(target, "rotationX", 90f, 0f);
                    openAnim.start();
                }
            });
        }
        visToInvis.setDuration(DURATION);
        return visToInvis;
    }
//Y hidden 隱藏-中間(點選部分)
    private ObjectAnimator createFlipYHiddenAnim(final View target) {
        target.setPivotX(0);
        target.setPivotY(target.getHeight() / 2);
        ObjectAnimator visToInvis = ObjectAnimator.ofFloat(target, "rotationY", 0f, 90f);
        visToInvis.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                target.setVisibility(View.INVISIBLE);
                target.setPivotX(0);
                target.setPivotY(target.getHeight() / 2);
                ObjectAnimator openAnim = ObjectAnimator.ofFloat(target, "rotationY", 90f, 0f);
                openAnim.start();
            }
        });
        visToInvis.setDuration(DURATION);
        return visToInvis;
    }
//x hidden after 隱藏-下半部
    private ObjectAnimator createFlipXAfterHiddenAnim(View target) {
        target.setPivotX(target.getWidth() / 2);
        target.setPivotY(0);
        ObjectAnimator visToInvis = ObjectAnimator.ofFloat(target, "rotationX", 0f, -90f);
        visToInvis.setDuration(DURATION);
        return visToInvis;
    }

註釋都加上了 沒有什麼特別的地方

現在我們開始把它們加到動畫集合裡面
顯示動畫集合

  private AnimatorSet initShowAnim(ViewGroup parent) {
        ArrayList<Animator> visAnimList = new ArrayList<Animator>();
        for (int i = 0; i < parent.getChildCount(); i++) {
            ObjectAnimator itemAnim = null;
            if (i == 0) {//第一個動畫
                itemAnim = createFlipYShowAnim(parent.getChildAt(i));
            } else {
                itemAnim = createFlipXShowAnim(parent.getChildAt(i));
            }
            visAnimList.add(itemAnim);
        }
        AnimatorSet anim = new AnimatorSet();
        anim.playSequentially(visAnimList);
        return anim;
    }

隱藏動畫
隱藏動畫稍微多點 因為它有多種動畫 程式碼裡面的MIDDLE我們假定為3 就是點選的哪個按鈕位置

private Animator initHiddenAnim(ViewGroup parent) {
        AnimatorSet beforAnim = new AnimatorSet();
        AnimatorSet middleAnim = new AnimatorSet();
        AnimatorSet afterAnim = new AnimatorSet();
        ArrayList<Animator> beforeAnimList = new ArrayList<Animator>();
        ArrayList<Animator> middleAnimList = new ArrayList<Animator>();
        ArrayList<Animator> afterAnimList = new ArrayList<Animator>();
        for (int i = 0; i < parent.getChildCount(); i++) {
            if (i < MIDDLE) {
                ObjectAnimator itemAnim = createFlipXBeforeHiddenAnim(parent.getChildAt(i), i);
                beforeAnimList.add(itemAnim);
            } else if (i > MIDDLE) {
                ObjectAnimator itemAnim = createFlipXAfterHiddenAnim(parent.getChildAt(i));
                afterAnimList.add(itemAnim);
            } else {
                ObjectAnimator itemAnim = createFlipYHiddenAnim(parent.getChildAt(i));
                middleAnimList.add(itemAnim);
            }
        }
        beforAnim.playSequentially(beforeAnimList);
        middleAnim.playSequentially(middleAnimList);
        Collections.reverse(afterAnimList);
        afterAnim.playSequentially(afterAnimList);
        AnimatorSet anim = new AnimatorSet();
        anim.play(beforAnim).with(afterAnim).before(middleAnim);
        return anim;
    }

點選執行直接呼叫上面的方法了

initShowAnim(parent).start();//顯示動畫執行
initHiddenAnim(parent).start();//隱藏動畫執行

為了理解簡單 上面的程式碼並沒有嚴格規範和優化,大家根據自己習慣自行調整了
ok 我們看一下最後的效果了 ( ps:錄屏真是挺麻煩的 不知道有什麼簡單好用工具推薦)
這裡寫圖片描述

相關推薦

實現別人動畫2

上一篇文章我們簡單分析實現了Yalantis公司的SliderMenu,這次我們還是來寫寫它家的另一個動畫 ContextMenu github地址:https://github.com/Yalantis/Context-Menu.Android 效果如下

實現別人動畫3(淘寶,簡書動畫效果)

這篇文章我們來實現個稍微簡單點的動畫效果 每天在iphone上用淘寶和簡書發現他們有個共同的彈出效果(ios自帶的?),今天我們就來看看他們吧 淘寶的效果 簡書的效果 好吧 我不知道怎麼錄屏ios手機動態gif 沒關係,看我們實現後的效果就

實現別人動畫

是不是很酷炫 ok 我們來分析下 首先這裡有2個動畫 顯示動畫和隱藏動畫,很明顯2個動畫都是子項動畫的集合,一個動畫包含了多個動畫在裡面 顯示的時候 每個選單子項是沿的Y軸由0度旋轉90度 隱藏的時候 其實和顯示相反 變成每個選單項是由90旋轉到0度

手把手實現一個引導動畫

前言 最近看了一些文章,知道了實現引導動畫的基本原理,所以決定來自己親手做一個通用的引導動畫類。 我們先來看一下具體的效果:點這裡 原理 通過維護一個Modal例項,使用Modal的mask來隱藏掉頁面的其他元素。 根據使用者傳入的需要引導的元素列表,依次來展示元素。展示元素的原理:通過cloneNode來

Unity教程之手把手實現動畫Animation

在遊戲設計中,經常會需要實現動畫等動態效果,例如當主角在移動時,需要有一個走路的動畫,那怎麼實現播放動畫呢? 其實是非常簡單的,下面就將整個過程拆分成幾個步驟,來講解如何實現幀動畫: 將幀動畫的圖片放在工程目錄下,如: 選擇需要新增動畫的遊戲物件Gam

五步實現使用Nginx+uWSGI+Django方法部署Django程序

設置 wsgi alias admin 生效 server static 出現 mar 新建一個XML文件: djangochina_socket.xml,將它放在/data/www/org_management目錄下: Nginx采用8077端口與uWSGI通訊,請確保此

手把手實現一個完整的BST(超級詳細)

查找樹 str image isempty 使用 this 根據 數據 false 查找基本分類如下: 線性表的查找 順序查找 折半查找 分塊查找 樹表的查找 二叉排序樹 平衡二叉樹 B樹 B+樹 散列表的查找 今天介紹二叉排序樹。 二叉排序樹 ( Binary

《手把手實現電商網站開發》課程學習總結

選擇器 AR 進行 ron 需要 float 慕課 tex github 地址:http://www.imooc.com/learn/100 這是一個純HTML/CSS的教學視頻,沒有JS。 這個視頻課程的學習我已經接近尾聲了,我大概是17年11月開始觀看學習的吧,斷斷續

WebRTC系列(1)-手把手實現一個瀏覽器拍照室Demo

1.WebRTC開發背景   由於業務需求,需要在專案中實現實時音視訊通話功能,之前基於瀏覽器開發的Web專案要進行音視訊通話,需要安裝flash外掛才能實現或者使用C/S客戶端進行通訊。隨著網際網路技術的驅動下,在很多場景下需要進行音視訊通訊,在生活中我們現在使用電話越來越少,使用微信和視訊越來越多。在一

手把手實現一個 Vue 進度條組件!

內容 分享圖片 軟件 pen export padding eight 自己 自動完成 最近在個人的項目中,想對頁面之間跳轉的過程進行優化,想到了很多文檔或 npm 等都用到的頁面跳轉進度條,於是便想自己去實現一個,特此記錄。 來看下 npm 搜索組件時候的效果: so

手把手實現一個 Vue 進度條元件!

最近在個人的專案中,想對頁面之間跳轉的過程進行優化,想到了很多文件或 npm 等都用到的頁面跳轉進度條,於是便想自己去實現一個,特此記錄。 來看下 npm 搜尋元件時候的效果: so 下面咱們一起動手實現一下唄。 定義使用方式 想實現一個元件的前提,一定要想好你的需求是什麼,還要自己去定義一

實現專案管理的自動化(二)

我們在上一次的分享中,講解了Maven的環境變數配置及在IDEA中的整合,今天呢,就來給大家分享一下Maven的使用.Maven有兩種使用方式,第一種呢,比較原始,就是直接在cmd的命令列視窗中去使用,第二種呢,就是在IDE(Eclipse或IDEA都行)中去使用.一般來說,我們都會在IDE裡去使用。我們開啟

手把手實現電商網站開發

1-1 電商網站開發課程概況 1-2 電商網站開發準備工作 1-3 電商網站首頁開發之頂部結構 1-4 電商網站開發之頂部細化 1-5 電商網站開發之導航欄(上) 1-6 電商網站開發之導航欄(下) 1-7 電商網站開發之Banner部分 1-8 電商網站開發之主列表左側 1-9 電商網站首頁

手把手實現Java許可權管理系統 前端篇(十三):頁面許可權控制

許可權控制方案 既然是後臺許可權管理系統,當然少不了許可權控制啦,至於許可權控制,前端方面當然就是對頁面資源的訪問和操作控制啦。 前端資源許可權主要又分為兩個部分,即導航選單的檢視許可權和頁面增刪改操作按鈕的操作許可權。 我們的設計把頁面導航選單和頁面操作按鈕統一儲存在選單資料庫表中,選單表中包含以下許可權關

Java程式設計從0到1--手把手實現“HelloWorld!”

【宣告】歡迎轉載,但請保留文章原始出處→_→ Java秦學苦練博文的特點:通過“你問我答”的方式,促使你去思考一些小問題,比如:為什麼要安裝JDK?為什麼要配置環境變數?等問題。通過這種“你問我答”,帶你從不同的視角學習Java程式語言! 【正文】  Q&A(你問我答) Q:秦學苦練博主,你好!我

一步一步實現阿里巴巴的Sophix熱修復(一)

1.0 整合準備 gradle遠端倉庫依賴, 開啟專案找到app的build.gradle檔案,新增如下配置: 新增maven倉庫地址: repositories { maven { url "http://maven.ali

手把手實現Java許可權管理系統 後端篇(十三):系統備份還原

系統備份還原 在很多時候,我們需要系統資料進行備份還原。我們這裡就使用MySql的備份還原命令實現系統備份還原的功能。 新建工程 新建一個maven專案,並新增相關依賴,可以用Spring boot腳手架生成。 新建 kitty-bakcup 工程,這是一個獨立運行於後臺系統的應用程式,可以分開部署。 po

IIC詳解,包括原理、過程,最後一步步實現IIC

IIC詳解 1、I2C匯流排具有兩根雙向訊號線,一根是資料線SDA,另一根是時鐘線SCL   2、IIC總線上可以掛很多裝置:多個主裝置,多個從裝置(外圍 裝置)。上圖中主裝置是兩個微控制器,剩下的都是從裝置。  3、多主機會產生匯流排裁決問題。當多個主機同時想佔用匯

手把手寫網路爬蟲(2):迷你爬蟲架構

語言&環境 有需要Python學習資料的小夥伴嗎?小編整理【一套Python資料、原始碼和PDF】,感興趣者可以加學習群:548377875或者加小編微信:【mmp9972】反正閒著也是閒著呢,不如學點東西啦~~ 語言:帶足彈藥,繼續用Python開路! t

koa2+webpack4+React+pm2純手工架子搭建,SSR專案入門教程以及流程指引詳解:手把手實現服務端首屏渲染SSR專案

本人全職喵姐,兼職程式設計師,才疏學淺,大神如果有好的idea能指點迷津的話感激不盡。以下專案為純手工搭建的Webpack4+React+KOA2+PM2前端豆腐渣工程,房子的簡陋模型,入門教程以及流程指引。後續要精裝修還是蓋茅草屋看你自己了……/微微笑(自帶表情包)……先學習…...