Android动画是在开发时候必备的需求,随着设计师动画效果日趋复杂,作为一位合格的Android工程师掌握动画是必备的技能
一 逐帧动画
逐帧动画是利用人眼视觉停留的效果,在不断的变化,感觉出动画的效果,设计师给出一系列可以变化的图片,开发者指定每一帧图片播放的时间,然后开始动画
步骤1将所有图片放到drawable下 命名最好有顺序
步骤2 在drawble下创建一个文件 名字可以为animation1.xml
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false"
>
<item android:duration="100" android:drawable="@drawable/loading_11" />
<item android:duration="100" android:drawable="@drawable/loading_12" />
<item android:duration="100" android:drawable="@drawable/loading_13" />
<item android:duration="100" android:drawable="@drawable/loading_14" />
<item android:duration="100" android:drawable="@drawable/loading_15" />
<item android:duration="100" android:drawable="@drawable/loading_16" />
<item android:duration="100" android:drawable="@drawable/loading_17" />
<item android:duration="100" android:drawable="@drawable/loading_18" />
<item android:duration="100" android:drawable="@drawable/loading_19" />
<item android:duration="100" android:drawable="@drawable/loading_110" />
</animation-list>
步骤3 创建布局文件 根据需要来满足需求
<?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="vertical"
>
<ImageView
android:id="@+id/animationIV"
android:layout_gravity="center"
android:layout_width="50dp"
android:layout_height="50dp"
/>
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="开始动画逐帧动画"
/>
</LinearLayout>
步骤4 在代码中绑定布局开始动画 核心代码如下
public class MainActivity extends AppCompatActivity {
ImageView animationIV;
Button button1;
private AnimationDrawable animationDrawable;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
animationIV= (ImageView) findViewById(R.id.animationIV);
button1= (Button) findViewById(R.id.button1);
button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
animationIV.setImageResource(R.drawable.default_loading);
animationDrawable = (AnimationDrawable) animationIV.getDrawable();
animationDrawable.start();
}
});
}
}
二、补间动画
补间动画是用得比较多的动画,只需要定义动画开始和结束的两个关键帧,并指定动画变化的时间和方式就可以进行动画,主要包括四种动画,透明度变化Alpha,大小变化Scale,位移变化Translate 以及旋转变化Rotate 这四种效果可以动态组合实现复杂的动画效果
2.1AlphaAnimation动画
步骤1在anim中定义好布局
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="200"
></alpha>
</set>
步骤2 设计好布局
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context="viewdraw.animation.MainActivity"
android:orientation="vertical"
>
<ImageView
android:id="@+id/img1"
android:layout_gravity="center_horizontal"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@mipmap/ic_launcher"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="0dp" />
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="xml方式开始透明动画"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp" />
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="代码方式开始透明动画"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp" />
</LinearLayout>
步骤3在代码中绑定
button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.alpha);
img.startAnimation(animation);
}
});
或者直接用代码实现
button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
alphaAnimation.setDuration(1000);
img.startAnimation(alphaAnimation);
}
});
2.2 ScaleAnimation 缩放动画
步骤1 配置xml文件
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="2000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="0.1"
android:toYScale="0.1"
android:pivotX="50%"
android:pivotY="50%"
></scale>
</set>
配置布局文件 与上面雷同
绑定代码
button3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale);
img.startAnimation(animation);
}
});
代码方式实现
button4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//参数 1为动画开始x的尺寸 2动画结束x的尺寸 3 动画开始Y的尺寸 4 动画结束Y 的尺寸 5缩放的参照物对象 6 x轴的缩放点 7缩放的参照物 8Y轴的缩放点
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 4f,1.0f,4.0f,Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,0.0f);
scaleAnimation.setDuration(1000);
img.startAnimation(scaleAnimation);
}
});
2.3TranslateAnimation 位移动画
xml 配置文件
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
>
<translate
android:duration="2000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100"
android:toYDelta="0"
></translate>
</set>
布局与上面雷同
代码绑定实现
button5.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);
img.startAnimation(animation);
}
});
直接代码实现
button6.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
TranslateAnimation animation= new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,100f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);
img.startAnimation(animation);
}
});
}
2.4RotateAnimation 旋转动画
xml配置文件
<rotate
android:duration="2000"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotY="50%"
android:pivotX="50%"
></rotate>
布局文件与上面雷同
代码布局
button7.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate); img.startAnimation(animation);
img.startAnimation(animation);
}
});
直接代码实现
button8.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
RotateAnimation animation= new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
animation.setDuration(2000);
img.startAnimation(animation);
}
});
三、属性动画
在补间动画中View的真实属性并没有被改变,而属性动画可以直接改变View对象的属性值,从某种意义上说属性动画是补间动画的加强版
3.1直接代码
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="@+id/img"
android:layout_gravity="center_horizontal"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@mipmap/ic_launcher"
/>
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="开始属性动画拉伸X"
/>
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="开始属性动画透明"
/>
<Button
android:id="@+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="开始属性动画旋转"
/>
<Button
android:id="@+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="开始属性动画移动"
/>
<Button
android:id="@+id/button5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="开始属性动画监听集合"
/>
</LinearLayout>
代码文件
package viewdraw.propertyanimation;
import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
ImageView imageView;
Button button,button2,button3,button4,button5;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView= (ImageView) findViewById(R.id.img);
button= (Button) findViewById(R.id.button1);
button2= (Button) findViewById(R.id.button2);
button3= (Button) findViewById(R.id.button3);
button4= (Button) findViewById(R.id.button4);
button5= (Button) findViewById(R.id.button5);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator scaleY = ObjectAnimator.ofFloat(imageView, "scaleY", 0, 3,1);
scaleY.setDuration(2000);
scaleY.start();
}
});
button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator alpha = ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0f);
alpha.setDuration(2000);
alpha.start();
}
});
button3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator rotation = ObjectAnimator.ofFloat(imageView, "rotation", 0, 360);
rotation.setDuration(2000);
rotation.start();
}
});
button4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator alpha = ObjectAnimator.ofFloat(imageView, "translationX", 0f, 500f);
alpha.setDuration(2000);
alpha.start();
}
});
button5.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator moveIn = ObjectAnimator.ofFloat(imageView, "translationX", -500f, 0f);
ObjectAnimator rotate = ObjectAnimator.ofFloat(imageView, "rotation", 0f, 360f);
ObjectAnimator fadeInOut = ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0f, 1f);
AnimatorSet animSet = new AnimatorSet();
animSet.play(rotate).with(fadeInOut).after(moveIn);
animSet.setDuration(5000);
animSet.start();
animSet.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
Toast.makeText(getApplicationContext(),"动画开始了",Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimationRepeat(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
Toast.makeText(getApplicationContext(),"动画结束了",Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimationCancel(Animator animation) {
}
});
}
});
}
}