Анимация моста Vaadin Java для карусели - точка слишком велика и начинается прямо смещено вместо центра индивидуальных с ⇐ JAVA

[Anonymous]

I-код только в практически полном коде Java и попытаться создать компоненты таким образом для Vaadin. Контейнеры), которые должны оживить точку «моста» от центра одной точки до другого центра. Я хочу, чтобы это выглядело как точка от потоков в B. Однако я сталкиваюсь с этими проблемами: < /p>
Точка анимации в настоящее время слишком большая. Я бы хотел, чтобы он был меньше или соответствовал фактическому размеру фиксированной точки.
Начальная позиция точки анимации не выровнена с центром отдельного контейнера точки для источника точки. Вместо этого, кажется, это смещается вправо.
Все остальное работает довольно хорошо (эффект волны, несколько кликов и т. Д.), Но я бы хотел, чтобы мостовая точка появилась точно в центре точки A, затем Плавно перемещаться в центр точки B.
Как настроить код ниже, чтобы: < /p>
Размер точки анимации моста меньше (соответствует или немного меньше, чем фактическая точка )? Все текстовые ссылки были переименованы из «TastyTaste» до «MyApplication»: < /p>
package com.myapplication.application.components.modules;

import java.util.ArrayList;
import java.util.List;

import com.vaadin.flow.component.ClickEvent;
import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;

/*
CarouselView with:
- Fullscreen overlay
- Slider area (600px height)
- A DotRow that holds multiple DotContainer (fixed dots)
- Each DotContainer can do ripple effect and a bridge animation
*/

