心形线动画

animation

数学公式

极坐标
r=a(1-sink) k属于0-2π

图形

实现代码

public class TestPath extends Application {
	private final double R=100;
    public Parent createContent() {
        final Pane root = new Pane();
        root.getChildren().add(lineCanvas()); 
        return root;
    }
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setResizable(false);
    	Parent pane = createContent();
    	pane.setTranslateY(-100);
        primaryStage.setScene(new Scene(pane));
        primaryStage.setWidth(800);
        primaryStage.setHeight(800);
        primaryStage.setTitle("心形函数 ");
        primaryStage.show();
    }
 
    public Canvas  lineCanvas() {
    	Canvas canvas=new Canvas(800,800);
    	GraphicsContext gc = canvas.getGraphicsContext2D();
    	gc.setFill(Color.GREEN);
        gc.setStroke(Color.valueOf("#87CEFF"));
        gc.setLineWidth(2);
        
    	double oldx=0;
    	double oldy=0;
    	for(int i=0;i<361;i+=1) {
    		double radi=Math.PI*i/180;
    		double r = 2*(R-R*Math.sin(radi));
    		double xi = r*Math.sin(radi);
    		double yi = r*Math.cos(radi);
    		if(i==0) {
    			oldx=400+xi;
        		oldy=400-yi;
        		continue;
    		}
    		gc.strokeLine(oldx, oldy, 400+xi, 400-yi);
    		oldx=400+xi;
    		oldy=400-yi;
    	}
    	canvas.setOpacity(0.5);
    	canvas.setRotate(270);
    	canvas.setTranslateY(-R);;
		return canvas;
    }
    public static void main(String[] args) {
        launch(args);
    }
}

添加两个同心圆

大圆半径为小圆半径2倍

代码

public class TestPath extends Application {
	private final double R=100;
    private Circle big=new Circle(400,400,200);
    private Circle small=new Circle(400,400,100);
    public Parent createContent() {
        final Pane root = new Pane();

        big.setFill(Color.VIOLET);
        big.setOpacity(0.3);
        big.setStroke(Color.RED);
        big.setRotate(270);
        small.setFill(Color.AQUAMARINE);

        root.getChildren().addAll(big,small);
        root.getChildren().add(lineCanvas()); 
        return root;
    }
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setResizable(false);
    	Parent pane = createContent();
    	pane.setTranslateY(-100);
        primaryStage.setScene(new Scene(pane));
        primaryStage.setWidth(800);
        primaryStage.setHeight(800);
        primaryStage.setTitle("心形函数 ");
        primaryStage.show();
    }
 
    public Canvas  lineCanvas() {
    	Canvas canvas=new Canvas(800,800);
    	GraphicsContext gc = canvas.getGraphicsContext2D();
    	gc.setFill(Color.GREEN);
        gc.setStroke(Color.valueOf("#87CEFF"));
        gc.setLineWidth(2);
        
    	double oldx=0;
    	double oldy=0;
    	for(int i=0;i<361;i+=1) {
    		double radi=Math.PI*i/180;
    		double r = 2*(R-R*Math.sin(radi));
    		double xi = r*Math.sin(radi);
    		double yi = r*Math.cos(radi);
    		if(i==0) {
    			oldx=400+xi;
        		oldy=400-yi;
        		continue;
    		}
    		gc.strokeLine(oldx, oldy, 400+xi, 400-yi);
    		oldx=400+xi;
    		oldy=400-yi;
    	}
    	canvas.setOpacity(0.5);
    	canvas.setRotate(270);
    	canvas.setTranslateY(-R);;
		return canvas;
    }
    public static void main(String[] args) {
        launch(args);
    }
}

添加需要滚动的圆

它在左上角，漏出1/4，它的现在位置并不重要，待会让它按指定路径运动

public class TestPath extends Application {
	private final double R=100;
    private Circle big=new Circle(400,400,200);
    private Circle small=new Circle(400,400,100);
    private Circle circle=new Circle(R);
    private Circle point=new Circle(3);

    public Parent createContent() {
        final Pane root = new Pane();
        root.prefWidth(800);
        root.prefHeight(800);

        big.setFill(Color.VIOLET);
        big.setOpacity(0.3);
        big.setStroke(Color.RED);
        big.setRotate(270);
        small.setFill(Color.AQUAMARINE);

        root.getChildren().addAll(big,small);
        
        Group group=createGroup();
        root.getChildren().addAll(group);
        
        root.getChildren().add(lineCanvas()); 
        return root;
    }
    public Group createGroup() {
		Group group=new Group();
		circle.setFill(Color.RED);
		circle.setStroke(Color.LIGHTPINK);
        point.setFill(Color.RED);
		group.getChildren().addAll(circle,point);
        circle.setRotate(90);;
		return group;
    }
    public void start(Stage primaryStage) throws Exception {
      //  primaryStage.setResizable(false);
    	Parent pane = createContent();
    	//pane.setTranslateY(-100);
        primaryStage.setScene(new Scene(pane));
        primaryStage.setWidth(800);
        primaryStage.setHeight(800);
        primaryStage.setTitle("心形函数 ");
        primaryStage.show();
    }
 
