使用android animator 实现 弹跳的篮球效果

好久没有分享些什么了,闲来无事看了一下apidemo ,于是自己练手, 给大家分享一个通过Animator 实现弹跳的篮球的效果.

我们可以把这动画拆解为3个动画
1.小球落下
2.小球形变(包括小球变宽,变矮)
3.小球上升

小球的落下和上升没什么好说的

实现如下

1 2 3 4 5

//小球落下 ValueAnimator downAnimator = ObjectAnimator.ofFloat(mShapeHolder, "y", startY , endY); downAnimator.setDuration(duration); downAnimator.setInterpolator(new AccelerateInterpolator()); downAnimator.addUpdateListener(this);

1 2 3 4 5

//小球上升 ValueAnimator upAnimator = ObjectAnimator.ofFloat(mShapeHolder, "y", endY, startY); upAnimator.setDuration(duration); upAnimator.setInterpolator(new DecelerateInterpolator()); upAnimator.addUpdateListener(this);

那么难点就是小球的形变了

如果想用animator实现小球的形变,我将其分解为了四个部分
1.小球的变宽
2.小球在变宽的时候的x居中
3.小球的变矮
4.小球在变矮时候的y居中

分析ok了就可以编码了

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

// 1.设置小球的宽度变大 ValueAnimator makeBallWide = ObjectAnimator.ofFloat(mShapeHolder, "width", mShapeHolder.getWidth(), mShapeHolder.getWidth() + BALLHEIGH/2); makeBallWide.setDuration(duration/4); //重复一次 makeBallWide.setRepeatCount(1); //在重复另一次的时候回到原来的状态 makeBallWide.setRepeatMode(ValueAnimator.REVERSE); makeBallWide.setInterpolator(new DecelerateInterpolator()); // 2.在小球变扁的时候 需要让他居中 ValueAnimator centerAnimator = ObjectAnimator.ofFloat(mShapeHolder, "x", mShapeHolder.getX(), mShapeHolder.getX() - BALLHEIGH/4); centerAnimator.setDuration(duration/4); centerAnimator.setRepeatCount(1); centerAnimator.setRepeatMode(ValueAnimator.REVERSE); centerAnimator.setInterpolator(new DecelerateInterpolator()); centerAnimator.addUpdateListener(this); //3. 小球高度的变小 ValueAnimator makeBallLow = ObjectAnimator.ofFloat(mShapeHolder, "height", mShapeHolder.getHeight(), mShapeHolder.getHeight() - BALLHEIGH/4); makeBallLow.setDuration(duration/4); makeBallLow.setRepeatCount(1); makeBallLow.setInterpolator(new DecelerateInterpolator()); makeBallLow.setRepeatMode(ValueAnimator.REVERSE); //4.小球高度变化时y的居中 ValueAnimator yWhenBallisPlan = ObjectAnimator.ofFloat(mShapeHolder, "y", endY, endY + BALLHEIGH/3); yWhenBallisPlan.setDuration(duration/4); yWhenBallisPlan.setRepeatCount(1); yWhenBallisPlan.setInterpolator(new DecelerateInterpolator()); yWhenBallisPlan.setRepeatMode(ValueAnimator.REVERSE);

所有代码:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137

