周末下雨,拿這個時間來學習了下動畫,對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源碼放在附件中,供大家學習交流:
一:先看下主布局檔案,裡面沒什麼重要的東西,但為了完整還是貼下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="@+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="播放ListView動畫"
/>
<ListView
android:id="@+id/listview"
android:layout_height="fill_parent"
android:layoutAnimation="@anim/list_layout_controller"
android:persistentDrawingCache="animation|scrolling" />
</LinearLayout>
二:下面來看下主要制類代碼,如下:
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<String> adapter = new ArrayAdapter<String>(
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控件與動畫的動畫控制器代碼:
<!-- 動畫控制器,這個檔案隻是把要添加的動畫與我們的動畫資源關聯起來
下面這個屬性來控制控制動畫的方向,如:比底部到頂部,或别的...
我們在主布局檔案中控件的屬性裡面使用這個地方的動畫控制器
android:animationOrder="reverse"
-->
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:delay="30%"
android:animationOrder="reverse"
android:animation="@anim/scale"
/>
五:一個簡單的透明度變化的檔案,代碼如下:
<!-- alpha
這個地方說幾句,android:interpolator 大家自行換換别的試下
-->
<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,如需轉載請自行聯系原作者