    public Canvas  lineCanvas() {
    	Canvas canvas=new Canvas(800,800);
    	GraphicsContext gc = canvas.getGraphicsContext2D();
    	gc.setFill(Color.GREEN);
        gc.setStroke(Color.valueOf("#87CEFF"));
        gc.setLineWidth(2);
        
    	double oldx=0;
    	double oldy=0;
    	for(int i=0;i<361;i+=1) {
    		double radi=Math.PI*i/180;
    		double r = 2*(R-R*Math.sin(radi));
    		double xi = r*Math.sin(radi);
    		double yi = r*Math.cos(radi);
    		if(i==0) {
    			oldx=400+xi;
        		oldy=400-yi;
        		continue;
    		}
    		gc.strokeLine(oldx, oldy, 400+xi, 400-yi);
    		oldx=400+xi;
    		oldy=400-yi;
    	}
    	canvas.setOpacity(0.5);
    	canvas.setRotate(270);
    	canvas.setTranslateY(-R);;
		return canvas;
    }
    public static void main(String[] args) {
        launch(args);
    }
}

添加动画效果

1，circle以big为路径运动
2，焦点point以circle为路径运动
3，调整相对位置和透明度，到达较好的动画效果

public class TestPath extends Application {
	private final double R=100;
    private PathTransition transition;
    private PathTransition groupTransition;
    private Circle big=new Circle(400,400,200);
    private Circle small=new Circle(400,400,100);
    private ParallelTransition parallelTransition;
    private Circle circle=new Circle(R);
    private Circle point=new Circle(3);

    public Parent createContent() {
        final Pane root = new Pane();
        root.prefWidth(800);
        root.prefHeight(800);

        big.setFill(Color.VIOLET);
        big.setOpacity(0.3);
        big.setStroke(Color.RED);
        big.setRotate(270);
        small.setFill(Color.AQUAMARINE);

        root.getChildren().addAll(big,small);
        
        Group group=createGroup();
        root.getChildren().addAll(group);
        transition = new PathTransition(Duration.seconds(4), big, group);
        transition.setOrientation(OrientationType.ORTHOGONAL_TO_TANGENT);
        transition.setCycleCount(1);
        transition.setAutoReverse(true);

        parallelTransition=new ParallelTransition(groupTransition,transition);
        parallelTransition.setCycleCount(Timeline.INDEFINITE);
        parallelTransition.play();
        
        root.getChildren().add(lineCanvas()); 
        return root;
    }
    public Group createGroup() {
		Group group=new Group();
		circle.setFill(Color.AQUAMARINE);
		circle.setStroke(Color.LIGHTPINK);
        point.setFill(Color.RED);
		group.getChildren().addAll(circle,point);
		groupTransition = new PathTransition(Duration.seconds(4), circle, point);
		groupTransition.setOrientation(OrientationType.ORTHOGONAL_TO_TANGENT);
		groupTransition.setCycleCount(1);
		groupTransition.setAutoReverse(true);
        circle.setRotate(90);
        circle.setOpacity(0.5);
		return group;
    }
    public void start(Stage primaryStage) throws Exception {
      //  primaryStage.setResizable(false);
    	Parent pane = createContent();
    	pane.setTranslateY(-100);
        primaryStage.setScene(new Scene(pane));
        primaryStage.setWidth(800);
        primaryStage.setHeight(800);
        primaryStage.setTitle("心形函数 ");
        primaryStage.show();
    }
    public Canvas  lineCanvas() {
    	Canvas canvas=new Canvas(800,800);
    	GraphicsContext gc = canvas.getGraphicsContext2D();
    	gc.setFill(Color.GREEN);
        gc.setStroke(Color.valueOf("#87CEFF"));
        gc.setLineWidth(2);
        
    	double oldx=0;
    	double oldy=0;
    	for(int i=0;i<361;i+=1) {
    		double radi=Math.PI*i/180;
    		double r = 2*(R-R*Math.sin(radi));
    		double xi = r*Math.sin(radi);
    		double yi = r*Math.cos(radi);
    		if(i==0) {
    			oldx=400+xi;
        		oldy=400-yi;
        		continue;
    		}
    		gc.strokeLine(oldx, oldy, 400+xi, 400-yi);
    		oldx=400+xi;
    		oldy=400-yi;
    	}
    	canvas.setOpacity(0.5);
    	canvas.setRotate(270);
    	canvas.setTranslateY(-R);;
		return canvas;
    }
    public static void main(String[] args) {
        launch(args);
    }
}