android 一个等待加载组合卡通

前言:
为了熟知android的动画,看了郑钦洪_的iOS中旋转加载动画的完成,即便她是搞IOS的,但也是有借鉴之处的(好呢,就是她叫自己写一个像样的动画,赶紧上他那边点赞喜欢!他说
每10个喜欢给自家一块钱,蚊子腿再小也是肉啊)。

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

waitingviw.gif

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

思路

  • 首先要有多个小圆
  • 个别完成多少个小圆的卡通片
  • 何以便民的显得动画

一.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最接近整个圆。**

二.一一圆的动画片的兑现

先说雅培(Beingmate)下方方面面动画进度,整个动画可以分解为八个级次

  • 率先等级

先是阶段.gif

  1. 高中级小球从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_2018正版葡京赌侠诗,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 的卡通片,可能有成千成万地点明白错误须求改进,欢迎我们留言。

发表评论

电子邮件地址不会被公开。 必填项已用*标注