目录
效果:
思路:
实现:按照步骤拆解,首先创建6个实心小圆点,布局文件就不贴了,主要是代码逻辑。
/***
*创建六个小圆点
*/
public void getPoints(){
for(int i=0;i<6;i++){
ImageView point=new ImageView(this);
point.setBackgroundResource(R.drawable.round_bg);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(30, 30);
params.gravity= Gravity.CENTER_VERTICAL;
ll_loading_1.addView(point,params);
points.add(point);
}
// startLeftMove();
//开启动画
startAnimation();
}
步骤二、三:先从最左侧小圆点开始执行动画,执行一段距离之后再通过相反的动画将其复位到起点。
public void startAnimation(){
//先从左侧开始
startLeft();
}
//最左侧小圆点沿着X轴先向左平移80,然后复位结束左侧动画,之后开启右侧平移动画
public void startLeft(){
final ImageView left=points.get(0);
ObjectAnimator leftmove1=ObjectAnimator.ofFloat(left,"translationX",-80);
AnimatorSet set=new AnimatorSet();
set.setDuration(400);
set.play(leftmove1);
set.start();
set.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
ObjectAnimator leftmove2=ObjectAnimator.ofFloat(left,"translationX",0);
AnimatorSet set=new AnimatorSet();
set.setDuration(400);
set.play(leftmove2);
set.start();
set.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
//左侧圆点复位,开始右侧动画
startRight();
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
//
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
}
步骤四:左侧平移动画结束之后开始右侧平移动画,原理同左侧小圆点平移过程。
@Override
public void onAnimationEnd(Animator animation) {
//左侧圆点复位,开始右侧动画
startRight();
}
步骤五:右侧平移动画结束之后重新开启左侧动画过程
步骤六:重复上述过程
上面的代码有些问题,稍后会对代码的逻辑进行修改
代码详见:https://github.com/henkun614/demos