为了使转换顺序实践万博官网登录,为了驾驭android的卡通片

前言:
为了熟识android的动画,看了郑钦洪_的iOS中旋转加载动漫的兑现,纵然他是搞IOS的,但也可以有借鉴之处的(好吧,就是他叫作者写四个相像的卡通片,赶紧上她这里打call向往!他说
每12个爱护给本人一块钱,蚊子腿再小也是肉啊)。

补间动漫

能够运用补间动漫系统实践补间动漫。补间动画总结动漫相关的音讯包涵开始点、截至点、大小、旋转角度以至任何与动画相关的协同点。

多少个补间动画能执行生机勃勃体系轻巧的转换(地方、大小、旋转角度和光滑度)关于多个视图对象的性质。所以,即便有一个TextView,你能够让文本移动、旋转、放大、缩短。假使有背景图片,背景图片将和文书一同被撤换。

补间动漫可以由此XML文件或Android代码,推荐使用XML文件。因为可读性更好,重用性更加好,比硬编码更加好替换。

每一个调换得到一个切实可行转变的参数集结(开端大小,甘休大小,最先角度,甘休角度等等)轻风流罗曼蒂克部分广大的参数(最先时间,时间长度)。为了使多少个转移相同的时候开班,使它们的开始时间一模二样;为了顺序实行,让起头时间增加调换执行的时日。

补间动漫的XML文件放在res/anim目录下。该公文有位移根成分<阿尔法>,<scale>,<translate>,<rotate>,插值器成分或<set>。为了使调换顺序实行,必需安装startOffset属性。如下:

万博官网登录 1

exam1

显示器坐标:左上角为(0,0),向右、向下增添。

一些值,比方pointX,能明确绝对本身依旧相对父控件的涉嫌。根据供给选取适当的格式(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(卡塔尔(英语:State of Qatar)能够应用如下形式代替:

给动漫设置叁个伊始时间Animation.setStart提姆e(卡塔尔(英语:State of Qatar),然后给视图设置动漫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卡塔尔(英语:State of Qatar)

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);

动漫片循环:

万博官网登录 2

circu_anim

注:

duration:动漫持续的时刻,阿秒;

fillAfter:动漫甘休时,是或不是停在最后意气风发帧;

fillBefore:动漫甘休时,是不是停留在率先帧;

repeatCount:动漫循环的次数,默感觉 0 次不循环,-1
(Animation.INFINITE)为Infiniti循环;

repeatMode:循环的情势,Animation.REVE途达SE是从一次动漫甘休初叶,Animation.RESTART是从动画的初叶处循环;

interpolator:插值器。

  • 首先要有五个小圆
  • 分别达成多少个小圆的卡通片
  • 何以方便人民群众的来得动漫

插值器( Interpolators)

上面的表内定每一种插值器使用的能源:

万博官网登录 3

interpolator

在XML文件中,通过android:interpolator属性使用。如:

<set
android:interpolator=”@android:anim/accelerate_interpolator”>

</set>

Android Code:

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

rotateAnimation.setDuration(300);

rotateAnimation.setInterpolator(new
AccelerateInterpolator(卡塔尔(英语:State of Qatar)卡塔尔(قطر‎;//越转越快

imageView.startAnimation(rotateAnimation);

插值器效果:

AccelerateDecelerateInterpolator(卡塔尔国:开始和终止慢,中间加快。

AccelerateInterpolator(卡塔尔:刚开端慢,平素加速。

AnticipateInterpolator(卡塔尔(قطر‎:开始走下坡路,然后飞快向前。

AnticipateOvershootInterpolator(卡塔尔(قطر‎:发轫走下坡路,然后赶快向前,超越指标值,再回来目的值。

BounceInterpolator(卡塔尔国:最后反弹。

CycleInterpolator(float cycles卡塔尔国:循环内定的次数,速率随正弦曲线变化。

DecelerateInterpolator(卡塔尔(قطر‎、DecelerateInterpolator(float
factor卡塔尔(英语:State of Qatar):风姿洒脱开端快,然后减速;factor:速度差的程度。

LinearInterpolator(卡塔尔:速率不改变。

OvershootInterpolator(卡塔尔(قطر‎、OvershootInterpolator(float
tension卡塔尔:急迅向前,超越指标值,然后回到;tension:超过的量。

问题:

进过补间动漫转换的对象只是表面(大小、地点、发光度等卡塔尔(英语:State of Qatar)爆发了转移,对象的本来属性并没有改观,事件响应的岗位也为改良。


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

二.逐项圆的动漫片的达成

先说美素佳儿(Friso卡塔尔(英语:State of Qatar)下全副动漫进度,整个动漫可以表明为三个品级

  • 第黄金时代阶段

先是阶段.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_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 的动画片,大概有无数地点精晓错误供给改善,款待我们留言。

相关文章