动画分析
1.先旋转
2.放大
3.缩小
具体实现:
1.我的想法:画6个圆。让它旋转!
圆的半径不变,就是x,y不停的变。因为角度不停变。有一个变量角度通过动画获取
正确思路:0---360。拿到一个变化的旋转角度。然后画6个圆!
2.放大通过插值器实现的
2.收缩:通过动画和手动绘制,不应该是用transfer,x,y实现吗
停止旋转动画
注意的地方:
1.smallAnimator.setInterpolator(new AnticipateInterpolator(10f));//
2.中心点什么时候去获取
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mCenterx = getWidth() / 2;
mCentery = getHeight() / 2;
旋转动画
/**
* 8
* 通过属性动画让6个圆点开始旋转
*/
private void rorateAni() {
rorateAnimator = ValueAnimator.ofFloat(0f, 360f);
rorateAnimator.setDuration(80000);
rorateAnimator.setInterpolator(new LinearInterpolator());
rorateAnimator.setRepeatCount(-1);
rorateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
changeValue = (float) animation.getAnimatedValue();//得到变化的角度值
Log.d(TAG, "rorateAni" + changeValue);
invalidate();
}
});
rorateAnimator.start();
}
旋转时候的绘制
private void drawCircle(Canvas canvas) {
float perAngle = (float) (2 * Math.PI / arrayList.size());
for (int i = 0; i < arrayList.size(); i++) {
//小圆的坐标x:屏幕的2分之1+cosA
float angel = (float) (i * perAngle + changeValue);
float cx = (float) (mCenterx + Math.cos(angel) * BigRadius);
float cy = (float) (mCentery + Math.sin(angel) * BigRadius);
paint.setColor(arrayList.get(i));
canvas.drawCircle(cx, cy, radius, paint);
}
}
聚合动画:那个大圆的半径在不停的变成0
/***
* 聚合动画
*/
public void startExpandAni() {
rorateAnimator.cancel();
currentAniType = TYPE_SOUSHOU;
smallAnimator = ValueAnimator.ofFloat(BigRadius, 0f);
smallAnimator.setInterpolator(new AnticipateInterpolator(10f));//
smallAnimator.setDuration(2000);
smallAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
changeSmallRudio = (float) animation.getAnimatedValue();//得到变化的角度值
Log.d(TAG, "startExpandAni" + changeSmallRudio);
invalidate();
}
});
smallAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
// smallAnimator.reverse();
}
});
smallAnimator.start();
}
private void drawSmallCircle(Canvas canvas) {
float perAngle = (float) (2 * Math.PI / arrayList.size());
for (int i = 0; i < arrayList.size(); i++) {
//小圆的坐标x:屏幕的2分之1+cosA
float angel = (float) (i * perAngle + changeValue);
float cx = (float) (mCenterx + Math.cos(angel) * changeSmallRudio);
float cy = (float) (mCentery + Math.sin(angel) * changeSmallRudio);
paint.setColor(arrayList.get(i));
canvas.drawCircle(cx, cy, radius, paint);
}
}
完整的代码:
public class SixCircle extends View {
private static final String TAG = "SixCircle";
ArrayList<Integer> arrayList = new ArrayList<>();
public SixCircle(Context context) {
this(context, null);
}
public SixCircle(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
init();
rorateAni();
}
Paint paint;
private void init() {
arrayList.add(Color.RED);
arrayList.add(Color.YELLOW);
arrayList.add(Color.BLUE);
arrayList.add(Color.GREEN);
arrayList.add(Color.GRAY);
arrayList.add(Color.BLACK);
paint = new Paint();
}
public SixCircle(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
float radius = 50;
float BigRadius = 180;
float mCenterx = 0;
float mCentery = 0;
float changeValue;
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mCenterx = getWidth() / 2;
mCentery = getHeight() / 2;
if (currentAniType == TYPE_RORATE) {
drawCircle(canvas);
} else if (currentAniType == TYPE_SOUSHOU) {
drawSmallCircle(canvas);
}
}
private void drawSmallCircle(Canvas canvas) {
float perAngle = (float) (2 * Math.PI / arrayList.size());
for (int i = 0; i < arrayList.size(); i++) {
//小圆的坐标x:屏幕的2分之1+cosA
float angel = (float) (i * perAngle + changeValue);
float cx = (float) (mCenterx + Math.cos(angel) * changeSmallRudio);
float cy = (float) (mCentery + Math.sin(angel) * changeSmallRudio);
paint.setColor(arrayList.get(i));
canvas.drawCircle(cx, cy, radius, paint);
}
}
private void drawCircle(Canvas canvas) {
float perAngle = (float) (2 * Math.PI / arrayList.size());
for (int i = 0; i < arrayList.size(); i++) {
//小圆的坐标x:屏幕的2分之1+cosA
float angel = (float) (i * perAngle + changeValue);
float cx = (float) (mCenterx + Math.cos(angel) * BigRadius);
float cy = (float) (mCentery + Math.sin(angel) * BigRadius);
paint.setColor(arrayList.get(i));
canvas.drawCircle(cx, cy, radius, paint);
}
}
ValueAnimator rorateAnimator;
ValueAnimator smallAnimator;
/**
* 8
* 通过属性动画让6个圆点开始旋转
*/
private void rorateAni() {
rorateAnimator = ValueAnimator.ofFloat(0f, 360f);
rorateAnimator.setDuration(80000);
rorateAnimator.setInterpolator(new LinearInterpolator());
rorateAnimator.setRepeatCount(-1);
rorateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
changeValue = (float) animation.getAnimatedValue();//得到变化的角度值
Log.d(TAG, "rorateAni" + changeValue);
invalidate();
}
});
rorateAnimator.start();
}
int currentAniType = 0;
final static int TYPE_RORATE = 0;
final static int TYPE_EXPAND = 1;
final static int TYPE_SOUSHOU = 2;
float changeSmallRudio;
/***
* 聚合动画
*/
public void startExpandAni() {
rorateAnimator.cancel();
currentAniType = TYPE_SOUSHOU;
smallAnimator = ValueAnimator.ofFloat(BigRadius, 0f);
smallAnimator.setInterpolator(new AnticipateInterpolator(10f));//
smallAnimator.setDuration(2000);
smallAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
changeSmallRudio = (float) animation.getAnimatedValue();//得到变化的角度值
Log.d(TAG, "startExpandAni" + changeSmallRudio);
invalidate();
}
});
smallAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
// smallAnimator.reverse();
}
});
smallAnimator.start();
}
demo地址:
demo地址:https://github.com/pengcaihua123456/shennandadao