libGdx专题

Actions写spine动画

2021-08-19  本文已影响0人  大旺旺的弟弟小旺旺

使用

Actions动画 求百分比
执行apply方法

public float apply (float a) {
    if (a <= 0.5f) return (float)Math.pow(a * 2, power) / 2;
    return (float)Math.pow((a - 1) * 2, power) / (power % 2 == 0 ? -2 : 2) + 1;
}

计算结果,百分比来取数值,

计算数值

贝塞尔曲线计算方式,这个是取出100个点,一会apply中的百分比来乘以数组大小就是所要取出的数值。

public void jisuan(Array<Vector2> controlPoint){
    int n = controlPoint.size - 1; //
    int i, r;
    float u;
    // u的步长决定了曲线点的精度
    for (u = 0; u <= 1; u += 0.01) {
        Vector2 p[] = new Vector2[n + 1];
        for (i = 0; i <= n; i++) {
            p[i] = new Vector2(controlPoint.get(i));
        }
        for (r = 1; r <= n; r++) {
            for (i = 0; i <= n - r; i++) {
                p[i].x = (1 - u) * p[i].x + u * p[i + 1].x;
                p[i].y = (1 - u) * p[i].y + u * p[i + 1].y;
            }
        }
        array1.add(p[0]);
    }
}

复写apply

public float apply (float a) {
    var num = array1.get((array1.size-1) * a);
    value = num / height ;
}

自定义动画

使用

image1.addAction(Actions.scaleTo(3,3,3, new Bse(array1)));

类实现

public class Bse extends Interpolation{
    private Array<Vector2> array;
    public Bse (Array<Vector2> array) {
        this.array = array;
    }

    public float apply (float a) {
        //我们使用下标取值  所以转换为int
        int v = (int)(a * 100.0F);
        System.out.println(array.get(v).y);
        //工具的高为720,所以这里除以720
        return array.get(v).y/720;
    }
}

将每一个点的坐标都记录下来,然后根据百分比再这个区域中取值。

使用spine计算动画的曲线

public class BseInterpolation extends Interpolation {
    private float[] curves = new float[18];

    @Override
    public float apply(float a) {
        return getCurvePercent(a);
    }

    public void setCurve (float cx1, float cy1, float cx2, float cy2) {
        float tmpx = (-cx1 * 2 + cx2) * 0.03f, tmpy = (-cy1 * 2 + cy2) * 0.03f;
        float dddfx = ((cx1 - cx2) * 3 + 1) * 0.006f, dddfy = ((cy1 - cy2) * 3 + 1) * 0.006f;
        float ddfx = tmpx * 2 + dddfx, ddfy = tmpy * 2 + dddfy;
        float dfx = cx1 * 0.3f + tmpx + dddfx * 0.16666667f, dfy = cy1 * 0.3f + tmpy + dddfy * 0.16666667f;
        float x = dfx;
        float y = dfy;

        float curves[] = this.curves;
        int i = 0;
        for (int n = i + 19 - 1; i < n; i += 2) {
            curves[i] = x;
            curves[i + 1] = y;
            dfx += ddfx;
            dfy += ddfy;
            ddfx += dddfx;
            ddfy += dddfy;
            x += dfx;
            y += dfy;
        }
    }


//
//
    public float getCurvePercent (float percent) {
        percent = MathUtils.clamp(percent, 0, 1);
        float[] curves = this.curves;
        int i = 0;
        float x = 0;
        for (int start = i, n = i + 19 - 1; i < n; i += 2) {
            x = curves[i];
            if (x >= percent) {
                if (i == start) return curves[i + 1] * percent / x; // First point is 0,0.
                float prevX = curves[i - 2], prevY = curves[i - 1];
                return prevY + (curves[i + 1] - prevY) * (percent - prevX) / (x - prevX);
            }
        }
        float y = curves[i - 1];
        float v = y + (1 - y) * (percent - x) / (1 - x);
        System.out.println(v);
        return v;
    }
}

set方法是传递进去的参数,spine动画json文件中的,让每次调用一次apply得到一个百分比,然后通过百分比来得到数组中的值。
这种方式每次记录点的个数是19,和第一种的实现方式相同,为什么是19个点,我也不知道,应该是对于的点,没必要把。

使用:

 image.addListener(new ClickListener(){
            @Override
            public void clicked(InputEvent event, float x, float y) {
                super.clicked(event, x, y);
//                image1.addAction(Actions.scaleTo(3,3,3, new Bse(array1)));
                BseInterpolation bseInterpolation = new BseInterpolation();
                bseInterpolation.setCurve(0.25F, 0, 0.75F, 1F);
                image1.addAction(Actions.scaleTo(3,3,3, bseInterpolation));
                save();
            }
        });

这个的使用场景一般为弹窗,没有办法直接使用spine动画的情况。

上一篇下一篇

猜你喜欢

热点阅读