Android动画之属性动画

总归是逮着机会，稍微慢一点。在过去的很长一段时间内，都是在业务逻辑的复杂变化中挣扎。没有技术上的成长，内心还是蛮恐慌的。一不小心，又带有了些许的情绪在里面。。。。。

一、属性动画单个动画

1，布局文件添加动画作用目标

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.future.animatordemo.MainActivity">

<ImageView
android:id="@+id/content_iv"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@mipmap/koala" />

</RelativeLayout>

2，获取控件并执行动画

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
/**
* 图片
*/
private ImageView contentIV;

/**
* 自定义控件
*/
private PointView createView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_bak);
initView();
initAnimation();
initListener();
}

/**
* 初始化控件
*/
private void initView() {
contentIV = findViewById(R.id.content_iv);
}

/**
* 初始化动画
*/
private void initAnimation() {
rotateAnimation();
//alpahAnimation();

}

private void initListener() {
contentIV.setOnClickListener(this);
}

/**
* 旋转动画
*/
private void rotateAnimation() {
ObjectAnimator anim = ObjectAnimator.ofFloat(contentIV, "rotation", 0f, 360f);
anim.setDuration(1000);
anim.start();
}

/**
* 透明渐变动画
*/
private void alpahAnimation() {
ObjectAnimator anim = ObjectAnimator.ofFloat(contentIV, "alpha", 1.0f, 0.8f, 0.6f, 0.4f, 0.2f, 0.0f);
anim.setRepeatCount(-1);
anim.setRepeatMode(ObjectAnimator.REVERSE);
anim.setDuration(2000);
anim.start();
}

@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.content_iv:
Toast.makeText(MainActivity.this, "戳中朕心了~_~", Toast.LENGTH_SHORT).show();
break;
}
}

}

执行效果：
旋转动画：



透明渐变动画：



二、属性动画的合集

添加以下方法，并在onCreate()中调用

private void setAnimation() {
ObjectAnimator alphaAnim = ObjectAnimator.ofFloat(contentIV, "alpha", 1.0f, 0.5f, 0.8f, 1.0f);
ObjectAnimator scaleXAnim = ObjectAnimator.ofFloat(contentIV, "scaleX", 0.0f, 1.0f);
ObjectAnimator scaleYAnim = ObjectAnimator.ofFloat(contentIV, "scaleY", 0.0f, 2.0f, 1.0f);
ObjectAnimator rotateAnim = ObjectAnimator.ofFloat(contentIV, "rotation", 0, 360);
ObjectAnimator transXAnim = ObjectAnimator.ofFloat(contentIV, "translationX", 100, 400);
ObjectAnimator transYAnim = ObjectAnimator.ofFloat(contentIV, "translationY", 100, 750, 300, 600);
AnimatorSet set = new AnimatorSet();
set.playTogether(alphaAnim, scaleXAnim, scaleYAnim, rotateAnim, transXAnim, transYAnim);//叠加在一起运动
// set.playSequentially(alphaAnim, scaleXAnim, scaleYAnim, rotateAnim, transXAnim, transYAnim);
set.setDuration(3000);
set.start();
}

其中playTogether()将所有的动画组合在一起，同时开启动画。playSequentially()将动画顺序执行，当上一个动画没有结束时，下一个动画不会开始执行。
展示效果：



三、属性动画的监听

代码修改，添加动画运行更新监听，并在更新方法中刷新控件状态。使用了Layout()方法。

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
/**
* 图片
*/
private ImageView contentIV;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initListener();
}

/**
* 初始化控件
*/
private void initView() {
contentIV = findViewById(R.id.content_iv);
}

private void initListener() {
contentIV.setOnClickListener(this);
}

@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.content_iv:
Toast.makeText(MainActivity.this, "戳中朕心了~_~", Toast.LENGTH_SHORT).show();
break;
}
}

public void startAnimatorAnimation(View view) {
ValueAnimator animator = ValueAnimator.ofInt(0, 400);
animator.setDuration(1000);
animator.setInterpolator(new DecelerateInterpolator());

animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int curValue = (int) animation.getAnimatedValue();
contentIV.layout(curValue, curValue, curValue + contentIV.getWidth(), curValue + contentIV.getHeight());
}
});

animator.setStartDelay(1000);
animator.start();
}
}

备注：
相比于补间动画，属性动画直接修改了控件属性。直接反馈就是点击事件在补间动画时，只有在控件开始的位置执行才有效，其他地方无效。而属性动画在运行过程中，控件所在位置就是响应事件响应位置。

展示效果：



四、属性动画的应用

依据以上学习内容，制作自定义控件，展示属性动画的应用。

自定义控件实现如下：

public class PointView extends View {

public static final float RADIUS = 20f;

private Point currentPoint;

private Paint mPaint;
private Paint linePaint;

private AnimatorSet animSet;
private TimeInterpolator interpolatorType = new LinearInterpolator();

/**
* 实现关于color 的属性动画
*/
private int color;
private float radius = RADIUS;

public PointView(Context context) {
super(context);
init();
}

public PointView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public PointView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

public int getColor() {
return color;
}

public void setColor(int color) {
this.color = color;
mPaint.setColor(this.color);
}

public float getRadius() {
return radius;
}

public void setRadius(float radius) {
this.radius = radius;
}

private void init() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.TRANSPARENT);

linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
linePaint.setColor(Color.BLACK);
linePaint.setStrokeWidth(5);
}

@Override
protected void onDraw(Canvas canvas) {
if (currentPoint == null) {
currentPoint = new Point((int) RADIUS, (int) RADIUS);
drawCircle(canvas);
} else {
drawCircle(canvas);
}

drawLine(canvas);
}

