Android开发网

首页|Android开发环境|Android开发教程|Android开发视频|Android游戏开发|Android开发实例|Android开发书籍|鸡啄米博客

Android应用开发教程之二十：API动画学习与扩展总结

       今天就借助官方 API的动画来扩展总结下之前学习与使用过的一些知识点，风格不变，先看效果，再看代码： 

       动画效果一：

 Android应用开发教程之二十：API动画学习与扩展总结

 

        AnimatorSet.Builderl：

Android应用开发教程之二十：API动画学习与扩展总结

        好了，效果看完了，但这篇文章主要看的不是这个简单的效果，大家来看下文章中的注释与解释吧。

Java代码
  1. package com.xiaoma.www;  
  2.    
  3. import java.util.ArrayList;  
  4.    
  5. import android.animation.Animator;  
  6. import android.animation.AnimatorListenerAdapter;  
  7. import android.animation.AnimatorSet;  
  8. import android.animation.ObjectAnimator;  
  9. import android.animation.ValueAnimator;  
  10. import android.app.Activity;  
  11. import android.content.Context;  
  12. import android.graphics.Canvas;  
  13. import android.graphics.Paint;  
  14. import android.graphics.RadialGradient;  
  15. import android.graphics.Shader;  
  16. import android.graphics.drawable.ShapeDrawable;  
  17. import android.graphics.drawable.shapes.OvalShape;  
  18. import android.os.Bundle;  
  19. import android.view.MotionEvent;  
  20. import android.view.View;  
  21. import android.view.animation.AccelerateInterpolator;  
  22. import android.view.animation.DecelerateInterpolator;  
  23. import android.widget.LinearLayout;  
  24.    
  25. /** 
  26. * @Title: BoundAnimationActivity.java 
  27. * @Package com.xiaoma.www 
  28. * @Description: 小马API动画学习扩展 
  29. * @author XiaoMa 
  30. */  
  31. public class BallAnimationActivity extends Activity {  
  32.    
  33.     /**定义小球要显示的窗口*/  
  34.     private LinearLayout xiaoMaLayout = null ;  
  35.    
  36.     /** Called when the activity is first created. */  
  37.     @Override  
  38.     public void onCreate(Bundle savedInstanceState) {  
  39.         super.onCreate(savedInstanceState);  
  40.         setContentView(R.layout.main);  
  41.    
  42.         init();  
  43.     }  
  44.    
  45.     /** 
  46.      * 初始化实现 
  47.      */  
  48.     private void init(){  
  49.    
  50.         //定位动画容器资源  
  51.         xiaoMaLayout = (LinearLayout)findViewById(R.id.xiaoma);  
  52.         xiaoMaLayout.addView(new BallAnimationView(this));  
  53.     }  
  54.    
  55.     /** 
  56.     * @Title: BallAnimationActivity.java 
  57.     * @Package com.xiaoma.www 
  58.     * @Description:自定义View， 文章中我会扩展一些东西，大家要仔细看注释哦 
  59.     * @author XiaoMa 
  60.     */  
  61.     public class BallAnimationView extends View{  
  62.    
  63.         //由于文章排版问题，小马在此处稍微违背下注释规范，多行注释暂时用“//”来代替，大家见谅  
  64.         //这个地方大家先考虑下三个问题：（答案小马会在后面解答）  
  65.         //1：为什么要用static  ？  
  66.         //2：为什么要用final   ？  
  67.         //3：为什么不用注释中的Color类而用十六进制来定义这些颜色值，不是更方便吗   ？  
  68.    
  69.         /**定义背景颜色更换色值*/  
  70.         private static final int RED = 0xffFF8080;  
  71.         private static final int BLUE = 0xff8080FF;  
  72.         private static final int CYAN = 0xff80ffff;  
  73.         private static final int GREEN = 0xff80ff80;  
  74.    
  75.         /**private static final int RED1 = Color.RED; 
  76.         private static final int BLUE1 = Color.BLUE; 
  77.         private static final int CYAN1 = Color.CYAN; 
  78.         private static final int GREEN1 = Color.GREEN;*/  
  79.    
  80.         /** 
  81.          * 这个地方解释下吧，上面三个问题的答案：1：用static可以加快访问速度，达到高效访问变量; 2：用final简单， 就是不常变;3：不用Color是因为已经是static final了，如果用了Color.XXX的话，会长期在内存中导入一个没必要的包，占用内存，浪费内存资源;这个地方小马顺带着说下，在应用中如果你经常用static来定义一些变量时，很多的变量时就会出OOM的问题啦，比如： 
  82.          * public class ClassName { 
  83.                 private static Context mContext; 
  84.             } 
  85.         上面的代码是很恶心的，我以前就在项目中就这样写过，以构造方法传递过来，以为写成静态可以方便调用对吧？其实是错的!!!如果将Activity赋值到么mContext的话。即使该Activity已经onDestroy，但是由于仍有对象保存它的引用，因此该Activity依然不会被释放。扩展扩展有效避免OOM的几种情况： 
  86.             第一，应该尽量避免static成员变量引用资源耗费过多的实例，比如Context。 
  87.             第二、Context尽量使用Application Context，因为Application的Context的生命周期比较长，引用它不会出现内存泄露的问题。 
  88.             第三、使用WeakReference代替强引用。比如可以使用WeakReference<Context> mContextRef; 
  89.             第四、将线程的内部类，改为静态内部类。 
  90.             第五、在线程内部采用弱引用保存Context引用。 
  91.   
  92.          */  
  93.    
  94.         /**声明并初始化一个小球的容器*/  
  95.         public final ArrayList<ShapeHolder> balls = new ArrayList<ShapeHolder>();  
  96.    
  97.         //AnimatorSet类与AnimationSet别搞混，而且必须在3.0以上版本中才有哦...  
  98.         //此类可以根据一个特殊的顺序来播放Animator对象中的动画，而Animator则是一个  
  99.         //可以支持set结点设置动画的详细信息，如：开始、结束等...，set相信大家不是很陌生了吧  
  100.         //以下形式即：set结点动画  
  101.         /**<setandroid:ordering=["together" ¦ "sequentially"]> 
  102.           <objectAnimator 
  103.               android:propertyName="string" 
  104.               android:duration="int" 
  105.               android:valueFrom="float ¦ int ¦ color" 
  106.               android:valueTo="float ¦ int ¦ color" 
  107.               android:startOffset="int" 
  108.               android:repeatCount="int" 
  109.               android:repeatMode=["repeat" ¦ "reverse"] 
  110.               android:valueType=["intType" ¦ "floatType"]/> 
  111.           <animator 
  112.               android:duration="int" 
  113.               android:valueFrom="float ¦ int ¦ color" 
  114.               android:valueTo="float ¦ int ¦ color" 
  115.               android:startOffset="int" 
  116.               android:repeatCount="int" 
  117.               android:repeatMode=["repeat" ¦ "reverse"] 
  118.               android:valueType=["intType" ¦ "floatType"]/> 
  119.           <set> 
  120.               ... 
  121.           </set> 
  122.       </set>*/  
  123.    
  124.        /** 
  125.         * 既然在文章开头说了要扩展很多东西的话，不仅仅是看个效果那么简单啦，顺带着学习回顾下动画中的详细属性： 
  126.         * 四种主要的动画类型: 
  127.           alpha        渐变透明度动画效果 
  128.           scale        渐变尺寸伸缩动画效果 
  129.           translate   画面转换位置移动动画效果 
  130.           rotate       画面转移旋转动画效果 
  131.   
  132.              四种主要的动画类型相对应的类: 
  133.           AlphaAnimation 渐变透明度动画效果 
  134.           ScaleAnimation 渐变尺寸伸缩动画效果 
  135.           TranslateAnimation 画面转换位置移动动画效果 
  136.           RotateAnimation 画面转移旋转动画效果 
  137.              动画的XML文件在工程中res/anim目录，这个文件必须包含一个根元素，可以使<alpha><scale> <translate> <rotate> 
  138.              插值元素或者是把上面的元素都放入<set>元素组中，默认情况下，所有的动画指令都是同时发生的，为了让他们按序列发生，需要设置一个 
  139.              特殊的属性startOffset。动画的指令定义了你想要发生什么样的转换，当他们发生了，应该执行多长时间，转换可以是连续的也可以使同时的 
  140.   
  141.              四大节点共同属性汇总： 
  142.   
  143.                    属性[类型]                    功能 
  144.          Duration[long]         属性为动画持续时间 时间以毫秒为单位 
  145.          fillAfter [boolean]    当设置为true ，该动画转化在动画结束后被应用 
  146.          fillBefore[boolean]    当设置为true ，该动画转化在动画开始前被应用 
  147.         */  
  148.    
  149.         /**声明播放动画控制器*/  
  150.         AnimatorSet animator = null ;   
  151.    
  152.         //这个地方大家应该发现了点什么吧？想想为什么用这个构造不用下面注释的构造？  
  153.         public BallAnimationView(Context context) { //方式一  
  154.             super(context);  
  155.             //上一篇讲ObjectAnimator，这个地方大家现在应该知道ValueAnimator是干吗的了吧？吼吼  
  156.             ValueAnimator backAnim = ObjectAnimator.ofInt(this, "backgroundColor", RED,BLUE,CYAN,GREEN);  
  157.             //设置自动更换背景色的时间为每隔2秒更换一次  
  158.             backAnim.setDuration(2000);  
  159.             backAnim.setRepeatCount(ValueAnimator.INFINITE);  
  160.             backAnim.setRepeatMode(ValueAnimator.REVERSE);  
  161.             backAnim.start();  
  162.         }  
  163.    
  164.         /**public BallAnimationView(Context context, AttributeSet attrs) { //方式二 
  165.             super(context, attrs); 
  166.             // TODO Auto-generated constructor stub 
  167.         }*/  
  168.    
  169.         /** 
  170.          * 这个地方给出上面选择构造方法时是为什么用第一个不用第二个构造方法的原因： 
  171.          * 一:如果是用纯代码的方式加载自定义的控制到而已中时用第一种方式, 
  172.          * 二:如果是XML文件加载的方式使用自定义控件到布局中是用第二种方式, 
  173.          */  
  174.    
  175.         @Override  
  176.         protected void onDraw(Canvas canvas) {  
  177.             for (int i = 0; i < balls.size(); ++i) {  
  178.                 ShapeHolder shapeHolder = balls.get(i);  
  179.                 canvas.save();  
  180.                 //这个地方的translate()这个方法，如果朋友们要深究的话可以自行学习下，不想的话只知道怎么用就行了...  
  181.                 //矩阵转换在这不多说了，因为我懂的矩阵不多，只记下这个小点：Matrix的基本操作包括：+、*。Matrix的乘法不满足交换律，也就是说A*B ≠B*A。  
  182.                 canvas.translate(shapeHolder.getX(), shapeHolder.getY());  
  183.                 shapeHolder.getShape().draw(canvas);  
  184.                 canvas.restore(); //重置画布  
  185.             }  
  186.             super.onDraw(canvas);  
  187.         }  
  188.    
  189.         /** 
  190.          * 监听触屏事件，以此来播放动画 
  191.          * */  
  192.         @Override  
  193.         public boolean onTouchEvent(MotionEvent event) {  
  194.             if(event.getAction() != MotionEvent.ACTION_DOWN  
  195.                && event.getAction() != MotionEvent.ACTION_MOVE){  
  196.                 return false;  
  197.             }  
  198.             ShapeHolder newBall = addBall(event.getX(), event.getY());  
  199.    
  200.             // Bouncing animation with squash and stretch  
  201.             float startY = newBall.getY();  
  202.             float endY = getHeight() - 50f;  
  203.             //获取的这个高度是当前View的高度  
  204.             float h = (float)getHeight();  
  205.             float eventY = event.getY();  
  206.             int duration = (int)(500 * ((h - eventY)/h));  
  207.             ValueAnimator bounceAnim = ObjectAnimator.ofFloat(newBall, "y", startY, endY);  
  208.             bounceAnim.setDuration(duration);  
  209.             //这个地方使用到插值器，顺带讲下几种插值器  
  210.             //打过人家门窗玻璃的人都知道，石头刚扔出时的状态是：先快先慢，以下讲到使用的插值器就是这个道理，  
  211.             //所以说有些事还是小时候练成的哦！！  
  212.    
  213.             /**accelerate_decelerate_interpolator 
  214.                                     加速-减速 动画插入器 
  215.   
  216.             accelerate_interpolator 
  217.                                     加速-动画插入器 
  218.   
  219.             decelerate_interpolator 
  220.                                      减速- 动画插入器*/  
  221.    
  222.             //下面这些实现细节的代码小马就不一条条加注释 了，只加下比较特殊的地方  
  223.             bounceAnim.setInterpolator(new AccelerateInterpolator());  
  224.             ValueAnimator squashAnim1 = ObjectAnimator.ofFloat(newBall, "x", newBall.getX(),  
  225.                     newBall.getX() - 25f);  
  226.             squashAnim1.setDuration(duration/4);  
  227.             squashAnim1.setRepeatCount(1);  
  228.             squashAnim1.setRepeatMode(ValueAnimator.REVERSE);  
  229.             squashAnim1.setInterpolator(new DecelerateInterpolator());  
  230.             ValueAnimator squashAnim2 = ObjectAnimator.ofFloat(newBall, "width", newBall.getWidth(),  
  231.                     newBall.getWidth() + 50);  
  232.             squashAnim2.setDuration(duration/4);  
  233.             squashAnim2.setRepeatCount(1);  
  234.             squashAnim2.setRepeatMode(ValueAnimator.REVERSE);  
  235.             squashAnim2.setInterpolator(new DecelerateInterpolator());  
  236.             ValueAnimator stretchAnim1 = ObjectAnimator.ofFloat(newBall, "y", endY,  
  237.                     endY + 25f);  
  238.             stretchAnim1.setDuration(duration/4);  
  239.             stretchAnim1.setRepeatCount(1);  
  240.             stretchAnim1.setInterpolator(new DecelerateInterpolator());  
  241.             stretchAnim1.setRepeatMode(ValueAnimator.REVERSE);  
  242.             ValueAnimator stretchAnim2 = ObjectAnimator.ofFloat(newBall, "height",  
  243.                     newBall.getHeight(), newBall.getHeight() - 25);  
  244.             stretchAnim2.setDuration(duration/4);  
  245.             stretchAnim2.setRepeatCount(1);  
  246.             stretchAnim2.setInterpolator(new DecelerateInterpolator());  
  247.             stretchAnim2.setRepeatMode(ValueAnimator.REVERSE);  
  248.             ValueAnimator bounceBackAnim = ObjectAnimator.ofFloat(newBall, "y", endY,  
  249.                     startY);  
  250.             bounceBackAnim.setDuration(duration);  
  251.             bounceBackAnim.setInterpolator(new DecelerateInterpolator());  
  252.             // Sequence the down/squash&stretch/up animations  
  253.             AnimatorSet bouncer = new AnimatorSet();  
  254.    
  255.             //下面三个之前、之后、同一时间来添加动画，此处什么意思，我就不一句句翻译了，大家直接看官方解释就可以了，截图在动画效果三后一张：  
  256.             //如果大家想详细了解学习AnimatorSet.Builder的话可以看下下面官方这个链接...  
  257.             //http://developer.android.com/reference/android/animation/AnimatorSet.Builder.html  
  258.             bouncer.play(bounceAnim).before(squashAnim1);  
  259.             bouncer.play(squashAnim1).with(squashAnim2);  
  260.             bouncer.play(squashAnim1).with(stretchAnim1);  
  261.             bouncer.play(squashAnim1).with(stretchAnim2);  
  262.             bouncer.play(bounceBackAnim).after(stretchAnim2);  
  263.    
  264.             // 看到alpha渐变了吧？当小球反弹到最后时变为全透明，并从容器中remove透明的小球  
  265.             ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f);  
  266.             fadeAnim.setDuration(250);  
  267.             fadeAnim.addListener(new AnimatorListenerAdapter() {  
  268.                 @Override  
  269.                 public void onAnimationEnd(Animator animation) {  
  270.                     balls.remove(((ObjectAnimator)animation).getTarget());  
  271.    
  272.                 }  
  273.             });  
  274.    
  275.             // 按顺序排列好其它小球的动画  
  276.             AnimatorSet animatorSet = new AnimatorSet();  
  277.             animatorSet.play(bouncer).before(fadeAnim);  
  278.    
  279.             animatorSet.start();  
  280.             return true;  
  281.         }  
  282.    
  283.         /*** 
  284.          * 将小球添加到容器中方法实现 
  285.          * @param x 
  286.          * @param y 
  287.          * @return 添加的小球对象 
  288.          */  
  289.         private ShapeHolder addBall(float x, float y) {  
  290.             OvalShape circle = new OvalShape();  
  291.             circle.resize(50f, 50f);  
  292.             ShapeDrawable drawable = new ShapeDrawable(circle);  
  293.             ShapeHolder shapeHolder = new ShapeHolder(drawable);  
  294.             shapeHolder.setX(x - 25f);  
  295.             shapeHolder.setY(y - 25f);  
  296.             //随机取RGB三种颜色  
  297.             int red = (int)(Math.random() * 255);  
  298.             int green = (int)(Math.random() * 255);  
  299.             int blue = (int)(Math.random() * 255);  
  300.             //下面是：得到一个16进制表示的颜色，相当于：0xff(red的16进制值)(green的16进制值)(blue的16进制值)  
  301.             //比如 0xff886644 88 = red 66 = green 44 = blue这样的，第一次见到这个东西，大家记得记下哦  
  302.             int color = 0xff000000 ¦ red << 16 ¦ green << 8 ¦ blue;  
  303.             Paint paint = drawable.getPaint(); //得到画笔  
  304.             int darkColor = 0xff000000 ¦ red/4 << 16 ¦ green/4 << 8 ¦ blue/4;  
  305.             //用给定的圆心、半径、颜色和展示模式来绘制小球，这里使用的模式是：平铺模式：  
  306.             //展示模式有三种分别是：平铺模式、 平铺模式非重叠模式、 非重叠模式  
  307.             RadialGradient gradient = new RadialGradient(37.5f, 12.5f,  
  308.                     50f, color, darkColor, Shader.TileMode.CLAMP);  
  309.             //设置画笔要绘制的图片  
  310.             paint.setShader(gradient);  
  311.             //设置画笔开  
  312.             shapeHolder.setPaint(paint);  
  313.             balls.add(shapeHolder);  
  314.             return shapeHolder;  
  315.         }  
  316.    
  317.     }  
  318. }  

       主控制类看完了，下面来看下这个简单的辅助类，如果下：

