为了熟悉android的动画片。一个补间动画能实行同一系列简单的转换（位置、大小、旋转角度和透明度）关于一个视图对象的性能。

前言：
以熟悉android的动画，看了郑钦洪_的iOS中旋转加载动画的实现，虽然他是干IOS的,但为是发生借鉴的处在之（好吧，就是他让自己勾勒一个接近之卡通片，赶紧上他那边点赞喜欢！他说
每10单爱给我平块钱，蚊子腿更稍微吗是肉啊）。

补间动画

可使补间动画系统推行补间动画。补间动画计算动画相关的音包括初步接触、结束点、大小、旋转角度和其它同动画片相关的共同点。

一个补间动画能尽同样密密麻麻简单的变换（位置、大小、旋转角度和透明度）关于一个视图对象的习性。所以，如果起一个TextView，你可吃文本移动、旋转、放大、缩小。如果来背景图片，背景图片将与文件一起让移。

补间动画可以透过XML文件要Android代码，推荐下XML文件。因为可读性更好，重用性更好，比硬编码更好替换。

各个一个移获得一个实际变换的参数集合（开始大小，结束大小，开始角度，结束角度等等）和有些科普的参数（开始日，时长）。为了使几个转移而开班，使它的始时间相同；为了顺序执行，让开始时累加变换执行的时日。

补间动画的XML文件在res/anim目录下。该文件发出个移根元素<alpha>,<scale>,<translate>,<rotate>，插值器元素或<set>。为了使变换顺序执行，必须设置startOffset属性。如下：

exam1

屏幕坐标：左上角为（0,0），向右侧、向下多。

片值，比如pointX,能确定相对自身或者相对父控件的干。根据需要选择适合的格式（50乎相对父控件的50%，50%乎相对自身之50%）。

代码调用res/anim目录下的hyperspace_jump.xml动画：

ImageView
spaceshipImage=(ImageView)findViewById(R.id.spaceshipImage);

Animation
hyperspaceJumpAnimation=AnimationUtils.loadAnimation(this,R.anim.hyperspace_jump);

spaceshipImage.startAnimation(hyperspaceJumpAnimation);

startAnimation()可以使如下方式代替：

于动画设置一个开端时间Animation.setStartTime(),然后被视图设置动画View.setAnimation()。

先上个GIF图
为是动画专门去下载了LICEcap，挺好用的工具

透明度动画：

XML：res/anim/anim_alpha.xml

<alpha

android:duration=”300″

android:fromAlpha=”0.0″

android:toAlpha=”1.0″/>

Animation
animation=AnimationUtils.loadAnimation(this,R.anim.anim_alpha);

imageView.startAnimation(animation);

注：

fromAlpha：动画开始经常的透明度；0.0透明，1.0未透明。

toAlpha：动画结束时透明度；0.0晶莹剔透，1.0休透明。

Android Code:

AlphaAnimation localAlphaAnimation =new AlphaAnimation(0.0,1.0);

localAlphaAnimation.setDuration(300);

imageView.startAnimation(localAlphaAnimation);

waitingviw.gif

缩放动画：

XML：res/anim/anim_scale.xml

<scale

android:duration=”300″

android:fromXScale=”0.0″

android:fromYScale=”0″

android:pivotX=”50%”

android:pivotY=”50%”

android:toXScale=”1.0″

android:toYScale=”1.0″/>

Animation
animation=AnimationUtils.loadAnimation(this,R.anim.anim_scale);

imageView.startAnimation(animation);

注：

fromXScale：开始时横向（X轴）的分寸；1.0指没有改变。fromYScale同理。

toXScale：动画结束时纵向（Y轴）的轻重；1.0凭无改。toYScale同理。

pivotX：对象缩放时，X轴坐标保持无转移的职。pivotY同理。

Android Code:

ScaleAnimation localScaleAnimation =new
ScaleAnimation(0.0,1.0,0.0,1,0.5F,0.5F);

localScaleAnimation.setDuration(300);

imageView.startAnimation(localScaleAnimation);

github地址，欢迎大家提出修改意见

转动画：

XML:res/anim/anim_rotate.xml

<rotate

android:duration=”300″

android:fromDegrees=”0.0″

android:toDegrees=”90.0″

android:pivotX=”50%”

android:pivotY=”50%”/>

Animation
animation=AnimationUtils.loadAnimation(this,R.anim.anim_rotate);

imageView.startAnimation(animation);

Android Code:

RotateAnimation rotateAnimation=new
RotateAnimation(0.0,
90.0, 50%, 50%);

rotateAnimation.setDuration(300);

imageView.startAnimation(rotateAnimation);

注：

