这里主要介绍一个关于类竖直上抛运动规律效果的View,可以用于“加载中”过程动画.
效果
View中元素分析
1.单个圆点从左边界以一定初速度一定加速度进入,作减速运动,在运动区域中点速度恰减为0;
2.然后以相同大小的加速度加速运动从右边界跑出;
3.不同圆点之间存在间隔.
实现方式
这里涉及到基本自定义控件流程结合自定义属性动画来实现.
主要看一下动画的实现,这里试图模仿上抛运动效果.
- 上抛中物体以一定速度减速上抛到最高点后速度为0,然后开始加速下落,加速和减速阶段运动过程对称.
- 本案例与上抛运动过程相似,只是把改变了减速运动阶段的位移方向,全过程保持同一个方向.
- 设置不同圆点从左侧进入的相等时间间隔,可调节这个参数来调整圆点间距.
private void startMotion() {
animator = ValueAnimator.ofFloat(0f, 140f);
animator.setDuration(mPeriod).setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new LinearInterpolator());//使用线性插值器
animator.start();
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float fraction = (float) animation.getAnimatedValue();
float t;
float cx;//当前位移(X轴坐标)
for (int i = 0; i < mDotNum; i++) {
t = (fraction - i * timeInterval) * mPeriod / 100;//依次延迟不同小圆点的出发时间
if (t < 0) {
cx = -1;
} else if (t <= mPeriod * 0.5) {//类竖直上抛运动(恒加速度减速运动阶段)
cx = (float) (v0 * t - 0.5 * a * Math.pow(t, 2.0));
} else {//类竖直上抛运动(恒加速度加速运动阶段)与上抛不同的是,这里改变了位移的方向
cx = mDisplacement - (float) (v0 * t - 0.5 * a * Math.pow(t, 2.0));
}
cxArr[i] = cx;
}
invalidate();
}
}
);
}
使用
源码:这里
引入:compile 'com.jaren.naturalloadingview:NaturalLoadingViewLib:1.0.1'