天天看点

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,如需转载请自行联系原作者

继续阅读