public class MainActivity extends Activity { private ShapeHolder mShapeHolder; private final float BALLHEIGH = 100f; @SuppressWarnings("deprecation") @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.bouncing_balls); int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); LinearLayout container = (LinearLayout) findViewById(R.id.container); mShapeHolder = addBall(screenWidth/2, 100); final MyAnimationView myAnimationView = new MyAnimationView(this); container.addView(myAnimationView); myAnimationView.post(new Runnable() { @Override public void run() { myAnimationView.showBall(); } }); } public class MyAnimationView extends View implements AnimatorUpdateListener { public final ArrayList<ShapeHolder> balls = new ArrayList<ShapeHolder>(); AnimatorSet animation = null; public MyAnimationView(Context context) { super(context); } public void showBall() { float startY = mShapeHolder.getY(); float endY = getHeight() - BALLHEIGH; long duration = 1000; //小球落下 ValueAnimator downAnimator = ObjectAnimator.ofFloat(mShapeHolder, "y", startY , endY); downAnimator.setDuration(duration); downAnimator.setInterpolator(new AccelerateInterpolator()); //每次都需要添加这个监听刷新UI 否则不能看到动画 downAnimator.addUpdateListener(this); // 1.设置小球的宽度变大 ValueAnimator makeBallWide = ObjectAnimator.ofFloat(mShapeHolder, "width", mShapeHolder.getWidth(), mShapeHolder.getWidth() + BALLHEIGH/2); makeBallWide.setDuration(duration/4); //重复一次 makeBallWide.setRepeatCount(1); //在重复另一次的时候回到原来的状态 makeBallWide.setRepeatMode(ValueAnimator.REVERSE); makeBallWide.setInterpolator(new DecelerateInterpolator()); // 2.在小球变扁的时候 需要让他居中 ValueAnimator centerAnimator = ObjectAnimator.ofFloat(mShapeHolder, "x", mShapeHolder.getX(), mShapeHolder.getX() - BALLHEIGH/4); centerAnimator.setDuration(duration/4); centerAnimator.setRepeatCount(1); centerAnimator.setRepeatMode(ValueAnimator.REVERSE); centerAnimator.setInterpolator(new DecelerateInterpolator()); centerAnimator.addUpdateListener(this); //3. 小球高度的变小 ValueAnimator makeBallLow = ObjectAnimator.ofFloat(mShapeHolder, "height", mShapeHolder.getHeight(), mShapeHolder.getHeight() - BALLHEIGH/4); makeBallLow.setDuration(duration/4); makeBallLow.setRepeatCount(1); makeBallLow.setInterpolator(new DecelerateInterpolator()); makeBallLow.setRepeatMode(ValueAnimator.REVERSE); //4.小球高度变化时y的居中 ValueAnimator yWhenBallisPlan = ObjectAnimator.ofFloat(mShapeHolder, "y", endY, endY + BALLHEIGH/3); yWhenBallisPlan.setDuration(duration/4); yWhenBallisPlan.setRepeatCount(1); yWhenBallisPlan.setInterpolator(new DecelerateInterpolator()); yWhenBallisPlan.setRepeatMode(ValueAnimator.REVERSE); //小球上升 ValueAnimator upAnimator = ObjectAnimator.ofFloat(mShapeHolder, "y", endY, startY); upAnimator.setDuration(duration); upAnimator.setInterpolator(new DecelerateInterpolator()); upAnimator.addUpdateListener(this); final AnimatorSet animatorSet = new AnimatorSet(); animatorSet.play(downAnimator).before(centerAnimator); animatorSet.playTogether(centerAnimator , makeBallWide ,makeBallLow, yWhenBallisPlan); animatorSet.play(upAnimator).after(centerAnimator); animatorSet.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { animatorSet.start(); super.onAnimationEnd(animation); } }); animatorSet.start(); } @Override protected void onDraw(Canvas canvas) { canvas.save(); canvas.translate(mShapeHolder.getX(), mShapeHolder.getY()); mShapeHolder.getShape().draw(canvas); canvas.restore(); } @Override public void onAnimationUpdate(ValueAnimator arg0) { invalidate(); } } private ShapeHolder addBall(float x, float y) { OvalShape circle = new OvalShape(); circle.resize(BALLHEIGH, BALLHEIGH); ShapeDrawable drawable = new ShapeDrawable(circle); ShapeHolder shapeHolder = new ShapeHolder(drawable); shapeHolder.setX(x - BALLHEIGH/2); shapeHolder.setY(y - BALLHEIGH/2); int red = (int)(Math.random() * 255); int green = (int)(Math.random() * 255); int blue = (int)(Math.random() * 255); int color = 0xff000000 | red << 16 | green << 8 | blue; Paint paint = drawable.getPaint(); //new Paint(Paint.ANTI_ALIAS_FLAG); int darkColor = 0xff000000 | red/4 << 16 | green/4 << 8 | blue/4; RadialGradient gradient = new RadialGradient(37.5f, 12.5f, 50f, color, darkColor, Shader.TileMode.CLAMP); paint.setShader(gradient); shapeHolder.setPaint(paint); return shapeHolder; } }

附件 http://www.eoeandroid.com/forum.php?mod=viewthread&tid=311392&page=1&extra=#pid3285053