点击不同按钮,可以实现控件的平移,缩放,旋转和透明度变化,从而实现各个控件的动画效果。
一、补间动画使用demo
1、BJAnimatorActivity
public class BJAnimatorActivity extends Activity implements View.OnClickListener {
private Button mBtnScale;
private Button mBtnTranstion;
private Button mBtnRotate;
private Button mBtnAlpha;
private Button mBtnAniSet;
private ImageView mImg;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bj_animator);
initview();
}
private void initview() {
mBtnTranstion = findViewById(R.id.bjTrans);
mBtnScale = findViewById(R.id.bjScale);
mBtnRotate = findViewById(R.id.bjRotate);
mBtnAlpha = findViewById(R.id.bjAlpha);
mBtnAniSet = findViewById(R.id.bjAniSet);
mImg = findViewById(R.id.bjImg);
mBtnTranstion.setOnClickListener(this);
mBtnScale.setOnClickListener(this);
mBtnRotate.setOnClickListener(this);
mBtnAlpha.setOnClickListener(this);
mBtnAniSet.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.bjTrans:
/*animation = AnimationUtils.loadAnimation(this, R.anim.animator_translate);
mImg.startAnimation(animation);*/
TranslateAnimation translateAnimation = new TranslateAnimation(0, 200, 0, 200);
translateAnimation.setDuration(1000L);
// 动画执行完成后保持状态
translateAnimation.setFillAfter(true);
mImg.startAnimation(translateAnimation);
break;
case R.id.bjScale:
ScaleAnimation scaleAnimation = new ScaleAnimation(1, 2, 1, 2, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(2000L);
mImg.startAnimation(scaleAnimation);
break;
case R.id.bjRotate:
RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(2000L);
mImg.startAnimation(rotateAnimation);
break;
case R.id.bjAlpha:
AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0.1f);
alphaAnimation.setDuration(2000L);
mImg.startAnimation(alphaAnimation);
break;
case R.id.bjAniSet:
Animation animationSet = AnimationUtils.loadAnimation(this, R.anim.aset);
//开始动画集
animationSet.start();
//取消动画集
animationSet.cancel();
//判断当前动画集是否开始
animationSet.hasStarted();
//判断当前动画集是否结束
animationSet.hasEnded();
//重新开始当前动画集
animationSet.reset();
mImg.startAnimation(animationSet);
default:
break;
}
}
}
2、activity_bj_animator.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/bjTrans"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="平移" />
<Button
android:id="@+id/bjScale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="缩放" />
<Button
android:id="@+id/bjRotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="旋转" />
<Button
android:id="@+id/bjAlpha"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="透明" />
<Button
android:id="@+id/bjAniSet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="组合" />
<ImageView
android:id="@+id/bjImg"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:src="@drawable/pikachu" />
</LinearLayout>
3、aset.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="2000"
android:fillAfter="true"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="200"
android:toYDelta="0" />
<scale
android:duration="2000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="2"
android:toYScale="2" />
<rotate
android:duration="2000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
<alpha
android:duration="2000"
android:fromAlpha="1"
android:toAlpha="0.2" />
</set>
4、实现效果
二、属性动画-ValueAnimator 使用demo
1、AnimatorActivity
public class AnimatorActivity extends Activity implements View.OnClickListener {
private Button mBtnTranslate;
private Button mBtnScale;
private Button mBtnRotate;
private Button mBtnAlpha;
private ImageView mImgs;
private LinearLayout mLinear;
private int width;
private int height;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_animator);
initview();
}
private void initview() {
mBtnTranslate = findViewById(R.id.translate);
mBtnScale = findViewById(R.id.scales);
mBtnRotate = findViewById(R.id.rotate);
mBtnAlpha = findViewById(R.id.alpha);
mImgs = findViewById(R.id.imgs);
mLinear = findViewById(R.id.linearAnimator);
mBtnTranslate.setOnClickListener(this);
mBtnScale.setOnClickListener(this);
mBtnRotate.setOnClickListener(this);
mBtnAlpha.setOnClickListener(this);
mImgs.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.translate:
lineAnimator();
break;
case R.id.scales:
scaleAnimator();
break;
case R.id.rotate:
raAnimator();
break;
case R.id.alpha:
cricleAnimator();
break;
default:
break;
}
}
// 定义一个修改ImageView位置的方法
private void moveView(View view, int rawX, int rawY) {
int left = rawX - mImgs.getWidth() / 2;
int top = rawY - mImgs.getHeight();
int width = left + view.getWidth();
int height = top + view.getHeight();
view.layout(left, top, width, height);
}
// 位移,按轨迹方程来运动
private void lineAnimator() {
width = mLinear.getWidth();
height = mLinear.getHeight();
ValueAnimator xValue = ValueAnimator.ofInt(height, 0, height / 4, height / 2, height / 4 * 3, height);
xValue.setDuration(3000L);
xValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
// 轨迹方程
int x = width / 2;
int y = (int) animation.getAnimatedValue();
moveView(mImgs, x, y);
}
});
xValue.setInterpolator(new LinearInterpolator());
xValue.start();
}
// 缩放效果
private void scaleAnimator() {
ValueAnimator vValue = ValueAnimator.ofFloat(1.0f, 0.6f, 1.2f, 1.0f, 0.6f, 1.2f, 1.0f);
vValue.setDuration(1000L);
vValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float scale = (float) animation.getAnimatedValue();
mImgs.setScaleX(scale);
mImgs.setScaleY(scale);
}
});
vValue.setInterpolator(new LinearInterpolator());
vValue.start();
}
// 旋转且透明度变化
private void raAnimator() {
ValueAnimator rValue = ValueAnimator.ofInt(0, 360);
rValue.setDuration(1000L);
rValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int rotateValue = (int) animation.getAnimatedValue();
mImgs.setRotation(rotateValue);
float fractionValue = animation.getAnimatedFraction();
mImgs.setAlpha(fractionValue);
}
});
rValue.setInterpolator(new LinearInterpolator());
rValue.start();
}
// 圆形旋转
private void cricleAnimator() {
width = mLinear.getWidth();
height = mLinear.getHeight();
int R = width / 4;
ValueAnimator tValue = ValueAnimator.ofFloat(0, (float) (2.0f * Math.PI));
tValue.setDuration(1000L);
tValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float t = (float) animation.getAnimatedValue();
int x = (int) (R * Math.sin(t) + width / 2);
int y = (int) (R * Math.cos(t) + height / 2);
moveView(mImgs, x, y);
}
});
tValue.setInterpolator(new LinearInterpolator());
tValue.start();
}
}
2、activity_animator.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linearAnimator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/translate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="位移" />
<Button
android:id="@+id/scales"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="缩放" />
<Button
android:id="@+id/rotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="旋转且透明" />
<Button
android:id="@+id/alpha"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="圆形旋转" />
<ImageView
android:id="@+id/imgs"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:src="@drawable/pikachu" />
</LinearLayout>
3、实现效果
三、属性动画-ObjectAnimator 使用demo
1、ObjectAnimatorActivity
public class ObjectAnimatorActivity extends Activity implements View.OnClickListener {
private Button mBtnScale;
private Button mBtnTranstion;
private Button mBtnRotate;
private Button mBtnAlpha;
private ImageView mObgImg;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_object_animator);
initview();
}
private void initview() {
mBtnTranstion = findViewById(R.id.objTrans);
mBtnScale = findViewById(R.id.objScale);
mBtnRotate = findViewById(R.id.objRotate);
mBtnAlpha = findViewById(R.id.objAlpha);
mObgImg = findViewById(R.id.objImg);
mBtnTranstion.setOnClickListener(this);
mBtnScale.setOnClickListener(this);
mBtnRotate.setOnClickListener(this);
mBtnAlpha.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.objTrans:
transtionAnimator();
break;
case R.id.objScale:
scaleAnomator();
break;
case R.id.objRotate:
rotateAnimator();
break;
case R.id.objAlpha:
alphaAnomator();
break;
default:
break;
}
}
// 平移
private void transtionAnimator() {
// 沿X轴平移,还有Y轴平移
/*ObjectAnimator animator = ObjectAnimator.ofFloat(mObgImg, "translationX", 0, 100, 200, -100, -200, 0);
animator.setDuration(1000L);
animator.start();*/
// X,Y轴同时平移
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(
ObjectAnimator.ofFloat(mObgImg, "translationX", 0, 100, 200, -100, -200, 0)
.setDuration(2000L),
ObjectAnimator.ofFloat(mObgImg, "translationY", 0, 100, 200, -100, -200, 0)
.setDuration(2000L)
);
animatorSet.start();
}
// 缩放
private void scaleAnomator() {
// 沿X轴缩放,还有Y轴缩放
/*ObjectAnimator animator = ObjectAnimator.ofFloat(mObgImg, "scaleX", 1f, 1.5f, 2f, 1.5f, 1f);
animator.setDuration(1000L);
animator.start();*/
// X,Y轴同时缩放
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(
ObjectAnimator.ofFloat(mObgImg, "scaleX", 1f, 1.5f, 2f, 1.5f, 1f)
.setDuration(2000L),
ObjectAnimator.ofFloat(mObgImg, "scaleY", 1f, 1.5f, 2f, 1.5f, 1f)
.setDuration(2000L)
);
animatorSet.start();
}
// 旋转
private void rotateAnimator() {
// 沿X轴旋转,还有Y轴旋转和Z轴旋转
/*ObjectAnimator animator = ObjectAnimator.ofFloat(mObgImg, "rotationX", 0,360);
animator.setDuration(2000L);
animator.start();*/
// X,Y,Z轴同时缩放
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(
ObjectAnimator.ofFloat(mObgImg, "rotationX", 0, 360)
.setDuration(2000L),
ObjectAnimator.ofFloat(mObgImg, "rotationY", 0, 360)
.setDuration(2000L),
ObjectAnimator.ofFloat(mObgImg, "rotation", 0, 360)
.setDuration(2000L)
);
animatorSet.start();
}
// 透明
private void alphaAnomator() {
ObjectAnimator animator = ObjectAnimator.ofFloat(mObgImg, "alpha", 0, 0.5f, 1.0f);
animator.setDuration(2000L);
animator.start();
}
}
2、activity_object_animator.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/objTrans"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="平移" />
<Button
android:id="@+id/objScale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="缩放" />
<Button
android:id="@+id/objRotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="旋转" />
<Button
android:id="@+id/objAlpha"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="透明" />
<ImageView
android:id="@+id/objImg"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:src="@drawable/pikachu" />
</LinearLayout>
3、实现效果