Android 动画
变换动画 (Tween Animation)
变换动画分类
- AlphaAnimation 渐变透明度动画
- RotateAnimation 旋转动画
- ScaleAnimation 渐变尺寸缩放动画
- TranslateAnimation 位移动画
- AnimationSet 组合动画
实现动画的两种方式
- 通过xml配置实现
-
纯Java代码
对应的标签和类
AlphaAnimation
参数
- fromAlpha 开始时透明度
- toAlpha 结束时透明度
取值范围：0.0-1.0
其中 0.0表示完全透明 1.0表示完全不透明
- 配置文件实现
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="2000"
android:fromAlpha="0.1"
android:toAlpha="1.0" />
</set>
/**
* 通过配置文件加载动画
*
* @param view
*/
void onAlphaAnimationByFile(View view) {
//通过AnimationUtils加载布局文件中的动画
Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.alphaanima);
//为组件设置动画
_imageView.startAnimation(alphaAnimation);
}
- 代码实现
/**
* 通过代码实现加载动画
*
* @param view
*/
void onAlphaAnimationByCode(View view) {
AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.1f);
alphaAnimation.setDuration(2000);
_imageView.startAnimation(alphaAnimation);
}
RotateAnimation
- fromDegrees 动画开始时的角度
- toDegrees 动画结束时的角度，正值代表顺时针 负值代表逆时针
- pivoX 旋转中心点X轴坐标
- pivoY 旋转中心点Y轴坐标
- 配置文件实现
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="3000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
</set>
//---------------------旋转动画
void onRotateAnimationByFile(View view) {
Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotateanima);
_imageView.startAnimation(rotateAnimation);
}
- 代码实现
void onRotateAnimationByCode(View view) {
RotateAnimation rotateAnimation = new RotateAnimation(0f, -360f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(3000);
_imageView.startAnimation(rotateAnimation);
}
ScaleAnimation 放缩动画
-
fromXScale 动画起始时X坐标
-
fromYScale 动画起始时Y坐标
-
toXScale 动画结束时X坐标
-
toYScale 动画结束时Y坐标
-
pivotX: 动画缩放中心点的X坐标
-
pivotY:动画缩放中心点的Y坐标
-
配置文件实现
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="3000"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:pivotX="50%p"
android:pivotY="50%p"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
//-------------------缩放动画
void onScaleAnimationByFile(View view) {
Animation scaleAnima = AnimationUtils.loadAnimation(this, R.anim.scaleanima);
_imageView.startAnimation(scaleAnima);
}
- 代码实现
void onScaleAnimationByCode(View view) {
ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1.0f, 0f, 1.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(3000);
_imageView.startAnimation(scaleAnimation);
}
TranslateAnimation 位移动画
- fromXDelta:动画开始点的X轴坐标
- fromYDelta:动画开始点的Y轴坐标
- toXDelta:动画结束点的X轴坐标
- toYDelta:动画结束点的Y轴坐标
- 配置文件实现
<?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="300"
android:toYDelta="500" />
</set>
//----------位移动画
void onTransAnimationByFile(View view) {
Animation animation = AnimationUtils.loadAnimation(this, R.anim.transanima);
_imageView.startAnimation(animation);
}
- 代码实现
void onTransAnimationByCode(View view) {
TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 300f,
Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 500f);
translateAnimation.setDuration(3000);
_imageView.startAnimation(translateAnimation);
}
AnimationSet组合动画
AnimationSet可以理解为一个动画的容器，可以组合各种动画
//-----------组合动画
void onComboAnimation(View view) {
AnimationSet animationSet = new AnimationSet(true);
Animation animation = AnimationUtils.loadAnimation(this, R.anim.transanima);
Animation scaleAnima = AnimationUtils.loadAnimation(this, R.anim.scaleanima);
Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotateanima);
//设置动画
animationSet.addAnimation(animation);
animationSet.addAnimation(scaleAnima);
animationSet.addAnimation(rotateAnimation);
_imageView.startAnimation(animationSet);
}
帧动画 FrameAnimation
xml文件解释
帧动画的xml文件需要定义在drawable中
- 节点
- <animation-list> 必须作为根元素，可以包含一个或多个<item>元素
- <item> 代表一帧动画
- 属性
- oneshot:若等于true 动画只执行一次，否则一直循环
- drawable:当前帧所对应的图片资源
-
duration:当前帧持续的时长，单位毫秒
帧图片
void onFrameAnimationByFile(View view) {
_imageView.setImageResource(R.drawable.frame_list);
AnimationDrawable animationDrawable = (AnimationDrawable) _imageView.getDrawable();
animationDrawable.start();
}
java代码实现
void onFrameAnimationByCode(View view) {
AnimationDrawable animation = new AnimationDrawable();
for (int i = 0; i < 70; i++) {
int id = getResources().getIdentifier("flash1675_" + i, "drawable", getPackageName());
Drawable drawable = getResources().getDrawable(id);
animation.addFrame(drawable, 100);
}
animation.setOneShot(false);
_imageView.setImageDrawable(animation);
animation.start();
}
LayoutAnimation 布局动画
- animation xml布局文件
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
<scale
android:duration="500"
android:fromXScale="0.1"
android:fromYScale="0.1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0" />
<alpha
android:duration="1000"
android:fromAlpha="0"
android:toAlpha="1.0" />
</set>
- Activity
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_layout_anim);
listView = ((ListView) findViewById(R.id.listView));
ArrayList<String> list = new ArrayList<>();
for (int i = 0; i <= 20; i++) {
list.add("test" + i);
}
ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, list);
listView.setAdapter(adapter);
LayoutAnimationController controller = new LayoutAnimationController(AnimationUtils.loadAnimation(this, R.anim.item));
listView.setLayoutAnimation(controller);
listView.startLayoutAnimation();
}
属性动画
ValueAnimator 计算动画
ObjectAnimator 对象动画
// 第一个按钮（渐变）
void onAlphaAnimation(View view) {
ObjectAnimator oa = ObjectAnimator.ofFloat(_imageView, "alpha", 0.1f, 1.0f);
oa.setDuration(2000);
oa.start();
}
// 第二个按钮（旋转）
void onRotateAnimation(View view) {
ObjectAnimator oa = ObjectAnimator.ofFloat(_imageView, "rotation", 0f, 360f);
oa.setDuration(1000);
oa.start();
}
// 第三个按钮（放缩）
void onScaleAnimation(View view) {
//放缩倍数 从1倍放大到3倍 再从3倍缩小到1倍
ObjectAnimator.ofFloat(_imageView, "scaleX", 1f, 3f, 1f).setDuration(2000).start();
ObjectAnimator.ofFloat(_imageView, "scaleY", 1f, 3f, 1f).setDuration(2000).start();
}
// 第四个按钮（位移）
void onTransAnimation(View view) {
ObjectAnimator.ofFloat(_imageView, "translationX", 0f, 300f, 0f).setDuration(1000).start();
ObjectAnimator.ofFloat(_imageView, "translationY", 0f, 300f, 0f).setDuration(1000).start();
}
AnimatorSet 组合动画
图片.png
// 组合动画
void onComboAnimation(View view) {
ObjectAnimator alpha = ObjectAnimator.ofFloat(_imageView, "alpha", 0.1f, 1.0f);
ObjectAnimator rotate = ObjectAnimator.ofFloat(_imageView, "rotation", 0f, 360f);
ObjectAnimator scaleX = ObjectAnimator.ofFloat(_imageView, "scaleX", 1f, 3f, 1f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(_imageView, "scaleY", 1f, 3f, 1f);
AnimatorSet animationSet = new AnimatorSet();
animationSet.play(alpha).with(scaleX).with(scaleY).after(rotate);
animationSet.setDuration(5000);
animationSet.start();
}
Animator监听器
ImageView imageView = (ImageView) this.findViewById(R.id.imageView);
ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "rotation", 0f, 360f);
oa.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {
Log.d(getApplication().toString(),"《龙珠》动画片开始了");
}
@Override
public void onAnimationEnd(Animator animator) {
Log.d(getApplication().toString(),"《龙珠》动画片结束了");
}
@Override
public void onAnimationCancel(Animator animator) {
Log.d(getApplication().toString(),"《龙珠》动画片被取消了");
}
@Override
public void onAnimationRepeat(Animator animator) {
Log.d(getApplication().toString(),"OMG,电视台疯了，《龙珠》动画片被重复播放了");
}
});
oa.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
Log.d(getApplication().toString(),"《龙珠》动画片结束了!!!!!!!!!!");
}
});
oa.setDuration(1000);
oa.setRepeatCount(3);
oa.start();
网友评论