首先声明动画不是我所写的,只是对动画感兴趣,研究了下动画的实现,现在有些公司对交互并不大感冒,有些公司老板对交互UI 很苛刻,为了能提过薪水,所以好好研究。
没有具体研究其中的算法,只是理了下实现思路
先欣赏动画
动画分解
在点击的位置突然绽放一丝波纹,然后逐渐荡漾,荡漾。。。。。
整个动画是在一个activity 中放了覆盖了一层View,还有一个弹出框,弹出框上也有同样一层View,用来展示波纹
具体实现
点击按钮,弹出弹出框,这时activity中的覆盖层中一个圆圈定位到按钮位置
final int color = Color.parseColor("#00bcd4");
//v 是点击的按钮, getLocationInView 是获取 v在revealView上面的相对位置
final Point p = getLocationInView(revealView, v);
revealView.reveal(p.x, p.y, color, v.getHeight() / 2, 440, null);
selectedView = v; handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
showPowerDialog();
}
}, 50);
展开波纹动画
public void reveal(final int x, final int y, final int color, final int startRadius, long duration, final Animator.AnimatorListener listener) {
..... 省略代码
//获取起始缩略倍数
final float startScale = startRadius * 2f / inkView.getHeight();
//获取最终倍数
final float finalScale = calculateScale(x, y) * SCALE;
//初始化圆圈的位置和scale
prepareView(inkView, x, y, startScale);
animator = inkView.animate().scaleX(finalScale).scaleY(finalScale).setDuration(duration).setListener(new Animator.AnimatorListener() {
..... 省略代码
});
prepareAnimator(animator, ANIMATION_REVEAL);
animator.start();
}
总结
弹出层中的波纹动画跟这个一致,主要通过改变circleView的scale 来实现波纹,还使用到了BakedBezierInterpolator这个插值器