了解javafx中的插值方法

Question

我正在尝试在 JavaFX 中创建动画。

不过，我很难理解一种方法。

谁能解释一下底部的插值方法到底是做什么的？

更具体地说，它是如何使用模数的？

import javafx.animation.Interpolator;
import javafx.animation.Transition;
import javafx.geometry.Rectangle2D;
import javafx.scene.image.ImageView;
import javafx.util.Duration;

public class SpriteAnimation extends Transition {

    private  ImageView imageView;

    private  int count;            
    private  int columns;         
    private  int offsetX;         
    private  int offsetY;         
    private  int width;            
    private  int height;          
    private int lastIndex;

    public SpriteAnimation(
            ImageView imageView, 
            Duration duration, 
            int count,   int columns,
            int offsetX, int offsetY,
            int width,   int height) {

        this.imageView = imageView;       
        this.count     = count;       
        this.columns   = columns;
        this.offsetX   = offsetX;       
        this.offsetY   = offsetY;
        this.width     = width;
        this.height    = height;

        setCycleDuration(duration);  
        setInterpolator(Interpolator.LINEAR); 
    }

    protected void interpolate(double k) {
        // 
        int index = Math.min((int) Math.floor(k * count), count - 1);
        if (index != lastIndex) {

            int x = (index % columns) * width  + offsetX;
            int y = (index / columns) * height + offsetY;
            imageView.setViewport(new Rectangle2D(x, y, width, height));

            lastIndex = index;
        }
    }
}

Answer 1

当转换运行时，k 的不同值将传递给interpolate。在动画的开头0.0 将传递给k，在动画结束时将传递1.0。

int index = Math.min((int) Math.floor(k * count), count - 1);

在0 到count-1 范围内计算index。顺便说一句：我更喜欢(int) (k * count) 而不是(int) Math.floor(k * count)，因为转换为int 无论如何都会截断浮点值。

在更改索引时，ImageView 应该显示的图像部分被修改以显示图像的适当部分。在这里，您从左到右逐行遍历精灵。

index % columns

是index除以columns的其余部分。这意味着index 每增加1，结果将增加1，直到达到columns；在这种情况下，它会从 0 开始。

由于这个属性，它可以用来确定要显示的图像的水平位置。您只需乘以精灵的宽度即可获得左侧的 x 坐标。

index / columns

是index 除以columns 没有休息，即index / columns 和(index - index % columns) / columns 结果相同。每将columns 添加到index，结果就会增加1；当index % column 从0 重新开始时，它会增加 1。因此可以用来确定精灵的y坐标；您只需乘以精灵的高度。

columns = 3 的示例

index   |   index % 3  |   index / 3
--------------------------------------
  0     |     0        |     0
  1     |     1        |     0
  2     |     2        |     0
  3     |     0        |     1
  4     |     1        |     1
  5     |     2        |     1
  6     |     0        |     2
             ...
 31     |     1        |     10

这样你可以按以下顺序遍历精灵

-------------------
|  1  |  2  |  3  |
-------------------
|  4  |  5  |  6  |
-------------------
        ...
-------------------
| 31  | 32  |     |
-------------------