周末下雨,拿这个时间来学习了下动画,对
Android4.0.3主菜单里面实现的那个摆动挺好奇的,学习了下,大体的效果已经实现了,这篇文章小马就写下具体的实现,代码中间小马试了很多东西,也加了很多注释,希望
大家不要嫌啰嗦,多试了下多学点动画,吼吼,不多说废话,老样子,先看效果,再看分解的代码,分解效果图如下:
先贴下文件目标结构,方便查看在文件中是如何动画资源的,截图如下:
1 View内容渐变效果图一:
2 View内容渐变效果图二:
3 View动画刚开始时效果图如下:
4 View动画播放到一半时效果图如下:
5 View动画播放结束时效果图如下:
好了,大体的效果看完了,下面小马来分解下代码,大家不用担心看不懂,小马会在最后将此DEMO源码放在附件中,供大家学习交流:
一:先看下主布局文件,里面没什么重要的东西,但为了完整还是贴下:
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:
Android="http://schemas.
Android.com/apk/res/
Android"
3.
Android:layout_width="fill_parent"
4.
Android:layout_height="fill_parent"
5.
Android:orientation="vertical" >
6.
7. <Button
8.
Android:id="@+id/button"
9.
Android:layout_width="fill_parent"
10.
Android:layout_height="wrap_content"
11.
Android:text="播放ListView动画"
12. />
13. <ListView
14.
Android:id="@+id/listview"
15.
Android:layout_width="fill_parent"
16.
Android:layout_height="fill_parent"
17.
Android:layoutAnimation="@anim/list_layout_controller"
18.
Android:persistentDrawingCache="animation|scrolling" />
19. </LinearLayout>
二:下面来看下主控制类代码,如下:
1. package com.xiaoma.listviewanimation.demo;
2.
3. import
Android.app.Activity;
4. import
Android.graphics.Camera;
5. import
Android.graphics.Matrix;
6. import
Android.os.Bundle;
7. import
Android.view.View;
8. import
Android.view.View.OnClickListener;
9. import
Android.view.animation.AccelerateDecelerate
interpolator;
10. import
Android.view.animation.AccelerateInterpolator;
11. import
Android.view.animation.Animation;
12. import
Android.view.animation.AnticipateInterpolator;
13. import
Android.view.animation.AnticipateOvershootInterpolator;
14. import
Android.view.animation.BounceInterpolator;
15. import
Android.view.animation.CycleInterpolator;
16. import
Android.view.animation.DecelerateInterpolator;
17. import
Android.view.animation.LinearInterpolator;
18. import
Android.view.animation.OvershootInterpolator;
19. import
Android.view.animation.Transformation;
20. import
Android.widget.ArrayAdapter;
21. import
Android.widget.Button;
22. import
Android.widget.ListView;
23.
24. /**
25. * @Title: ListViewAnimationDemoActivity.
java26. * @Package com.xiaoma.listviewanimation.demo
27. * @Description: ListView控件动画学习测试
28. * @author MZH
29. *
30. * 因为小马也处于学习的阶段,我会尽可能在在自己代码中多加注释,供大家学习交流,也
31. * 供自己以后有用到的时候直接看代码,不重翻API,所以注释多了大家别嫌烦,吼吼
32. *
33. */
34. public class ListViewAnimationDemoActivity extends Activity implements
35. OnClickListener {
36.
37. private ListView listview;
38. private Button btn;
39.
40. /** Called when the activity is first created. */
41. @Override
42. public void onCreate(Bundle savedInstanceState) {
43. super.onCreate(savedInstanceState);
44. setContentView(R.layout.main);
45. init();
46. }
47.
48. /**
49. * 初始化方法实现
50. */
51. private void init() {
52. btn = (Button) findViewById(R.id.button);
53. btn.setOnClickListener(this);
54. String items[] = { "还记得", "那一年", "那一天", "有个人", "爱过我",
55. "洗刷刷", "爱拉拉", "哇吼吼", "咔酷伊", "咔哇伊", "哦吼吼", "小马果"};
56. listview = (ListView) findViewById(R.id.listview);
57. //适配器我就用最简单的,要用复杂的,大家可以自定义适配器
58. ArrayAdapter<String> adapter = new ArrayAdapter<String>(
59. getApplicationContext(),
Android.R.layout.simple_list_item_1,
60. items);
61. listview.setAdapter(adapter);
62. }
63.
64. /**
65. * 布局内所有点击事件监听
66. */
67. @Override
68. public void onClick(View v) {
69. // 因为只有一个按钮,小马就直接写个if简单的判断下了,多个老规矩用分支判断
70. if (v.getId() == R.id.button) {
71. //开始播放ListView动画
72. startPlayAnimation();
73. }
74. }
75.
76. /**
77. * 开始播放ListView动画方法实现
78. */
79. private void startPlayAnimation() {
80. // ListViewAnimationChange为矩阵控制类
81. listview.startAnimation(new ListViewAnimationChange());
82. }
83.
84. /**
85. * @Title: ListViewAnimationChange.
java86. * @Package com.xiaoma.listviewanimation.demo
87. * @Description: ListView控件的矩阵内部控制类
88. * @author MZH
89. * 在这个地方讲下,要自行控制屏幕矩阵的话必须实现现在两个方法
90. */
91. private class ListViewAnimationChange extends Animation {
92.
93. @Override
94. public void initialize(int width, int height, int parentWidth,
95. int parentHeight) {
96.
97. // 将动画播放时间设置为5秒
98. setDuration(5000);
99. // 设置缩放完成后,效果不消失
100. setFillAfter(true);
101.
102. // 设置线性插值器,这个地方new出来的对象跟在scale.xml中的插值器没什么区别,也可以用别的
103.
104. /**
105. * 顺带着讲下在2D动画中常用的插值器吧,小马先给自己及大伙提醒下:插值器,就是告诉
Android,播放动画时
106. * 是从快到慢还是从慢到快,从左到右的旋转还是其它的方式的动画,刚开始很怕这个词,试了下效果,其实不太吓人...
107. * 吼吼,类型如下面的八种,跟scale.xml或alpha.xml中使用的插值器一样的,只是写的形式不一样而已
108. *
109. */
110.
111. /**
112. * 所有的插值器都实现Interpolator接口中的 getInterpolation(float input)方法,好奇的朋友
113. * Ctrl跟进下....只注意一点,插值器不能同时set多个,不然最前面的会被覆盖,即:无效果..
114. * new AccelerateDecelerateInterpolator();
115. * new AccelerateInterpolator();
116. * new CycleInterpolator(1.0f);
117. * new DecelerateInterpolator();
118. * new AnticipateInterpolator();
119. * new AnticipateOvershootInterpolator();
120. * new BounceInterpolator();
121. * new OvershootInterpolator();
122. * new LinearInterpolator();
123. * 与以上几种插值器相对应的方法在xml文件中的使用方式大家可以自动ALT+/试下,换汤不换药
124. */
125.
126. //下面是小马试的效果,好奇的朋友们可以打开效果试下,小马不一一解释
127. // setInterpolator(new LinearInterpolator());
128. // setInterpolator(new CycleInterpolator(1.0f) );
129. // setInterpolator(new AccelerateDecelerateInterpolator());
130. // setInterpolator(new DecelerateInterpolator());
131.
132.
133. /**
134. * 这两个好玩就选了,这个效果类似于
Android 4.0的那个左右摆动..效果可以自己打开注释试下..
135. * 要用自己效果的可以重新改下矩阵的控制
136. */
137. setInterpolator(new AnticipateOvershootInterpolator());
138. //setInterpolator(new OvershootInterpolator());
139. super.initialize(width, height, parentWidth, parentHeight);
140. }
141.
142. /**
143. * 这个重写是控制矩阵中关键的一步
144. * 介绍一个参数:interpolatedTime 安卓系统在模拟动画时会反复的调用这个方法
145. * 所以这个值是一直变化的,从0-1变化....
146. * 这个方法就是在某一个时间点上将动画添加到指定的控件上
147. */
148. @Override
149. protected void applyTransformation(float interpolatedTime,
150. Transformation t) {
151. super.applyTransformation(interpolatedTime, t);
152.
153. /*
154. * final Matrix matrix = t.getMatrix();
155. * matrix.setScale(interpolatedTime, interpolatedTime);
156. * matrix.preTranslate(-50f, -50f); matrix.postTranslate(50f, 50f);
157. */
158. // matrix.setRotate(45f);
159. // matrix.setTranslate(40f,50f);
160.
161. /**
162. * Camera小马犯的错:导相机包...大家注意下就可以了,
163. * 我们应该导入graphics包
164. */
165. Camera camera = new Camera();
166. //取得屏幕矩阵对象
167. final Matrix matrix = t.getMatrix();
168. camera.save();
169. /**
170. * 下面方法中的参数大家自己CTRL跟下,小马不一一解说,
171. * 不跟进的自己改改看下效果就知道是什么意思了..
172. */
173. camera.translate(0.0f, 0.0f, (1300 - 1300.0f * interpolatedTime));
174. camera.rotateY(360 * interpolatedTime);
175. camera.getMatrix(matrix);
176. //设置矩阵播放动画前的位置.原点为:0,0
177. matrix.preTranslate(-50f, -50f);
178. //设置矩阵播放完动画后的位置
179. matrix.postTranslate(50f, 50f);
180. camera.restore();
181. // 如果用了以下的效果,则上面Camera做的矩阵变换将被覆盖
182. // matrix.setScale(interpolatedTime, interpolatedTime);
183. }
184. }
185. }
这个地方小马提醒下,在主控制类中,最重要的是那具自定义的动画类,它控制着VIEW的所有动画,如:插值器...2D渲染等,具体的看代码及注释部分的代码即可:
四:下面来看下用来关联View控件与动画的动画控制器代码:
1. <?xml version="1.0" encoding="utf-8"?>
2. <!-- 动画控制器,这个文件只是把要添加的动画与我们的动画资源关联起来
3. 下面这个属性来控制控制动画的方向,如:比底部到顶部,或别的...
4. 我们在主布局文件中控件的属性里面使用这个地方的动画控制器
5.
Android:animationOrder="reverse"
6. -->
7. <layoutAnimation xmlns:
Android="http://schemas.
Android.com/apk/res/
Android"
8.
Android:delay="30%"
9.
Android:animationOrder="reverse"
10.
Android:animation="@anim/scale"
11. />
五:一个简单的透明度变化的文件,代码如下:
1. <?xml version="1.0" encoding="utf-8"?>
2. <!-- alpha
3. 这个地方说几句,
Android:interpolator 大家自行换换别的试下
4. -->
5. <alpha xmlns:
Android="http://schemas.
Android.com/apk/res/
Android"
6.
Android:interpolator="@
Android:anim/bounce_interpolator"
7.
Android:fromAlpha="0.0"
8.
Android:toAlpha="1.0"
9.
Android:duration="1000"
10. />
我已经在anim文件夹下创建了几个动画文件,大家可以尝试着更改下动画控制XML文件里面的动画文件来查看不同的效果哦,更好的效果,也可以再再往里面添加属性完成即可,最后,还是一样的,如果觉得小马文章写得不清楚的,有好建议的,可直接指点批评,有问题我们共同交流进步,谢谢啦,觉得看不爽的,小马也把源码放附件里面了,有需要学习的朋友可下载下,交流交流。。吼吼。。加油