实现仿windows正在加载loading动画
来源:互联网 发布:网络舆论战 编辑:程序博客网 时间:2024/04/24 13:06
前段时间公司任务中有实现仿windows正在加载loading动画。先看看需要实现的效果:
如上直接调用下面的差值器类,构造方法中的4个参数,即是从第一步的网站获得的数值。
这是loading动画中的难点,具体的运动速度需要自己去尝试才能找到最满意的效果。
小圆点这些自定义都是比较容易的
主要是小点的运动速度,android中提供几种运动速度,显然是不能完成我们的需求
唯一的办法就是自定义插值器,Interpolator
public class AlertInterpolator implements Interpolator然后,它会提示你实现一个方法
@Overridepublic float getInterpolation(float input) {// TODO Auto-generated method stubfloat result;if (input <= 0.5) {result = (float) (Math.sin(Math.PI * input)) / 2;} else {result = (float) (2 - Math.sin(Math.PI * input)) / 2;}return result;}上面这个就是简单的 先减速在加速的插值器,但还是满足不了我们的需求
基于三次方贝塞尔曲线的插值器
在动画开发过程中,经常需要使用到插值器来满足我们的动画设计需求。然而,官方提供的插值器并不能满足所有的需求,所以我们需要自定义插值器。
下面介绍的三次方贝塞尔曲线的插值器,主要可用于实现连续曲线的动画。
关于贝塞尔曲线的介绍,请移步百度。
工具网站: cubic-bezier.com
使用教程:
- 拉拽左边图像的2个点,调整出符合效果的图形
- 点击右上角的Save按钮,将4个参数运用到下面的代码中。
2.代码运用
new EaseCubicInterpolator(0.31f, 0.85f,0.77f, 0.14f);
如上直接调用下面的差值器类,构造方法中的4个参数,即是从第一步的网站获得的数值。
/** * 缓动三次方曲线插值器.(基于三次方贝塞尔曲线) */public class EaseCubicInterpolator implements Interpolator { private final static int ACCURACY = 4096; private int mLastI = 0; private final PointF mControlPoint1 = new PointF(); private final PointF mControlPoint2 = new PointF(); /** * 设置中间两个控制点.<br> * 在线工具: http://cubic-bezier.com/<br> * * @param x1 * @param y1 * @param x2 * @param y2 */ public EaseCubicInterpolator(float x1, float y1, float x2, float y2) { mControlPoint1.x = x1; mControlPoint1.y = y1; mControlPoint2.x = x2; mControlPoint2.y = y2; } @Override public float getInterpolation(float input) { float t = input; // 近似求解t的值[0,1] for (int i = mLastI; i < ACCURACY; i++) { t = 1.0f * i / ACCURACY; double x = cubicCurves(t, 0, mControlPoint1.x, mControlPoint2.x, 1); if (x >= input) { mLastI = i; break; } } double value = cubicCurves(t, 0, mControlPoint1.y, mControlPoint2.y, 1); if (value > 0.999d) { value = 1; mLastI = 0; } return (float) value; } /** * 求三次贝塞尔曲线(四个控制点)一个点某个维度的值.<br> * 参考资料: <em> http://devmag.org.za/2011/04/05/bzier-curves-a-tutorial/ </em> * * @param t * 取值[0, 1] * @param value0 * @param value1 * @param value2 * @param value3 * @return */ public static double cubicCurves(double t, double value0, double value1, double value2, double value3) { double value; double u = 1 - t; double tt = t * t; double uu = u * u; double uuu = uu * u; double ttt = tt * t; value = uuu * value0; value += 3 * uu * t * value1; value += 3 * u * tt * value2; value += ttt * value3; return value; }}
这是loading动画中的难点,具体的运动速度需要自己去尝试才能找到最满意的效果。
0 0
- 实现仿windows正在加载loading动画
- 使用DialogFragment实现仿ios正在加载动画效果
- js仿iPhone手机端alert,loading,正在加载...
- CSS实现Loading加载动画
- 纯CSS 仿某网站 loading加载动画
- CSS3实现Loading加载动画特效大全
- CSS3动画实现loading加载图标
- 基于javascript实现页面加载loading动画
- 自定义View实现loading动画加载
- CSS3实现loading(加载)动画效果
- AnimationDrawable 实现正在加载的旋转动画
- 纯css3实现 正在加载 动画
- CSS3实现“正在加载中”动画
- Xamarin.Android 实现正在加载动画效果
- CSS loading 正在加载画面
- loading 加载动画
- loading加载动画
- css3加载动画loading
- Android中级第十二讲浅谈架构设计
- iOS架构 - MVC/MVP/MVVM
- 有关boost安装和使用的一些问题的解决方法
- 解决adb端口”5037“占用问题
- java 线程thread2(线程同步 synchronized)
- 实现仿windows正在加载loading动画
- 51nod 1624 取余最长路
- Mac/Eclipise环境下调试Postgresql代码
- oracle 函数
- nil Nil NSNull NULL
- 数据库语言---SQL基本用法2(查询)
- 使用PendingIntent.getBrocast() 在 onReceive 中接受不到intent 的问题
- 变态跳台阶问题
- Android文件存储的问题:ClassLoader和实现Parcelable接口后 详解及用途