Java代码
  1. package com.xiaoma.www;  
  2.    
  3. import android.graphics.Paint;  
  4. import android.graphics.RadialGradient;  
  5. import android.graphics.drawable.ShapeDrawable;  
  6. import android.graphics.drawable.shapes.Shape;  
  7.    
  8. /** 
  9. * @Title: ShapeHolder.java 
  10. * @Package com.xiaoma.www 
  11. * @Description: 动画辅助类 
  12. * @author XiaoMa 
  13. */  
  14. public class ShapeHolder {  
  15.     private float x = 0, y = 0;  
  16.     private ShapeDrawable shape;  
  17.     private int color;  
  18.     private RadialGradient gradient;  
  19.     private float alpha = 1f;  
  20.     private Paint paint;  
  21.    
  22.     public void setPaint(Paint value) {  
  23.         paint = value;  
  24.     }  
  25.     public Paint getPaint() {  
  26.         return paint;  
  27.     }  
  28.    
  29.     public void setX(float value) {  
  30.         x = value;  
  31.     }  
  32.     public float getX() {  
  33.         return x;  
  34.     }  
  35.     public void setY(float value) {  
  36.         y = value;  
  37.     }  
  38.     public float getY() {  
  39.         return y;  
  40.     }  
  41.     public void setShape(ShapeDrawable value) {  
  42.         shape = value;  
  43.     }  
  44.     public ShapeDrawable getShape() {  
  45.         return shape;  
  46.     }  
  47.     public int getColor() {  
  48.         return color;  
  49.     }  
  50.     public void setColor(int value) {  
  51.         shape.getPaint().setColor(value);  
  52.         color = value;  
  53.     }  
  54.     public void setGradient(RadialGradient value) {  
  55.         gradient = value;  
  56.     }  
  57.     public RadialGradient getGradient() {  
  58.         return gradient;  
  59.     }  
  60.    
  61.     public void setAlpha(float alpha) {  
  62.         this.alpha = alpha;  
  63.         shape.setAlpha((int)((alpha * 255f) + .5f));  
  64.     }  
  65.    
  66.     public float getWidth() {  
  67.         return shape.getShape().getWidth();  
  68.     }  
  69.     public void setWidth(float width) {  
  70.         Shape s = shape.getShape();  
  71.         s.resize(width, s.getHeight());  
  72.     }  
  73.    
  74.     public float getHeight() {  
  75.         return shape.getShape().getHeight();  
  76.     }  
  77.     public void setHeight(float height) {  
  78.         Shape s = shape.getShape();  
  79.         s.resize(s.getWidth(), height);  
  80.     }  
  81.    
  82.     public ShapeHolder(ShapeDrawable s) {  
  83.         shape = s;  
  84.     }  
  85. }  

       好啦，扩展看完了，如果大家有好的建议或者需要什么地方需要整理总结的，记得留言提出，看到留言会第一时间回复并总结整理出来的，谢谢啦，每天进步一点点，也算一种进步，大家加油，把工作当成自己的兴趣，才能获得源源不断的动力，加油加油！！！一起学习一起进步，这就是编程的快乐！加油…..O_O！

 

Tags:动画 | 2016/9/19 | 发表评论

相关文章: