天天看點

Android插值器、動畫、分解詳解,實作View擺動效果

    周末下雨,拿這個時間來學習了下動畫,對Android4.0.3主菜單裡面實作的那個擺動挺好奇的,學習了下,大體的效果已經實作了,這篇文章小馬就寫下具體的實作,代碼中間小馬試了很多東西,也加了很多注釋,希望大家不要嫌啰嗦,多試了下多學點動畫,吼吼,不多說廢話,老樣子,先看效果,再看分解的代碼,分解效果圖如下:

  先貼下檔案目标結構,友善檢視在檔案中是如何引用動畫資源的,截圖如下:

<a href="http://blog.51cto.com/attachment/201203/142648371.png" target="_blank"></a>

  1 View内容漸變效果圖一:

<a target="_blank" href="http://blog.51cto.com/attachment/201203/140259960.png"></a>

  2 View内容漸變效果圖二:

<a target="_blank" href="http://blog.51cto.com/attachment/201203/140318197.png"></a>

  3 View動畫剛開始時效果圖如下:

<a target="_blank" href="http://blog.51cto.com/attachment/201203/140332846.png"></a>

  4 View動畫播放到一半時效果圖如下:

<a target="_blank" href="http://blog.51cto.com/attachment/201203/140402503.png"></a>

  5 View動畫播放結束時效果圖如下:

<a target="_blank" href="http://blog.51cto.com/attachment/201203/140418338.png"></a>

  好了,大體的效果看完了,下面小馬來分解下代碼,大家不用擔心看不懂,小馬會在最後将此DEMO源碼放在附件中,供大家學習交流:

一:先看下主布局檔案,裡面沒什麼重要的東西,但為了完整還是貼下:

&lt;?xml version="1.0" encoding="utf-8"?&gt; 

&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 

    android:layout_width="fill_parent" 

    android:layout_height="fill_parent" 

    android:orientation="vertical" &gt; 

    &lt;Button  

        android:id="@+id/button" 

        android:layout_width="fill_parent" 

        android:layout_height="wrap_content" 

        android:text="播放ListView動畫" 

        /&gt; 

    &lt;ListView 

        android:id="@+id/listview" 

        android:layout_height="fill_parent" 

        android:layoutAnimation="@anim/list_layout_controller" 

        android:persistentDrawingCache="animation|scrolling" /&gt; 

&lt;/LinearLayout&gt; 

二:下面來看下主要制類代碼,如下:   

package com.xiaoma.listviewanimation.demo; 

import android.app.Activity; 

import android.graphics.Camera; 

import android.graphics.Matrix; 

import android.os.Bundle; 

import android.view.View; 

import android.view.View.OnClickListener; 

import android.view.animation.AccelerateDecelerateInterpolator; 

import android.view.animation.AccelerateInterpolator; 

import android.view.animation.Animation; 

import android.view.animation.AnticipateInterpolator; 

import android.view.animation.AnticipateOvershootInterpolator; 

import android.view.animation.BounceInterpolator; 

import android.view.animation.CycleInterpolator; 

import android.view.animation.DecelerateInterpolator; 

import android.view.animation.LinearInterpolator; 

import android.view.animation.OvershootInterpolator; 

import android.view.animation.Transformation; 

import android.widget.ArrayAdapter; 

import android.widget.Button; 

import android.widget.ListView; 

/** 

 * @Title: ListViewAnimationDemoActivity.java 

 * @Package com.xiaoma.listviewanimation.demo 

 * @Description: ListView控件動畫學習測試 

 * @author MZH 

 *  

 * 因為小馬也處于學習的階段,我會盡可能在在自己代碼中多加注釋,供大家學習交流,也 

 * 供自己以後有用到的時候直接看代碼,不重翻API,是以注釋多了大家别嫌煩,吼吼 

 */ 

public class ListViewAnimationDemoActivity extends Activity implements 

        OnClickListener { 

    private ListView listview; 

    private Button btn; 

    /** Called when the activity is first created. */ 

    @Override 

    public void onCreate(Bundle savedInstanceState) { 

        super.onCreate(savedInstanceState); 

        setContentView(R.layout.main); 

        init(); 

    } 

    /** 

     * 初始化方法實作 

     */ 

    private void init() { 

        btn = (Button) findViewById(R.id.button); 

        btn.setOnClickListener(this); 

        String items[] = { "還記得", "那一年", "那一天", "有個人", "愛過我", 

                "洗刷刷", "愛拉拉", "哇吼吼", "咔酷伊", "咔哇伊", "哦吼吼", "小馬果"}; 

        listview = (ListView) findViewById(R.id.listview); 

        //擴充卡我就用最簡單的,要用複雜的,大家可以自定義擴充卡 

        ArrayAdapter&lt;String&gt; adapter = new ArrayAdapter&lt;String&gt;( 

                getApplicationContext(), android.R.layout.simple_list_item_1, 

                items); 

        listview.setAdapter(adapter); 

     * 布局内所有點選事件監聽 

    public void onClick(View v) { 

        // 因為隻有一個按鈕,小馬就直接寫個if簡單的判斷下了,多個老規矩用分支判斷 

        if (v.getId() == R.id.button) { 

            //開始播放ListView動畫 

            startPlayAnimation(); 

        } 

     * 開始播放ListView動畫方法實作 

    private void startPlayAnimation() { 

        // ListViewAnimationChange為矩陣控制類 

        listview.startAnimation(new ListViewAnimationChange()); 

     * @Title: ListViewAnimationChange.java 

     * @Package com.xiaoma.listviewanimation.demo 

     * @Description: ListView控件的矩陣内部控制類 

     * @author MZH 

     * 在這個地方講下,要自行控制螢幕矩陣的話必須實作現在兩個方法 

    private class ListViewAnimationChange extends Animation { 

        @Override 

        public void initialize(int width, int height, int parentWidth, 

                int parentHeight) { 

            // 将動畫播放時間設定為5秒 

            setDuration(5000); 

            // 設定縮放完成後,效果不消失 

            setFillAfter(true); 

            // 設定線性插值器,這個地方new出來的對象跟在scale.xml中的插值器沒什麼差別,也可以用别的 

            /** 

             * 順帶着講下在2D動畫中常用的插值器吧,小馬先給自己及大夥提醒下:插值器,就是告訴Android,播放動畫時 

             * 是從快到慢還是從慢到快,從左到右的旋轉還是其它的方式的動畫,剛開始很怕這個詞,試了下效果,其實不太吓人... 

             * 吼吼,類型如下面的八種,跟scale.xml或alpha.xml中使用的插值器一樣的,隻是寫的形式不一樣而已 

             *  

             */ 

             * 所有的插值器都實作Interpolator接口中的 getInterpolation(float input)方法,好奇的朋友 

             * Ctrl跟進下....隻注意一點,插值器不能同時set多個,不然最前面的會被覆寫,即:無效果.. 

             * new AccelerateDecelerateInterpolator();  

             * new AccelerateInterpolator();  

             * new CycleInterpolator(1.0f);  

             * new DecelerateInterpolator();  

             * new AnticipateInterpolator();  

             * new AnticipateOvershootInterpolator();  

             * new BounceInterpolator();  

             * new OvershootInterpolator();  

             * new LinearInterpolator(); 

             * 與以上幾種插值器相對應的方法在xml檔案中的使用方式大家可以自動ALT+/試下,換湯不換藥 

            //下面是小馬試的效果,好奇的朋友們可以打開效果試下,小馬不一一解釋 

            // setInterpolator(new LinearInterpolator()); 

            // setInterpolator(new CycleInterpolator(1.0f) ); 

            // setInterpolator(new AccelerateDecelerateInterpolator()); 

            // setInterpolator(new DecelerateInterpolator()); 

             * 這兩個好玩就選了,這個效果類似于Android 4.0的那個左右擺動..效果可以自己打開注釋試下.. 

             * 要用自己效果的可以重新改下矩陣的控制 

            setInterpolator(new AnticipateOvershootInterpolator());  

            //setInterpolator(new OvershootInterpolator());  

            super.initialize(width, height, parentWidth, parentHeight); 

        /** 

         * 這個重寫是控制矩陣中關鍵的一步 

         * 介紹一個參數:interpolatedTime 安卓系統在模拟動畫時會反複的調用這個方法 

         * 是以這個值是一直變化的,從0-1變化.... 

         * 這個方法就是在某一個時間點上将動畫添加到指定的控件上 

         */ 

        protected void applyTransformation(float interpolatedTime, 

                Transformation t) { 

            super.applyTransformation(interpolatedTime, t); 

            /* 

             * final Matrix matrix = t.getMatrix(); 

             * matrix.setScale(interpolatedTime, interpolatedTime); 

             * matrix.preTranslate(-50f, -50f); matrix.postTranslate(50f, 50f); 

            // matrix.setRotate(45f); 

            // matrix.setTranslate(40f,50f); 

             * Camera小馬犯的錯:導相機包...大家注意下就可以了, 

             * 我們應該導入graphics包 

            Camera camera = new Camera(); 

            //取得螢幕矩陣對象 

            final Matrix matrix = t.getMatrix(); 

            camera.save(); 

             * 下面方法中的參數大家自己CTRL跟下,小馬不一一解說, 

             * 不跟進的自己改改看下效果就知道是什麼意思了.. 

            camera.translate(0.0f, 0.0f, (1300 - 1300.0f * interpolatedTime)); 

            camera.rotateY(360 * interpolatedTime); 

            camera.getMatrix(matrix); 

            //設定矩陣播放動畫前的位置.原點為:0,0 

            matrix.preTranslate(-50f, -50f); 

            //設定矩陣播放完動畫後的位置 

            matrix.postTranslate(50f, 50f); 

            camera.restore(); 

            // 如果用了以下的效果,則上面Camera做的矩陣變換将被覆寫 

            // matrix.setScale(interpolatedTime, interpolatedTime); 

  這個地方小馬提醒下,在主要制類中,最重要的是那具自定義的動畫類,它控制着VIEW的所有動畫,如:插值器...2D渲染等,具體的看代碼及注釋部分的代碼即可:   

四:下面來看下用來關聯View控件與動畫的動畫控制器代碼:

&lt;!-- 動畫控制器,這個檔案隻是把要添加的動畫與我們的動畫資源關聯起來 

     下面這個屬性來控制控制動畫的方向,如:比底部到頂部,或别的... 

     我們在主布局檔案中控件的屬性裡面使用這個地方的動畫控制器 

     android:animationOrder="reverse" 

 --&gt; 

&lt;layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" 

    android:delay="30%" 

    android:animationOrder="reverse" 

    android:animation="@anim/scale" 

    /&gt; 

五:一個簡單的透明度變化的檔案,代碼如下:

&lt;!-- alpha  

    這個地方說幾句,android:interpolator 大家自行換換别的試下 

--&gt; 

&lt;alpha xmlns:android="http://schemas.android.com/apk/res/android"  

    android:interpolator="@android:anim/bounce_interpolator" 

    android:fromAlpha="0.0" 

    android:toAlpha="1.0" 

    android:duration="1000" 

    我已經在anim檔案夾下建立了幾個動畫檔案,大家可以嘗試着更改下動畫控制XML檔案裡面的動畫檔案引用來檢視不同的效果哦,更好的效果,也可以再再往裡面添加屬性完成即可,最後,還是一樣的,如果覺得小馬文章寫得不清楚的,有好建議的,可直接指點批評,有問題我們共同交流進步,謝謝啦,覺得看不爽的,小馬也把源碼放附件裡面了,有需要學習的朋友可下載下傳下,交流交流。。吼吼。。加油

<a href="http://down.51cto.com/data/2359993" target="_blank">附件:http://down.51cto.com/data/2359993</a>

     本文轉自華華世界 51CTO部落格,原文連結:http://blog.51cto.com/mzh3344258/796811,如需轉載請自行聯系原作者

繼續閱讀