Android 补间动画基础
（1）java写法：
在xml中放置一张图片：
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/anim_drawble"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
接着在MainActivity中修改代码如下：
private TranslateAnimation translateAnimatio;
private ScaleAnimation scaleAnimation;
private RotateAnimation rotateAnimation;
private AlphaAnimation alphaAnimation;
private AnimationSet animationSet;
/**
* 补间动画，java写法
*/
/**
* 位移动画
*fromXDelta 起始点X轴坐标，可以是数值、百分数、百分数p 三种样式，同scale
*fromYDelta 起始点Y轴从标，可以是数值、百分数、百分数p 三种样式
*toXDelta 结束点X轴坐标
*toYDelta 结束点Y轴坐标
*/
translateAnimatio= new TranslateAnimation(0,200,0,200);
translateAnimatio.setDuration(2000);
//translateAnimatio.setFillAfter(true);//保持最后的状态
// translate.startAnimation(translateAnimatio);
/**
* 缩放动画ScaleAnimation
* fromXScale 起始的X方向上相对自身的缩放比例，浮点值，比如1.0代表自身无变化，0.5代表起始时缩小一倍，2.0代表放大一倍；
* toXScale 结尾的X方向上相对自身的缩放比例，浮点值；
* fromYScale 起始的Y方向上相对自身的缩放比例，浮点值
* toYScale 结尾的Y方向上相对自身的缩放比例，浮点值
*/
scaleAnimation = new ScaleAnimation(0f,2f,0f,2f);
//起点加上100,100，不在从0开始缩放
// scaleAnimation = new ScaleAnimation(0f,2f,0f,2f,100,100);
//如果是50%p（代码0.5），那么就是表示在当前的左上角加上父控件宽度的50%做为起始点x轴坐标。
scaleAnimation.setDuration(2000);
scaleAnimation.setRepeatCount(2);//3次
// scale.startAnimation(scaleAnimation);
/**
* 旋转动画
* 1.fromDegrees 为开始旋转的角度，toDegress
* 正值代表顺时针方向度数，负值代码逆时针方向度数，toDegrees为结束时旋转角度，取值同fromDegrees
*/
//rotateAnimation = new RotateAnimation(0,360,0,0);//以控件左上角的0，0起点开始
// rotateAnimation = new RotateAnimation(0,-720,RotateAnimation.RELATIVE_TO_SELF,0.5f
// ,RotateAnimation.RELATIVE_TO_SELF,0.5f);//旋转中心以控件自身中心开始
rotateAnimation = new RotateAnimation(0,360,RotateAnimation.RELATIVE_TO_PARENT,0.5f,
RotateAnimation.RELATIVE_TO_PARENT,0.5f);//以整个父布局的中心开始
rotateAnimation.setDuration(2000);
// rotate.startAnimation(rotateAnimation);
/**
* 透明动画
*fromAlpha 动画开始的透明度，从0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明
* toAlpha 动画结束时的透明度，也是从0.0 --1.0 ，0.0表示全透明，1.0表示完全不透明
*/
alphaAnimation = new AlphaAnimation(0,1);
alphaAnimation.setDuration(2000);
// alpla.startAnimation(alphaAnimation);
/**
* 组合动画 AnimationSet 类 参数true代表所有的animation都有效
*
*/
animationSet = new AnimationSet(true);
animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(translateAnimatio);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(rotateAnimation);
animationSet.setDuration(4000);
animationSet.setFillAfter(true);
img.startAnimation(animationSet);
其中各个部分的注释很详细这里就不多做阐述；
（2）xml写法：
修改xml代码如下：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/move"
app:layout_constraintRight_toLeftOf="@+id/rotate"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginTop="20dp"
app:layout_constraintTop_toTopOf="parent"
android:text="平移"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/rotate"
android:text="旋转"
app:layout_constraintRight_toLeftOf="@id/alphe"
app:layout_constraintLeft_toRightOf="@+id/move"
app:layout_constraintTop_toTopOf="@+id/move"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/alphe"
android:text="透明"
app:layout_constraintRight_toLeftOf="@id/scale"
app:layout_constraintLeft_toRightOf="@+id/rotate"
app:layout_constraintTop_toTopOf="@+id/move"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/scale"
android:text="缩放"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="@+id/alphe"
app:layout_constraintRight_toLeftOf="@id/move"
app:layout_constraintTop_toTopOf="@+id/move"/>
<Button
android:id="@+id/mix"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="组合动画"
app:layout_constraintTop_toBottomOf="@id/move"
app:layout_constraintLeft_toLeftOf="@id/move"
app:layout_constraintRight_toRightOf="@id/move"
android:layout_margin="5dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="帧动画"
android:id="@+id/anmi_drawble"
app:layout_constraintTop_toTopOf="@+id/mix"
app:layout_constraintLeft_toRightOf="@+id/mix"/>
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/anim_drawble"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
在res文件夹下新建一个anim文件夹再new一个动画xml文件，修改如下：
<-------animation------->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="sequentially">
<!--平移动画标签-->
<translate
android:fromXDelta="0%p"
android:toXDelta="20%p"
android:fromYDelta="0%p"
android:toYDelta="20%p"
android:duration="4000" >
</translate>
<!--缩放动画标签-->
<scale
android:fromXScale="1.0"
android:toXScale="0.2"
android:fromYScale="1.0"
android:toYScale="0.2"
android:pivotX="50%"
android:pivotY="50%"
android:duration="4000" >
</scale>
<!--旋转-->
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotY="50%"
android:pivotX="50%"
android:duration="4000">
</rotate>
<!--透明度from-to开始到结束的透明度-->
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.2"
android:duration="4000">
</alpha>
</set>
<-----scale---->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--缩放动画标签 pivotX缩放轴X的坐标-->
<scale
android:fromXScale="1.0"
android:toXScale="0.2"
android:fromYScale="1.0"
android:toYScale="0.2"
android:pivotX="50%"
android:pivotY="50%"
android:duration="4000" />
</set>
<----alpha------->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--透明度from-to开始到结束的透明度-->
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.2"
android:duration="4000"/>
</set>
<----translate------->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--平移动画标签-->
<translate
android:fromXDelta="0.5"
android:toXDelta="0.5"
android:fromYDelta="336.5"
android:toYDelta="25.56"
android:repeatCount="2"
android:repeatMode="reverse"
android:duration="4000" />
</set>
<----rotate---->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--旋转-->
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotY="50%"
android:pivotX="50%"
android:duration="4000"
/>
</set>
这里顺带加入帧动画在res的drawble文件下new一个anim_drwable用于放置帧动画的资源文件：
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="@drawable/action1" android:duration="300"/>
<item android:drawable="@drawable/action2" android:duration="300"/>
<item android:drawable="@drawable/action3" android:duration="300"/>
<item android:drawable="@drawable/action4" android:duration="300"/>
</animation-list>
再修改MainActivity代码如下：
scale = (Button)findViewById(R.id.scale);
rotate = (Button)findViewById(R.id.rotate);
translate = (Button)findViewById(R.id.move);
alpla = (Button)findViewById(R.id.alphe);
animD = (Button)findViewById(R.id.anmi_drawble);
mix = (Button)findViewById(R.id.mix);
mix.setOnClickListener(this);
img = (ImageView)findViewById(R.id.image);
img.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "xxx", Toast.LENGTH_SHORT).show();
}
});
scale.setOnClickListener(this);
rotate.setOnClickListener(this);
alpla.setOnClickListener(this);
translate.setOnClickListener(this);
animD.setOnClickListener(this);
@Override
public void onClick(View v) {
switch (v.getId()){
/**
* 补间动画xml写法
*/
case R.id.move:
Animation translate_anmi = AnimationUtils.loadAnimation(MainActivity.this,R.anim.translate);
translate_anmi.setRepeatCount(-1);
img.startAnimation(translate_anmi);
break;
case R.id.rotate:
Animation rotate_anmi = AnimationUtils.loadAnimation(MainActivity.this,R.anim.rotate);
img.startAnimation(rotate_anmi);
break;
case R.id.scale:
Animation scale_anmi = AnimationUtils.loadAnimation(MainActivity.this,R.anim.scale);
img.startAnimation(scale_anmi);
break;
case R.id.alphe:
Animation alphe_anmi = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);
img.startAnimation(alphe_anmi);
break;
case R.id.mix:
Animation anmi = AnimationUtils.loadAnimation(MainActivity.this, R.anim.animation);
img.startAnimation(anmi);
break;
/**
* 帧动画xml写法
*/
case R.id.anmi_drawble:
AnimationDrawable anmi_drawble = (AnimationDrawable)img.getDrawable();
anmi_drawble.setOneShot(false);
if (anmi_drawble.isRunning())
anmi_drawble.stop();
else
anmi_drawble.start();
break;
default:
break;
}
}
帧动画的java实现：
/**
* 帧动画java实现 舍弃，还不如xml方便需要把引用的img的src去掉
*/
//创建一个AnimationDrawable
animationDrawable = new AnimationDrawable();
//资源图片
int []ids = {R.drawable.action1,R.drawable.action2,R.drawable.action3,R.drawable.action4};
for(int i=0; i<4;i++){
//for 循环添加每一帧动画
Drawable frame = getResources().getDrawable(ids[i]);
//设定时长
animationDrawable.addFrame(frame,200);
}
//是否循环播放 true代表只播放一次
animationDrawable.setOneShot(false);
img.setBackground(animationDrawable);
animationDrawable.start();
这里对应每个按钮写下了对应的点击事件，具体学习更多参考官方资料。
扫一扫
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
