Движущиеся черные и белые шары

События, вызванные Timer, выполняются в том же потоке событий, что и в репликах. Вызов repaint выполняет событие рисования, вместо этого он поочередно ставит очередь. Когда вы вызываете свои репликации из события таймера, они будут исполняться только после завершения события таймера.

Что вам нужно сделать, так это реорганизовать ваш цикл, чтобы каждый раз, когда запускается таймер, выполняется только один обмен. Я сделал это для вас в качестве примера:

public class DrawPanel extends JPanel implements ActionListener {
    public static final int NUMBER_OF_CIRCLES = 10;

    Timer myTimer = new Timer(500, this);
    int[] circles = new int[NUMBER_OF_CIRCLES];

    public DrawPanel() {
        arrayFill(circles);

        if(NUMBER_OF_CIRCLES % 2 == 0) {
            condition = circles.length/2 -1;
        } else {
            condition = circles.length/2;
        }

        i = circles.length - 1;
        k = 1;

        myTimer.start();
    }

    int i, j, k;
    int condition;
    boolean outer = true;

    @Override
    public void actionPerformed(ActionEvent e) {
        if(outer) {
            if(i > condition) {
                j = i - k;      // set j
                outer = false;  // and move to the inner loop swap
            } else {
                myTimer.stop(); // the outer loop is done so stop the timer
            }
        }
        if(!outer) {
            int tmp = circles[j];
            circles[j] = circles[j+1];
            circles[j+1] = tmp;
            repaint();

            j++;
            if(j >= i) {
                i--;
                k++;
                outer = true; // move to the outer condition
            }                 // next time the timer triggers
        }
    }

    @Override
    protected void paintComponent(Graphics g) {
        int x = 0;
        int length = 40;

        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D) g;
        Ellipse2D circle;
        for(int index = 0; index<10; index++) {
            if(circles[index] == 0){
                circle = new Ellipse2D.Double(x, 120, length, length);
                g2.draw(circle);
            } else if(circles[index] == 1){
                circle = new Ellipse2D.Double(x, 120, length, length);
                g2.fill(circle);
            }
            x += 45;
        }
        //myTimer.start();
    }

    public static void arrayFill(int[] array) {
        for(int i = 0; i<array.length; i++) {
            if( i%2 == 0) {
                array[i] = 0;
            } else {
                array[i] = 1;
            }
        }
    }
}

(Я уверен, что это может быть учтено другим способом.)

Также:

• Я добавил @Override аннотации, которые вы должны использовать. Это будет предупреждать вас, когда вы совершаете определенные ошибки. (Подобно неправильному написанию имени метода или некорректному объявлению его подписи).
• Я переместил circles в переменную экземпляра, потому что я не вижу причины, по которой она должна быть статичной. Он является частью состояния экземпляра DrawPanel.
• Я создал конструктор, который инициализирует переменные, такие как circles.
• paintComponent - protected метод, и он должен оставаться таким, если нет оснований рекламировать его public.

(Я удалил ваши комментарии и изменил стиль крепления, чтобы сконденсировать код для моего ответа.)

В качестве дополнительной заметки вы должны прочитать начальные темы учебника. Вы не создаете свой графический интерфейс в потоке событий Swing. В основном вам нужно обернуть свой код в main внутри вызова invokeLater:

public static void main(String[] args) {
    SwingUtilities.invokeLater(new Runnable() {
        @Override
        public void run() {
            // create and show your GUI
        }
    });
}