private void drawLine(Canvas canvas) {
canvas.drawLine(10, getHeight() / 2, getWidth(), getHeight() / 2, linePaint);
canvas.drawLine(10, getHeight() / 2 - 150, 10, getHeight() / 2 + 150, linePaint);
canvas.drawPoint(currentPoint.x, currentPoint.y, linePaint);

}

public void startAnimation() {
Point startP = new Point((int) RADIUS, (int) RADIUS);
// Point endP = new Point(getWidth() - (int) RADIUS, getHeight() - (int) RADIUS);
Point endP = new Point(MainApplication.getApplication().getWidth() - (int) RADIUS, MainApplication.getApplication().getHeight() - (int) RADIUS);
final ValueAnimator valueAnimator = ValueAnimator.ofObject(new PointSinEvaluator(), startP, endP);
valueAnimator.setRepeatCount(-1);
valueAnimator.setRepeatMode(ValueAnimator.REVERSE);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
currentPoint = (Point) animation.getAnimatedValue();
postInvalidate();
}
});

//
ObjectAnimator animColor = ObjectAnimator.ofObject(this, "color", new ArgbEvaluator(), Color.GREEN,
Color.YELLOW, Color.BLUE, Color.WHITE, Color.RED);
animColor.setRepeatCount(-1);
animColor.setRepeatMode(ValueAnimator.REVERSE);

ValueAnimator animScale = ValueAnimator.ofFloat(20f, 80f, 60f, 10f, 35f, 55f, 10f);
animScale.setRepeatCount(-1);
animScale.setRepeatMode(ValueAnimator.REVERSE);
animScale.setDuration(5000);
animScale.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
radius = (float) animation.getAnimatedValue();
}
});

animSet = new AnimatorSet();
animSet.play(valueAnimator).with(animColor).with(animScale);
animSet.setDuration(5000);
animSet.setInterpolator(interpolatorType);
animSet.start();

}

private void drawCircle(Canvas canvas) {
float x = currentPoint.x;
float y = currentPoint.y;
canvas.drawCircle(x, y, radius, mPaint);
}

public void setInterpolatorType(int type) {
switch (type) {
case 1:
interpolatorType = new BounceInterpolator();
break;
case 2:
interpolatorType = new AccelerateDecelerateInterpolator();
break;
case 3:
interpolatorType = new DecelerateInterpolator();
break;
case 4:
interpolatorType = new AnticipateInterpolator();
break;
case 5:
interpolatorType = new LinearInterpolator();
break;
case 6:
interpolatorType = new LinearOutSlowInInterpolator();
break;
case 7:
interpolatorType = new OvershootInterpolator();
default:
interpolatorType = new LinearInterpolator();
break;
}
}

@TargetApi(Build.VERSION_CODES.KITKAT)
public void pauseAnimation() {
if (animSet != null) {
animSet.pause();
}
}

public void stopAnimation() {
if (animSet != null) {
animSet.cancel();
this.clearAnimation();
}
}
}


XML文件中使用：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.future.animatordemo.MainActivity">

<ImageView
android:id="@+id/content_iv"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@mipmap/koala" />

<com.future.animatordemo.view.PointView
android:id="@+id/create_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</RelativeLayout>

初始化控件并使用控件：

public class MainActivityBak extends AppCompatActivity implements View.OnClickListener {
/**
* 图片
*/
private ImageView contentIV;

/**
* 自定义控件
*/
private PointView createView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_bak);
initView();
initAnimation();
initListener();
}

/**
* 初始化控件
*/
private void initView() {
contentIV = findViewById(R.id.content_iv);
createView = findViewById(R.id.create_view);
}

/**
* 初始化动画
*/
private void initAnimation() {
setAnimation();
createView.startAnimation();
}

private void initListener() {
contentIV.setOnClickListener(this);
}

private void setAnimation() {
ObjectAnimator alphaAnim = ObjectAnimator.ofFloat(contentIV, "alpha", 1.0f, 0.5f, 0.8f, 1.0f);
ObjectAnimator scaleXAnim = ObjectAnimator.ofFloat(contentIV, "scaleX", 0.0f, 1.0f);
ObjectAnimator scaleYAnim = ObjectAnimator.ofFloat(contentIV, "scaleY", 0.0f, 2.0f, 1.0f);
ObjectAnimator rotateAnim = ObjectAnimator.ofFloat(contentIV, "rotation", 0, 360);
ObjectAnimator transXAnim = ObjectAnimator.ofFloat(contentIV, "translationX", 100, 400);
ObjectAnimator transYAnim = ObjectAnimator.ofFloat(contentIV, "translationY", 100, 750, 300, 600);
AnimatorSet set = new AnimatorSet();
set.playTogether(alphaAnim, scaleXAnim, scaleYAnim, rotateAnim, transXAnim, transYAnim);//叠加在一起运动
// set.playSequentially(alphaAnim, scaleXAnim, scaleYAnim, rotateAnim, transXAnim, transYAnim);
set.setDuration(3000);
set.start();
}

@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.content_iv:
Toast.makeText(MainActivity.this, "戳中朕心了~_~", Toast.LENGTH_SHORT).show();
break;
}
}
}

展示效果：



源码传送门

有人请教我哆啦A梦和大雄最后有没有在一起，我便问他，许仙最后有没有和白蛇在一起。生之有涯‘最后'如何，也不过是蜿蜒个几十年的一件小事，而大事是他们，和我们曾经在一起过。 

所有被千夫所指的困难，都是为了淘汰掉懦夫！