public class CarouselView extends VerticalLayout {

private static final int DOT_COUNT = 5; // Number of fixed dots
private static final int SLIDER_HEIGHT = 600; // Enough space below
private static final int DOT_DIAMETER = 54; // Dot diameter
private static final int DOT_GAP = 80; // Gap between dot containers

// Dot container dimensions
private static final int DOT_CONTAINER_WIDTH = DOT_DIAMETER;
private static final int DOT_CONTAINER_HEIGHT = DOT_DIAMETER;

private final Div sliderWrapper = new Div();
private final DotRow dotRow = new DotRow();
private int currentIndex = 0;

public CarouselView() {
setPadding(false);
setMargin(false);
setSpacing(false);
setSizeFull();
setAlignItems(Alignment.CENTER);

// Remove body margins
UI.getCurrent().getPage().executeJs(
"document.body.style.margin='0';" +
"document.body.style.padding='0';"
);

// 1) Fullscreen overlay
Div overlayFull = new Div();
overlayFull.getStyle().set("position","absolute");
overlayFull.getStyle().set("top","0");
overlayFull.getStyle().set("left","0");
overlayFull.getStyle().set("width","100vw");
overlayFull.getStyle().set("height","100vh");
overlayFull.getStyle().set("pointer-events","none");
overlayFull.getStyle().set("z-index","9998");

Image overlayImg = new Image("/images/topslider/headerMyApp.png","Overlay");
overlayImg.setWidth("100%");
overlayImg.setHeight("100%");
overlayImg.getStyle().set("object-fit","cover");
overlayFull.add(overlayImg);
add(overlayFull);

// 2) Slider area, 600px total
Div sliderContainer = new Div();
sliderContainer.getStyle().set("position","relative");
sliderContainer.getStyle().set("width","100%");
sliderContainer.getStyle().set("height", SLIDER_HEIGHT + "px");
sliderContainer.getStyle().set("overflow","hidden");

sliderWrapper.getStyle().set("display","flex");
sliderWrapper.getStyle().set("transition","transform 0.5s ease");
sliderWrapper.setWidth("max-content");

// Create slides
List slides = createSlides();
slides.forEach(sliderWrapper::add);

sliderContainer.add(sliderWrapper);
add(sliderContainer);

// 3) DotRow
dotRow.getStyle().set("display","flex");
dotRow.getStyle().set("justify-content","center");
dotRow.getStyle().set("margin-top","200px");
dotRow.getStyle().set("overflow","visible");
dotRow.initDotContainers(DOT_COUNT);

add(dotRow);
}

private List createSlides() {
List slides = new ArrayList();
// Just placeholders for now
List imageUrls = List.of(
"/images/topslider/headerMyApp.png",
"/images/topslider/headerMyApp.png",
"/images/topslider/headerMyApp.png"
);
List links = List.of(
"https://example.com/page1",
"https://example.com/page2",
"https://example.com/page3"
);

for (int i = 0; i < imageUrls.size(); i++) {
Div slide = new Div();
slide.getStyle().set("display","flex");
slide.getStyle().set("flex-direction","column");
slide.getStyle().set("align-items","center");
slide.getStyle().set("justify-content","center");

slide.setWidth("100vw");
slide.setHeight("400px"); // top 400px, leaving some space below

final int idx = i;
Image img = new Image(imageUrls.get(i), "Slide");
img.setWidth("100%");
img.setHeight("100%");
img.getStyle().set("object-fit","contain");

Button linkBtn = new Button("MyApp Link", e -> {
UI.getCurrent().getPage().open(links.get(idx));
});
linkBtn.getStyle().set("background-color","#797979");
linkBtn.getStyle().set("color","white");
linkBtn.getStyle().set("border","none");
linkBtn.getStyle().set("padding","10px 20px");
linkBtn.getStyle().set("cursor","pointer");
linkBtn.getStyle().set("border-radius","20px");

slide.add(img);
slide.add(linkBtn);
slides.add(slide);
}
return slides;
}

private void onDotClicked(int fromIndex, int toIndex) {
// Always ripple the target
dotRow.dotContainers.get(toIndex).triggerRipple();

// If it's the same dot, only ripple
if (fromIndex == toIndex) {
return;
}
// If we have more than 1 dot, do bridging
if (dotRow.dotContainers.size() > 1) {
dotRow.dotContainers.get(fromIndex).startBridgeTo(dotRow.dotContainers.get(toIndex));
}

// Slide transform
String transform = "translateX(-" + (100 * toIndex) + "vw)";
sliderWrapper.getStyle().set("transform", transform);

// Update dot colors
dotRow.updateDotColors(toIndex);

currentIndex = toIndex;
}

// DotRow container
private class DotRow extends Div {
private final List dotContainers = new ArrayList();

public DotRow() {
getStyle().set("position","relative");
getStyle().set("overflow","visible");
}

public void initDotContainers(int count) {
for (int i = 0; i < count; i++) {
DotContainer dc = new DotContainer(i);
if (i < count - 1) {
dc.getStyle().set("margin-right", DOT_GAP + "px");
}
dotContainers.add(dc);
add(dc);
}
if (!dotContainers.isEmpty()) {
dotContainers.get(0).setDotColor("#333333");
}
}

public void updateDotColors(int activeIndex) {
for (int i = 0; i < dotContainers.size(); i++) {
if (i == activeIndex) {
dotContainers.get(i).setDotColor("#333333");
} else {
dotContainers.get(i).setDotColor("gray");
}
}
}
}

private class DotContainer extends Div {
private final int dotIndex;
private final Span dotSpan = new Span("•");
private Div bridge;

public DotContainer(int idx) {
this.dotIndex = idx;
setWidth(DOT_CONTAINER_WIDTH + "px");
setHeight(DOT_CONTAINER_HEIGHT + "px");
getStyle().set("position","relative");
getStyle().set("overflow","visible");
getStyle().set("display","inline-block");

dotSpan.getStyle().set("position","absolute");
dotSpan.getStyle().set("left","50%");
dotSpan.getStyle().set("top","50%");
dotSpan.getStyle().set("transform","translate(-50%,-50%)");
dotSpan.getStyle().set("font-size", DOT_DIAMETER + "px");
dotSpan.getStyle().set("cursor","pointer");
dotSpan.getStyle().set("user-select","none");
dotSpan.getStyle().set("color","gray");

dotSpan.addClickListener((ClickEvent e) -> {
onDotClicked(currentIndex, dotIndex);
});
add(dotSpan);
}

public void setDotColor(String color) {
dotSpan.getStyle().set("color", color);
}

public void triggerRipple() {
// multiple-click ripple support
Div ripple = new Div();
ripple.getStyle().set("position","absolute");
ripple.getStyle().set("border-radius","50%");
ripple.getStyle().set("border","4px solid rgba(0,0,0,0.3)");
ripple.getStyle().set("width","0px");
ripple.getStyle().set("height","0px");
ripple.getStyle().set("z-index","9999");
ripple.getStyle().set("transition","width 0.7s ease, height 0.7s ease, opacity 0.7s ease");
ripple.getStyle().set("opacity","1");
add(ripple);

ripple.getStyle().set("left","50%");
ripple.getStyle().set("top","50%");
ripple.getStyle().set("transform","translate(-50%,-50%)");

UI.getCurrent().getPage().executeJs(
"setTimeout(function(){" +
" $0.style.width='108px';" +
" $0.style.height='108px';" +
" $0.style.opacity='0';" +
"},50);",
ripple.getElement()
);

UI.getCurrent().getPage().executeJs(
"setTimeout(function(){" +
" const r=$0; if(r && r.parentNode){r.parentNode.removeChild(r);}" +
"},800);",
ripple.getElement()
);
}

public void startBridgeTo(DotContainer target) {
if (dotRow.dotContainers.size() < 2) {
return; // hide bridging if there's only 1 dot
}
if (bridge != null && bridge.getParent().isPresent()) {
remove(bridge);
}
bridge = new Div();
bridge.getStyle().set("position","absolute");
// The bridging dot might appear too large here
bridge.getStyle().set("width", DOT_DIAMETER + "px");
bridge.getStyle().set("height", DOT_DIAMETER + "px");
bridge.getStyle().set("background","rgba(0,0,0,0.3)");
bridge.getStyle().set("border-radius","50%");
bridge.getStyle().set("z-index","9999");
bridge.getStyle().set("transition","all 0.3s ease");
add(bridge);

// Start in the middle of this container
bridge.getStyle().set("left","50%");
bridge.getStyle().set("top","50%");
bridge.getStyle().set("transform","translate(-50%,-50%) scale(1,1)");

// Calculate dx if needed
double dx = (target.dotIndex - this.dotIndex) * (DOT_CONTAINER_WIDTH + DOT_GAP);
double halfX = dx / 2.0;

// Phase 1
UI.getCurrent().getPage().executeJs(
"setTimeout(function(){" +
" $0.style.transform='translate(" + halfX + "px, -50%) scale(2,0.6)';" +
"},10);",
bridge.getElement()
);

// Phase 2
UI.getCurrent().getPage().executeJs(
"setTimeout(function(){" +
" $0.style.transform='translate(" + dx + "px, -50%) scale(1,1)';" +
"},310);",
bridge.getElement()
);

// Remove after 700ms
UI.getCurrent().getPage().executeJs(
"setTimeout(function(){" +
" const b=$0;" +
" if(b && b.parentNode){b.parentNode.removeChild(b);}" +
"},700);",
bridge.getElement()
);
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... arts-right