构造函数：RotateAnimation(float fromDegrees, float toDegrees, int
pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

pivotXType:用于描述pivotXValue的路。

Animation.ABSOLUTE, 一个实际的数值；

Animation.RELATIVE_TO_SELF,相对自身之比例；

Animation.RELATIVE_TO_PARENT，相对父控件的百分比。

pivotXValue：一个有血有肉的价后百分比，含义由pivotXType决定。

思路

个移动画：

XML:res/anim/anim_translate.xml

<translate

android:fromXDelta=”0%”

android:toXDelta=”100%”

android:duration=”300″/>

Animation
animation=AnimationUtils.loadAnimation(this,R.anim.anim_translate);

imageView.startAnimation(animation);

注：

fromXDelta：浮点数与比例，开始时X轴的偏移量。表达方式：使用如素相对于健康位置，如：”5″；使用比例相对于元素自身的幅度，如”5%”,或者相对于大控件的肥瘦，如”5%p”。formYDelta同理。

toXDelta：结束时X轴的偏移量。toYDelta 同理。

Android Code:

TranslateAnimation translateAnimation=new
TranslateAnimation(Animation.RELATIVE_TO_SELF,0.0f,
Animation.RELATIVE_TO_SELF,1.0f,Animation.RELATIVE_TO_SELF,0.0f,
Animation.RELATIVE_TO_SELF,0.0f);

translateAnimation.setDuration(300);

imageView.startAnimation(translateAnimation);

卡通循环：

circu_anim

注：

duration：动画持续的光阴，毫秒；

fillAfter：动画结束时，是否已于最终一轴；

fillBefore：动画结束时，是否停留在率先帧；

repeatCount：动画循环的次数，默认为 0 不好无循环，-1
（Animation.INFINITE）为最循环；

repeatMode：循环的模式，Animation.REVERSE是自从平糟糕动画结束起，Animation.RESTART是从动画的开端处于循环；

interpolator：插值器。

首先要发三单小圆
个别实现三独稍到的动画
什么样便民之亮动画

插值器（ Interpolators）

下的阐明指定每个插值器使用的资源：

interpolator

当XML文件中，通过android:interpolator属性使用。如：

…

</set>

Android Code:

RotateAnimation
rotateAnimation=newRotateAnimation(0.0,
90.0, 50%, 50%);

rotateAnimation.setDuration(300);

rotateAnimation.setInterpolator(new
AccelerateInterpolator());//越改越快

imageView.startAnimation(rotateAnimation);

插值器效果：

AccelerateDecelerateInterpolator()：开始和结束慢，中间加速。

AccelerateInterpolator()：刚起暂缓，一直加速。

AnticipateInterpolator()：开始滑坡，然后急速向前。

AnticipateOvershootInterpolator()：开始滑坡，然后急速向前，超过目标价，再返目标价。

BounceInterpolator()：最后反弹。

CycleInterpolator(float cycles)：循环指定的次数，速率随正弦曲线变化。

DecelerateInterpolator()、DecelerateInterpolator(float
factor)：一始发不久，然后减速；factor：速度不同的水准。

LinearInterpolator()：速率不更换。

OvershootInterpolator()、OvershootInterpolator(float
tension)：急速向前，超过目标价，然后回；tension：超过的计量。

问题：

进过补间动画变换的对象就是外部(大小、位置、透明度等)发生了改，对象的当属性并未改变，事件响应的职吗也转。

一.CircleView的实现

由定义一个圆类，有安颜色，半径，以及圆上显示的字的法子。

    protected void onDraw(Canvas canvas) {

        //画笔设置颜色
        mPaint.setColor(circleColor);
        mPaint.setAntiAlias(true);
        //画一个圆
        canvas.drawCircle(mViewWidth / 2, mViewHeight / 2, circleRadius, mPaint);
        //设置文字
        if(mText!=null){
            mPaint.setTextSize(mViewHeight*7/8);
            float textWidth = mPaint.measureText(mText);
            float percent = (circleRadius * 2)/textWidth;
            mPaint.setColor(textColor);
            canvas.drawText(mText,mViewWidth /2 - textWidth/2,  
                                mViewHeight/2+mPaint.getTextSize()/3 ,mPaint);
        }

    }

**
注意又写onMeasure()方式时，返回的高以及宽要根据周的半径来设，这样会要任何view最贴近整个宏观。**

二.历圆的卡通片的落实

先期说明一下布满动画过程，整个动画可以讲为老三独号

第一流

先是阶段.gif

高中档小球从1倍增的分寸缩放到0.7倍增之尺寸

scale_small = new ScaleAnimation(1f, 0.7f, 1f, 0.7f, circleRadius, circleRadius);```
 -  左边的小球从1倍的大小缩放到0.7倍的大小 ，并且绕着中间小球旋转360度，同时向左边4倍于半径距离移动 ,缩小的动画复用上面的

left_ratote = new RotateAnimation(359f, 0f, 3 * circleRadius,
circleRadius);
left_translate_to_left = new TranslateAnimation(0, -rotatoRadius, 0,
0);

 - 右边的小球从1倍的大小缩放到0.7倍的大小 ，并且绕着中间小球旋转360度，同时向右边4倍于半径距离移动 ,缩小的动画同样复用上面的

right_rotate = new RotateAnimation(359f, 0f, -circleRadius,
circleRadius);
right_translate_to_right = new TranslateAnimation(0, rotatoRadius, 0,
0);

分别创建三个动画集，添加各自的动画，并且设定动画时间以及``setFillAfter(true)``，使第一阶段动画结束后保持在结束的位置，使第二阶段的动画能够连接上。分别给小球设定动画，并且给其中一个动画集设定监听事件，结束播放第二阶段的动画。

left_translate_rotate_scale.setAnimationListener(new
Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            Log.e("wv", "left_translate_rotate_scale finish");

            if (!stop) {
                if (dismiss) {
                    //添加 消失动画
                    addDismissAnima(mid_scale_big, left_translate_scale, right_translate_scale);

                }
                clear();

// 开始第二独动画集
c1.startAnimation(mid_scale_big);
c2.startAnimation(left_translate_scale);
c3.startAnimation(right_translate_scale);

            }
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });



***
- **第二阶段**

![第二阶段.gif](http://upload-images.jianshu.io/upload_images/853620-11669339398d267c.gif?imageMogr2/auto-orient/strip)
 1.  中间小球从0.7倍的大小放大到1倍的大小

scale_big = new ScaleAnimation(0.7f, 1f, 0.7f, 1f, circleRadius,
circleRadius);“`

左侧的小球从0.7加倍的高低放大到1加倍之大小，同时于右侧4倍于半径距离移动
,放大的动画复用上面的

left_translate_to_right = new TranslateAnimation(-rotatoRadius, 0, 0, 0);

右边的小球从0.7倍增之尺寸放大到1加倍的大小同时为左侧4倍于半径距离移动
,放大的动画片同样复用上面的

right_translate_to_left = new TranslateAnimation(rotatoRadius, 0, 0, 0);

又分别创建三独动画集，添加各自的卡通片，并且设定动画时间跟setFillAfter(true)，使第二品级动画结束晚维持以了之职，使第一阶段的卡通能够连续上。分别于小球设定动画，并且于里一个动画集设定监听事件，结束播放第一级的动画片，这里的监听事件类于第一流的，就无糊出代码了。

其三品级

其三阶段.gif
于随机一个阶段触发了央动画的波（可以当面前两个阶段处于看到一个布尔品种的
dismiss标志来让动画集添加消失动画），给大阶段的每个动画集添加如下几单卡通：
受小球从1加倍之轻重缓急放大到2倍的大大小小

scale_bigger = new ScaleAnimation(1f, 2f, 1f, 2f, circleRadius, circleRadius);

被小球透明度从 1 到 0 变化

  alpha_low = new AlphaAnimation(1f, 0f);

让内部一个动画（scale_bigger /alpha_low
）设定监听事件，当了时清空所有动画，设定小球的透明度也
0（使窗口没有时不至于看到小球），同时调用对应之回调方法

scale_bigger.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                c1.setAlpha(0f);
                c2.setAlpha(0f);
                c3.setAlpha(0f);
                clear();
                stop = true;
                listener.onFinish();
                Toast.makeText(context, "dismiss", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

三.实现同句话让该待加载动画附着于页面任意一个View上

此间运用了单例模式的思想

    private static WaitingView wv;

    private OnFinish listener = new OnFinish() {

        @Override
        public void onFinish() {
            popupWindow.dismiss();
            wv.stop();
            wv.resetAnima();
        }
    };


    private static PopupWindow popupWindow;


    public static void showWaitingView(Context context, View view,int width,int height, int thecolor, float theradius,int thebackgroundColor ) {

        wv = new WaitingView(context);
        color = thecolor;
        circleRadius  = theradius;
        windowWidth = width;
        windowHeight = height;
        backgroundColor = thebackgroundColor;

        View layoutView = LayoutInflater.from(context).inflate(R.layout.pupop, null);
        layoutView.setBackgroundColor(backgroundColor);

        wv = (WaitingView) layoutView.findViewById(R.id.id_wv);

        wv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                wv.dismiss();

            }
        });


        popupWindow = new PopupWindow(layoutView, windowWidth, windowHeight,
                false);
        popupWindow.showAtLocation(view, Gravity.CENTER, 0, 0);
        wv.start();

    }
    public static boolean isExist() {
        return wv != null;
    }

    public static void close() {
        wv.dismiss();
    }

R.layout.pupop.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <network.scau.com.asimplewaitingdemo.WaitingView
        android:id="@+id/id_wv"
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

先实例化一个静态的靶子，通过showWaitingView()计来调动用该实例，并促成以一个Popupwindow中显示，该Popupwindow蹭在传唱的View上。

结束语
刚刚起接触android 的卡通片，可能发许多地方理解错需要改进，欢迎大家留言。

为了熟悉android的动画片。一个补间动画能实行同一系列简单的转换（位置、大小、旋转角度和透明度）关于一个视图对象的性能。

补间动画

透明度动画：

缩放动画：

转动画：

个移动画：

插值器（ Interpolators）

一.CircleView的实现

二.历圆的卡通片的落实

三.实现同句话让该待加载动画附着于页面任意一个View上

相关文章