1. 介绍:
在饿了么 APP 中,点餐按钮动画做的很酷,今天自己部分模仿下,主要使用了自定义 View + 属性动画。
效果图:
2. 实现思路
- 继承 View,获取自定义属性,重写 onMeasure,onSizeChanged,onDraw,onTouchEvent 等方法,进行测量,绘制,处理交互事件;
- 使用 AnimatorSet 组合多个属性动画,对位置进行改变;
- 在 onDraw 中,根据改变后的属性值,进行重新绘制;
3. 分步实现
(1) 矩形 –> 圆形矩形
/**
* 初始化矩形变圆形矩形动画
*/
private void initRectToCircleRectAnimation() {
// 从初始的 5dp 变化为 view 高度的一半,相当于半圆
rectToCircleRectAnim = ValueAnimator.ofFloat(dp2Px(5), mHeight / 2f);
rectToCircleRectAnim.setDuration(300);
rectToCircleRectAnim.setInterpolator(new LinearInterpolator());
rectToCircleRectAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListene