补间动画通过对View进行一系列的图形变化实现动画效果,包括透明度变化、平移、缩放、旋转。补间动画的效果常用通过XML文件定义,当然代码也是可以的
首先在res下创建anim文件用于存放动画 文件
接下来就是在xml文件中定义各种动画
透明度渐变:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="1000"
android:interpolator="@android:anim/linear_interpolator"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:fromAlpha="1.0"
android:toAlpha="0.0">
</alpha>
</set>
属性详解:
android:interpolator:控制动画变化速度,可设置的值有@android:anim/linear_interpolator(匀速)、@android:anim/acceler_interpolator(先慢,后加速)等
android:duration:动画播放时长
android:repeatCount:动画重复次数,infinite为无限循环
android:repeatMode:动画重复的方式。reverse反向、restart重新开始
android:fromAlpha:view在动画开始时的透明度,0.0全透明,1.0不透明
android:toAlpha:view在动画结束时的透明度,0.0全透明,1.0不透明
上述属性中 android:interpolator、android:duration、android:repeatCount、android:repeatMode在其他补间动画中也可使用
旋转:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="360"
android:duration="5000"
android:repeatCount="infinite"
android:repeatMode="reverse"/>
</set>
属性详解:
android:fromDegrees:view在动画开始时的角度
android:toDegrees:view在动画结束时的角度
android:pivotX:旋转点X坐标
android:pivotY:旋转点Y坐标
android:pivotX和android:pivotY属性可以为整数、百分数(小数)、百分数p。例:50、50%、50%p,分别表示当前view左上角的X坐标加50px作为旋转点坐标;当前view左上角的X坐标加自己View宽度的50%作为旋转点坐标、当前view左上角的X坐标加父控件宽度50%作为旋转点坐标
缩放:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1.0"
android:toXScale="0.5"
android:fromYScale="1.0"
android:toYScale="0.5"
android:duration="1000"
android:repeatCount="infinite"
android:repeatMode="reverse"/>
</set>
属性详解:
android:pivotX:缩放点的X坐标
android:pivotY:缩放点的Y坐标
android:fromXScale:view动画开始时X轴缩放系数,1.0表示不变化
android:toXScale:view动画结束时X轴缩放系数,1.0表示不变化
android:fromYScale:view动画开始时Y轴缩放系数,1.0表示不变化
android:toYScale:view动画结束时Y轴缩放系数,1.0表示不变化
平移:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="0"
android:fromXDelta="0"
android:toYDelta="100"
android:toXDelta="100"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:duration="1000"/>
</set>
属性详解:
android:fromYDelta:view动画开始时Y坐标
android:fromXDelta:view动画开始时X坐标
android:toYDelta:view动画结束时Y坐标
android:toXDelta:view动画结束时X坐标
在主界面布局放置图片和4个按钮,点击按钮开始动画
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="@+id/iv"
android:layout_width="120dp"
android:layout_height="100dp"
android:src="@drawable/music"
android:layout_centerHorizontal="true"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/iv">
<Button
android:id="@+id/appha"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="透明度变化"/>
<Button
android:id="@+id/rotate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="旋转"/>
<Button
android:id="@+id/scale"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="缩放"/>
<Button
android:id="@+id/translate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="平移"/>
</LinearLayout>
</RelativeLayout>
界面交互代码:
package com.fangkuai.animation;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity implements
View.OnClickListener {
private Button appha;
private Button rotate;
private Button scale;
private Button translate;
private ImageView iv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
appha = (Button) findViewById(R.id.appha);
rotate = (Button) findViewById(R.id.rotate);
scale = (Button) findViewById(R.id.scale);
translate = (Button) findViewById(R.id.translate);
iv = (ImageView) findViewById(R.id.iv);
appha.setOnClickListener(this);
rotate.setOnClickListener(this);
scale.setOnClickListener(this);
translate.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.appha:
Animation animation1 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha_animation);
iv.startAnimation(animation1);
break;
case R.id.rotate:
Animation animation2 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate_animation);
iv.startAnimation(animation2);
break;
case R.id.scale:
Animation animation3 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale_animation);
iv.startAnimation(animation3);
break;
case R.id.translate:
Animation animation4 = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate_animation);
iv.startAnimation(animation4);
break;
}
}
}