圆的变化(自定义动画,及自定义UI)

之前在面试的时候被问到过一个问题,如何实现一个圆沿着一条线由大到小

当时回答的含糊不清,现在已经明白怎么去实现

关键点:Paint,path,canvas

一种方法

在activity中去控制圆的x,y坐标点 还有圆的直径。

在activity中写一个Timer 定时器,定时去绘制这个圆view。

圆view继承自view ,将变化接口暴露出去即可,重写onDrow函数,根据x y 轴重绘

上代码吧

public class ChangedCirclerView extends View {
private Paint mPaint;
private int BALL_SIZE; //圆的坐标
private int ballX;
private int ballY; public ChangedCirclerView(Context context){
super(context);
initView();
} public ChangedCirclerView (Context context,int mballX, int mballY){
super(context);
initView();
ballX = mballX;
ballY = mballY;
} public ChangedCirclerView(Context context, AttributeSet attributeSet){
super(context,attributeSet);
initView();
} private void initView(){
mPaint = new Paint();
} public void invalidateBall(int mBallX,int mBallY,int mBallRadiu) {
ballX = mBallX;
ballY = mBallY;
BALL_SIZE = mBallRadiu; invalidate();
} @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
} @Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
} @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(Color.rgb(255,215,0));
mPaint.setAntiAlias(true); canvas.drawCircle(ballX,ballY,BALL_SIZE,mPaint); }
}

然后是acitivity  timer 控制代码

public class BallMoveActivity extends AppCompatActivity {
private Context context;
//小球初始的 X Y坐标点
private int baseX = 20;
private int baseY = 20;
private int baseRadiu = 10; //定义球的两个方位速度
private int xSpeed = 10;
private int ySpeed = 30;
private int radiuSpeed = 5; private int windowWidth ;
private int windowHight ; private int ON_DRAW = 0; private ChangedCirclerView circlerView; private FrameLayout frameLayout; @Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
context = this;
frameLayout = (FrameLayout) findViewById(R.id.activity_main);getWindowXY();
getWindowXY(); initTimer();
} public void getWindowXY(){
WindowManager windowManager = (WindowManager)getSystemService(Context.WINDOW_SERVICE);
windowWidth = windowManager.getDefaultDisplay().getWidth();
windowHight = windowManager.getDefaultDisplay().getHeight();
} private void initTimer(){
final Timer timer = new Timer();
timer.schedule(new TimerTask() {
@Override
public void run() {
baseX += xSpeed;
baseY += ySpeed;
baseRadiu += radiuSpeed; Log.v("xy==",String.valueOf(baseX)+"...."+baseY); Message message = new Message();
message.what = ON_DRAW;
handler.sendMessage(message);
}
},0,100);
} public Handler handler = new Handler(){ @Override
public void handleMessage(Message msg) {
if(msg.what == ON_DRAW){
if(circlerView == null){
circlerView = new ChangedCirclerView(context,baseX,baseY);
frameLayout.addView(circlerView);
} if(baseX > windowWidth || baseY >windowHight){
baseX = 20;
baseY = 20;
baseRadiu = 10;
} circlerView.invalidateBall(baseX,baseY,baseRadiu); }
}
}; }

这样就能根据x y 轴控制圆的位置,还有直径控制圆的大小了

方法二

还有一种方法就是动画的方式

需要一个圆的图形,可以是自己的Drawable图片,也可以是自己绘制的

然后编写动画代码,translate动画,scale动画,这样就能定义一个圆从哪里到哪里,然后圆的大小怎么变化这样的需求

上一篇:如何成为uber司机,uber司机详细注册流程


下一篇:Node.js连接MySQL数据库及构造JSON的正确姿势