zoukankan      html  css  js  c++  java
  • Android开发

    基于三次方贝塞尔曲线的插值器

    在动画开发过程中,经常需要使用到插值器来满足我们的动画设计需求。然而,官方提供的插值器并不能满足所有的需求,所以我们需要自定义插值器。
    下面介绍的三次方贝塞尔曲线的插值器,主要可用于实现连续曲线的动画。
    关于贝塞尔曲线的介绍,请移步百度

    绘制满足设计的动画曲线

    1.先使用贝塞尔曲线数值生成工具来获取想要的曲线数值

    工具网站:cubic-bezier.com

    使用教程:

    1. 拉拽左边图像的2个点,调整出符合效果的图形
    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;
    
    	}
    
    }
    
    

    版权声明:欢迎自由转载-非商用-非衍生-保持署名。作者:Benhero,博客地址:http://www.cnblogs.com/benhero/

  • 相关阅读:
    [loj6484]LJJ爱数书
    [loj3163]动态直径
    [loj2983]数树
    [luogu3785]文本校正
    [loj2572]字符串
    [loj3103]节日庆典
    [atARC118F]Growth Rate
    [atARC118E]Avoid Permutations
    [cf794G]Replace All
    [cf756E]Byteland coins
  • 原文地址:https://www.cnblogs.com/benhero/p/4377374.html
Copyright © 2011-2022 走看看