一. 运行效果以及源码

1.gif图效果

2.源码地址

点菜单动画

二.主要的思路

1. 初始位置的布局

通过使用 RelativeLayout ,将所有的 ImageButton 都摆放在一个位置,组上面的 ImageButton 就可以盖住下面的 ImageButton 达到我们想要的效果。

2. 动画效果的实现

通过使用 补间动画 的组合动画,将 平移动画 和 旋转动画 组合起来,配合适当的 插值器 达到我们想要的效果。

3. 实际实现出现的一个问题

1
2
3
4
5
6
7
//组合动画
AnimationSet animationSet = new AnimationSet(false);
//必须先添加旋转动画(旋转点是自身的中点)
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(translateAnimation);
//设置动画后不回复原样
animationSet.setFillAfter(true);

如果我先添加 平移动画 ,就会发生 旋转动画 的旋转点 似乎不是自身的中点。看到的一个解释是 addAnimation里面会进行计算导致平移到相应位置又回来,总之先在这里记录下来。

四. 参考文章

补间动画AnimationSet中放入scaleanimation