首先看一下效果图
如图所示的 小圆球是我们的自定义View实现的
我们通过下方的按钮可以实现对小红球的种种动画(属性动画可以改变作用View的属性)
首先我们定义一个自定义View类 并且结合我们的自定义属性
public class CircleView extends View {
private int radius;
private int color;
public CircleView(Context context) {
super(context);
}
public CircleView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleView);
for (int i = 0; i < typedArray.length(); i++) {
int index = typedArray.getIndex(i);
switch (i) {
case R.styleable.CircleView_radius:
radius = typedArray.getInt(index, 20);
break;
case R.styleable.CircleView_color:
color = typedArray.getColor(index, Color.GREEN);
break;
}
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(getMeasuredWidth(widthMeasureSpec), getMeasuredHeight(heightMeasureSpec));
}
private int getMeasuredHeight(int heightMeasureSpec) {
int mode = MeasureSpec.getMode(heightMeasureSpec);
int size = MeasureSpec.getSize(heightMeasureSpec);
int result = 0;
if (mode == MeasureSpec.AT_MOST) {
result = getPaddingTop() + getPaddingBottom() + 2 * radius;
} else if (mode == MeasureSpec.EXACTLY) {
result = size;
}
return result;
}
private int getMeasuredWidth(int widthMeasureSpec) {
int mode = MeasureSpec.getMode(widthMeasureSpec);
int size = MeasureSpec.getSize(widthMeasureSpec);
int result = 0;
if (mode == MeasureSpec.AT_MOST) {
result = getPaddingLeft() + getPaddingRight() + 2 * radius;
} else if (mode == MeasureSpec.EXACTLY) {
result = size;
}
return result;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(color);
paint.setAntiAlias(true);
canvas.drawCircle(radius, radius, radius, paint);
}
}
自定义属性定义在values文件夹下面
<resources>
<declare-styleable name="CircleView">
<attr name="radius" format="integer"></attr>
<attr name="color" format="color"></attr>
</declare-styleable>
</resources>
(别忘了放入布局中)
这样一个圆就出来 接下来就是我们的属性动画
因为组合动画是四种动画的合并 所以我直接展示组合动画的代码了
<objectAnimator
android:duration="2000"
android:propertyName="alpha"
android:valueFrom="0"
android:valueTo="1"></objectAnimator>
<objectAnimator
android:duration="2000"
android:propertyName="rotationX"
android:valueFrom="0"
android:valueTo="100"></objectAnimator>
<objectAnimator
android:duration="2000"
android:propertyName="scaleX"
android:valueFrom="0"
android:valueTo="2"></objectAnimator>
<objectAnimator
android:duration="2000"
android:propertyName="scaleY"
android:valueFrom="0"
android:valueTo="2"></objectAnimator>
<objectAnimator
android:duration="2000"
android:propertyName="translationX"
android:valueFrom="0"
android:valueTo="600"></objectAnimator>
<objectAnimator
android:duration="2000"
android:propertyName="translationY"
android:valueFrom="0"
android:valueTo="920"></objectAnimator>
接下来就是我们点击时加载动画了
//animatorId代表的是我们刚刚写的animator文件夹下的文件
private void bindAnimator(int animatorId) {
Animator animator = AnimatorInflater.loadAnimator(context, animatorId);
//cvCircle就是我们自己画的那么圆
animator.setTarget(cvCircle);
animator.start();
}