前言:
以熟悉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:interpolator=”@android:anim/accelerate_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) {
}
});
***
- **第二阶段**

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 的卡通片,可能发许多地方理解错需要改进,欢迎大家留言。