我们在开发过程中,单纯的界面跳转,切换显得沉闷枯燥,因此我们都会加入一些炫酷的动画效果,来丰富我们的app效果
安卓动画主要分为两大类;
- 帧动画
- 补间动画
帧动画主要是一组图片组合起来,实现我们想要的效果
直接在布局中写入
顺序显示动画文件:animation1.xml
<?xml version="1.0" encoding="utf-8"?>
<!--
根标签为animation-list,其中oneshot代表着是否只展示一遍,设置为false会不停的循环播放动画
根标签下,通过item标签对动画中的每一个图片进行声明
android:duration 表示展示所用的该图片的时间长度
-->
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">//false--true设置是否循环播放
<item android:drawable="@drawable/icon1" android:duration="150"></item>
<item android:drawable="@drawable/icon2" android:duration="150"></item>
<item android:drawable="@drawable/icon3" android:duration="150"></item>
<item android:drawable="@drawable/icon4" android:duration="150"></item>
<item android:drawable="@drawable/icon5" android:duration="150"></item>
<item android:drawable="@drawable/icon6" android:duration="150"></item>
</animation-list>
补间动画:Tween
只需要定义动画开始帧和结束帧,而中间动画由系统计算补齐就可以了
我们常见的四种补间动画如下
- AlphaAnimation:透明动画
- ScaleAnimation:缩放动画
- TranslateAnimation:位移动画
- RotateAnimation;旋转动画
等的久了吧,我们的属性动画终于现身了,效果图如下
这个里面包含了两种动画,属性动画和普通动画
左上角的效果是属性动画右下角的是普通动画
2、属性动画的相关API
Property Animation故名思议就是通过动画的方式改变对象的属性了,我们首先需要了解几个属性:
Duration动画的持续时间,默认300ms。
Time interpolation:时间差值,乍一看不知道是什么,但是我说LinearInterpolator、AccelerateDecelerateInterpolator,大家一定知道是干嘛的了,定义动画的变化率。
Repeat count and behavior:重复次数、以及重复模式;可以定义重复多少次;重复时从头开始,还是反向。
Animator sets: 动画集合,你可以定义一组动画,一起执行或者顺序执行。
Frame refresh delay:帧刷新延迟,对于你的动画,多久刷新一次帧;默认为10ms,但最终依赖系统的当前状态;基本不用管。
相关的类
ObjectAnimator 动画的执行类,后面详细介绍
ValueAnimator 动画的执行类,后面详细介绍
AnimatorSet 用于控制一组动画的执行:线性,一起,每个动画的先后执行等。
AnimatorInflater 用户加载属性动画的xml文件
TypeEvaluator 类型估值,主要用于设置动画操作属性的值。
TimeInterpolator 时间插值,上面已经介绍。
总的来说,属性动画就是,动画的执行类来设置动画操作的对象的属性、持续时间,开始和结束的属性值,时间差值等,然后系统会根据设置的参数动态的变化对象的属性。
3、ObjectAnimator实现动画
下面我们就看这个列子的实现
首先我们写布局文件
代码如下所示
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5">
<ImageView
android:id="@+id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:src="@drawable/b" />
<ImageView
android:id="@+id/c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:src="@drawable/c" />
<ImageView
android:id="@+id/d"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:src="@drawable/d" />
<ImageView
android:id="@+id/e"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:src="@drawable/e" />
<ImageView
android:id="@+id/f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:src="@drawable/f" />
<ImageView
android:id="@+id/g"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:src="@drawable/g" />
<ImageView
android:id="@+id/h"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:src="@drawable/h" />
<ImageView
android:id="@+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/a" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<RelativeLayout
android:id="@+id/rl"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btn_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical"
android:onClick="onclick11" />
<ImageView
android:id="@+id/bottom_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:src="@drawable/b" />
<ImageView
android:id="@+id/bottom_c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:src="@drawable/c" />
<ImageView
android:id="@+id/bottom_d"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:src="@drawable/d" />
<ImageView
android:id="@+id/bottom_e"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:src="@drawable/e" />
<ImageView
android:id="@+id/bottom_f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:src="@drawable/f" />
<ImageView
android:id="@+id/bottom_g"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:src="@drawable/g" />
<ImageView
android:id="@+id/bottom_h"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:src="@drawable/h" />
</RelativeLayout>
<ImageView
android:id="@+id/bottom_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:src="@drawable/a" />
<Button
android:id="@+id/btn_jump"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="跳转" />
</RelativeLayout>
</LinearLayout>
activity中的代码如下所示
public class ActivityB extends Activity implements View.OnClickListener{
private int[] res = {
R.id.a,R.id.b,R.id.c,R.id.d,R.id.e,R.id.f,R.id.g,R.id.h};
private List<ImageView> imageViewList = new ArrayList<>();
private boolean flag = true;
private ImageView iv_a,iv_b,iv_c,iv_d,iv_e,iv_f,iv_g,iv_h;
private int a =1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_b);
for (int i = 0; i < res.length; i++) {
ImageView image = (ImageView) findViewById(res[i]);
imageViewList.add(image);
image.setOnClickListener(this);
}
iv_a = (ImageView) findViewById(R.id.bottom_a);
iv_b = (ImageView) findViewById(R.id.bottom_b);
iv_c = (ImageView) findViewById(R.id.bottom_c);
iv_d = (ImageView) findViewById(R.id.bottom_d);
iv_e = (ImageView) findViewById(R.id.bottom_e);
iv_f = (ImageView) findViewById(R.id.bottom_f);
iv_g = (ImageView) findViewById(R.id.bottom_g);
iv_h = (ImageView) findViewById(R.id.bottom_h);
final RelativeLayout layout = (RelativeLayout) findViewById(R.id.rl);
layout.setVisibility(View.GONE);
iv_a.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
a++;
if (a % 2 == 0) {
layout.setVisibility(View.VISIBLE);
} else {
layout.setVisibility(View.GONE);
}
}
});
translateShow();
findViewById(R.id.btn_jump).setOnClickListener(this);
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.a:
if (flag) {
startAnim();
} else {
closeAnim();
}
break;
case R.id.btn_jump:
Intent intent = new Intent(ActivityB.this,MainActivity.class);
startActivity(intent);
break;
default:
break;
}
}
private void closeAnim(){
for (int i = 0; i < res.length; i++) {
ObjectAnimator animator = ObjectAnimator.ofFloat(imageViewList.get(i),"translationY"
,i*150F,0F);
animator.setDuration(500);
animator.setInterpolator(new BounceInterpolator());
animator.setStartDelay(i*300);
animator.start();
flag = true;
}
}
private void startAnim(){
for (int i = 1; i < res.length; i++) {
ObjectAnimator animator = ObjectAnimator.ofFloat(imageViewList.get(i),
"translationY", 0F, i * 150);
animator.setDuration(500);
animator.setStartDelay(i * 300);
animator.setStartDelay(i * 300);
animator.start();
final int finalI = i;
imageViewList.get(i).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(ActivityB.this, "属性动画点击" + finalI, Toast.LENGTH_SHORT).show();
}
});
flag = false;
}
}
public void onclick11(View view){
final Button button = (Button) view;
ValueAnimator valueAnimator = ValueAnimator.ofInt(0,100);
valueAnimator.setDuration(5000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
Integer integer = (Integer) valueAnimator.getAnimatedValue();
button.setText(""+integer);
}
});
valueAnimator.start();
}
private void translateShow(){
TranslateAnimation animation = new TranslateAnimation(0.0f, 0f, 0, -400);
animation.setDuration(500);
animation.setRepeatMode(Animation.REVERSE);
animation.setFillAfter(true);
animation.start();
iv_b.setAnimation(animation);
TranslateAnimation animation1 = new TranslateAnimation(0.0f, -130f, 0, -400);
animation1.setDuration(700);
animation1.setRepeatMode(Animation.REVERSE);
animation1.setFillAfter(true);
animation1.start();
iv_c.setAnimation(animation1);
TranslateAnimation animation2 = new TranslateAnimation(0.0f, -260f, 0, -350);
animation2.setDuration(900);
animation2.setRepeatMode(Animation.REVERSE);
animation2.setFillAfter(true);
animation2.start();
iv_d.setAnimation(animation2);
TranslateAnimation animation3 = new TranslateAnimation(0.0f, -370f, 0, -270);
animation3.setDuration(1100);
animation3.setRepeatMode(Animation.REVERSE);
animation3.setFillAfter(true);
animation3.start();
iv_e.setAnimation(animation3);
TranslateAnimation animation4 = new TranslateAnimation(0.0f, -400f, 0, -120);
animation4.setDuration(1300);
animation4.setRepeatMode(Animation.REVERSE);
animation4.setFillAfter(true);
animation4.start();
iv_f.setAnimation(animation4);
TranslateAnimation animation5 = new TranslateAnimation(0.0f, -380f, 0, 30);
animation5.setDuration(1500);
animation5.setRepeatMode(Animation.REVERSE);
animation5.setFillAfter(true);
animation5.start();
iv_g.setAnimation(animation5);
}
}