Question

如何让它永远重复，锥体出现在第一遍，然后消失在第二遍，依此类推？它有点通过然后没有。他们也需要额外的消失才能消失。不知道我做错了什么。

HTML

import java.awt.Color;
import java.awt.Graphics;

import javax.swing.JFrame;

public class guiMethod extends JFrame
{

    public static void main(String[] args)
    {
        guiMethod metronome = new guiMethod();
        metronome.setTitle("Example GUI");
        metronome.setSize(400, 120);
        metronome.setDefaultCloseOperation(EXIT_ON_CLOSE);
        metronome.setVisible(true);

    }

    public void paint(Graphics g)
    {
        int col; 
        int row;
        int x;
        int y;


        for (row = 0; row < 1; row++)
        {
            for (col = 0; col < 4; col++)
            {
                x = col * 100;
                y = (row * 100) + 20;

                if (col == 0)
                {
                    g.setColor(Color.BLUE);
                }
                else
                {
                    g.setColor(Color.CYAN);
                }
                g.fillRect(x, y, 100, 100);
            }
        }
    }


}

SASS

<svg data-rot="0" data-pass="1" id="truck_cones" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;">
<circle id="base" cx="64" cy="64" r="39"/>
<polygon class="cone" id="cone_30" points="64,20 61,25.2 67,25.2 "/>
<polygon class="cone" id="cone_60" points="85.4,25.5 80.2,28.6 85.5,31.5 "/>
<polygon class="cone" id="cone_90" points="102.1,41.9 96.1,42 99.1,47.2 "/>
<polygon class="cone" id="cone_120" points="108,64 102.8,61 102.8,67 "/>
<polygon class="cone" id="cone_150" points="101.9,86.4 98.9,81.2 95.9,86.4 "/>
<polygon class="cone" id="cone_180" points="86.2,102 86.2,96 81,99 "/>
<polygon class="cone" id="cone_210" points="65,108 67.9,102.7 61.9,102.9 "/>
<polygon class="cone" id="cone_240" points="41.6,101.9 46.9,98.9 41.7,95.9 "/>
<polygon class="cone" id="cone_270" points="26,86.2 32,86.2 29,81 "/>
<polygon class="cone" id="cone_300" points="20,64 25.2,67 25.2,61 "/>
<polygon class="cone" id="cone_330" points="25.5,42.6 28.6,47.8 31.5,42.5 "/>
<polygon class="cone" id="cone_360" points="41.9,25.9 42,31.9 47.2,28.9 "/>
<rect id="truck" x="57" y="17" width="14" height="8"/>
</svg>

Answer 1

尝试延长锥形动画的持续时间以匹配卡车旋转的持续时间。请参阅以下代码和codepen示例：

    {
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {
    "entryFile": "public_api.ts",
     "externals": {
        "ngx-bootstrap": "ngx-bootstrap"
    }
}
 }

工作示例： https://codepen.io/anon/pen/EQwvMj

Sass顺序动画

1 个答案: