Affichage des articles dont le libellé est Java Animation Using Timer. Afficher tous les articles
Affichage des articles dont le libellé est Java Animation Using Timer. Afficher tous les articles

Java Text Animation

How to Create a Text Animation Effects in Java Netbeans

How to Create a Text Animation Effects in Java Netbeans


In this Java Tutorial we will see How To Create a text animations with growing text, gradient colors and shadow effects In Java Using Netbeans.

What We Are Gonna Use In This Project:

- Java Programming Language.
- NetBeans Editor.





Project Source Code:



/**
 *
 * @author 1BestCsharp
 */

public class TextAnimation extends JFrame{

        private ModernTextEffect textEffect;
        
        /**
        * Constructor: Sets up the main application window and animation components
        */
        public TextAnimation(){
            
                setTitle("Text Animation Effect");
                setSize(1200, 600);
                setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                setLocationRelativeTo(null);
                
                // Create text effect component with the message to display
                textEffect = new ModernTextEffect("FIGHT!");
                add(textEffect);
                
                // Set up animation timer
                Timer timer = new Timer(16, e -> textEffect.animate());
                timer.start();
            
        }

        public static void main(String[] args) {
            SwingUtilities.invokeLater(() -> {
                new TextAnimation().setVisible(true);
            });
    }
    
}

/**
 * Custom JPanel that handles the text animation effect
 */
class ModernTextEffect extends JPanel{
    
    private String text;              // Text to display
    private float scale = 0.1f;       // Current scale of the text (for zoom effect)
    private boolean growing = true;   // Whether text is currently growing in size
    private float angle = 0;          // Animation angle for movement effects
    private float time = 0;           // Time accumulator for color animations
    
    // Gradient colors for the effect
    private Color[] gradientColors = {
        new Color(255, 0, 128),  // Pink
        new Color(255, 102, 0),  // Orange
        new Color(255, 215, 0),  // Gold
        new Color(0, 255, 255)   // Cyan
    };
    
    
     /**
     * Constructor: Initializes the text effect with the provided message
     * 
     * @param text The text to animate
     */
     public ModernTextEffect(String text) {
        this.text = text;
        setBackground(new Color(20, 20, 25)); // Dark background
    }
    
     /**
     * Advances the animation by one frame
     * Called by the timer in the main class
     */
     public void animate() {
         
            // Handle the initial "grow" animation
            if (growing) {
               scale += 0.05f;
               if (scale >= 1.0f) {
                   growing = false;
                   scale = 1.0f;
               }
           }
            
            // Update animation parameters
            angle += 0.05f;
            time += 0.1f;
            
           // Trigger repaint to show the next animation frame
           repaint();
        
         
     }
    
     
     /**
     * Renders the text with special effects
     */
    @Override
    protected void paintComponent(Graphics g) {
        
            super.paintComponent(g);
            Graphics2D g2d = (Graphics2D) g;
            
            // Enable high quality rendering
            g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, 
                    RenderingHints.VALUE_ANTIALIAS_ON);
            g2d.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING,
                    RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
            
            // Reset composite in case it was modified previously
            g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1.0f));
            
            // Calculate text position (centered)
            Font baseFont = new Font("Impact", Font.BOLD, 150);
            FontMetrics metrics = g2d.getFontMetrics(baseFont);
            int textWidth = metrics.stringWidth(text);
            int x = (getWidth() - textWidth) / 2;
            int y = (getHeight() + metrics.getHeight()) / 2;
            
            // Set up transform for positioning and scaling
            AffineTransform transform = new AffineTransform();
            transform.translate(x, y);
            transform.scale(scale, scale);
            
            // Add subtle rotation after initial growth animation completes
            if (!growing) {
                transform.rotate(Math.sin(angle) * 0.05, textWidth / 2, 0);
            }
            
            Font scaledFont = baseFont.deriveFont(transform);
            
            // Draw shadow/glow layers
            // More layers (higher i) = farther back in the shadow stack
            for (int i = 20; i > 0; i--) {
                
                  float progress = (float) i / 20.0f;
                  Color color = getGradientColor(progress + (time * 0.1f));
                  
                 // Make shadow semi-transparent
                g2d.setColor(new Color(
                    color.getRed(),
                    color.getGreen(),
                    color.getBlue(),
                    (int)(255 * (1 - progress) * 0.2)
                ));
                
                // Offset each shadow layer based on angle
                AffineTransform shadowTransform = new AffineTransform(transform);
                shadowTransform.translate(i * 2 * Math.cos(angle), i * 2 * Math.sin(angle));
                g2d.setFont(baseFont.deriveFont(shadowTransform));
                g2d.drawString(text, 0, 0);
                
            }
            
            // Draw main text with animated gradient
            GradientPaint gradient = new GradientPaint(
                x, y - metrics.getHeight(),
                getGradientColor(time * 0.1f),
                x + textWidth, y,
                getGradientColor(time * 0.1f + 0.5f)
            );
            
           g2d.setFont(scaledFont);
           g2d.setPaint(gradient);
           g2d.drawString(text, 0, 0);
        
            // Add shine effect (diagonal highlight across the text)
            g2d.setClip(new TextLayout(text, scaledFont, g2d.getFontRenderContext()).getOutline(null));
            g2d.setPaint(new GradientPaint(
                x, y - metrics.getHeight() * 2,
                new Color(255, 255, 255, 50),  // Semi-transparent white
                x, y,
                new Color(255, 255, 255, 0)    // Fully transparent
            ));
            g2d.fillRect(x, y - metrics.getHeight() * 2,
                        textWidth, metrics.getHeight() * 3);
            g2d.setClip(null);
        
    }
    
    
     /**
     * Calculates a color from the gradient based on position
     * 
     * @param position A float value (will be wrapped to 0.0-1.0)
     * @return Interpolated color from the gradient
     */
      private Color getGradientColor(float position) {
          
            // Ensure position is between 0.0 and 1.0
           position = position % 1.0f;
           if (position < 0) position += 1.0f;
           
           // Find the two colors to interpolate between
            float scaled = position * (gradientColors.length - 1);
            int index = (int) scaled;
            float fraction = scaled - index;
            
            Color c1 = gradientColors[index];
            Color c2 = gradientColors[(index + 1) % gradientColors.length];
            
            // Interpolate between the two colors
            return new Color(
                lerp(c1.getRed(), c2.getRed(), fraction) / 255f,
                lerp(c1.getGreen(), c2.getGreen(), fraction) / 255f,
                lerp(c1.getBlue(), c2.getBlue(), fraction) / 255f
            );
            
          
      }
    
    
    
    
     /**
     * Linear interpolation function
     * 
     * @param start Starting value
     * @param end Ending value
     * @param fraction How far between start and end (0.0-1.0)
     * @return Interpolated value
     */
     private int lerp(int start, int end, float fraction) {
        return (int) (start + (end - start) * fraction);
    }
    
}

  

The Final Result:


Java Text Animation 1

Java Text Animation 2

Java Text Animation 3





Card Slider in Java Swing

How to Create a Card Slider in Java Netbeans

How to Create a Card Slider in Java Netbeans



In this Java Tutorial we will see How To Create a card slider with smooth animations, drag interactions, mouse wheel navigation, dynamic scaling, and glassmorphism design elements In Java Using Netbeans.

What We Are Gonna Use In This Project:

- Java Programming Language.
- NetBeans Editor.





Project Source Code:


/**
 *
 * @author 1BestCsharp
 * 
 */
public class CardSlider extends JPanel  {
    
    // Card display and animation constants
    private static final int CARD_WIDTH = 320;
    private static final int CARD_HEIGHT = 420;
    private static final int CARD_SPACING = 30;
    private static final int ANIMATION_DURATION = 250;
    
    // Color palette for modern, clean design
    private static final Color BACKGROUND_COLOR = new Color(245, 247, 250);
    private static final Color SPECIAL_COLOR = new Color(88, 86, 214);
    private static final Color CARD_BACKGROUND = new Color(255, 255, 255, 240);
    private static final Color TEXT_COLOR = new Color(30, 30, 30);
    private static final Color CARD_BORDER = new Color(255, 255, 255, 100);
            
    // State tracking variables for card slider
    private final List<Card> cards = new ArrayList<>();
    private int currentIndex = 0;
    private Timer animationTimer;
    private long animationStartTime;
    private double slideOffset = 0;
    private double targetOffset = 0;
    private double startOffset = 0;
    
    // UI components for navigation
    private JButton prevButton;
    private JButton nextButton;
    private CardIndicator indicator;
    
    // Drag interaction variables
    private boolean isDragging = false;
    private Point dragStart;
    private double startDragOffset;
    
    public CardSlider(){
        
        setBackground(BACKGROUND_COLOR);
        setLayout(null);
        
        setupNavigationButtons();
        setupMouseInteraction();
        setupAnimationTimer();
        setupCardIndicator();
        
    }
    
    
    // Create dots at bottom to show current card position
    private void setupCardIndicator(){
        indicator = new CardIndicator();
        add(indicator);
    }
    
    // Set up mouse interactions like dragging and scrolling
    private void setupMouseInteraction(){
        
        MouseAdapter mouseHandler = new MouseAdapter() {
            
            @Override
            public void mousePressed(MouseEvent e){
                // Record where drag started
                dragStart = e.getPoint();
                startDragOffset = slideOffset;
                isDragging = true;
            }
            
            @Override
            public void mouseReleased(MouseEvent e){
                
                if(isDragging){
                    
                    isDragging = false;
                    double dragDistance = e.getX() - dragStart.x;
                    
                    // Determine if drag should change card
                    if(Math.abs(dragDistance) > CARD_WIDTH / 3){
                        
                        if(dragDistance > 0 && currentIndex > 0){
                            currentIndex --; // Move to previous card
                        }
                        
                        else if(dragDistance < 0 && currentIndex < cards.size() - 1){
                            currentIndex ++; // Move to next card
                        }
                        
                    }
                    
                    startSlideAnimation();
                    
                }
                
            }

            @Override
            public void mouseDragged(MouseEvent e){
                
                if(isDragging){
                    // Update slider position based on drag
                    double dragDistance = e.getX() - dragStart.x;
                    slideOffset = startDragOffset + dragDistance;
                    repaint();
                }

            }
            
            @Override
            public void mouseWheelMoved(MouseWheelEvent e){
                // Allow mouse wheel to navigate cards
                if(e.getWheelRotation() > 0){ nextCard(); }
                
                else{ previousCard(); }
                
            }

        };
        
        // Register mouse listeners for interaction
        addMouseListener(mouseHandler);
        addMouseMotionListener(mouseHandler);
        addMouseWheelListener(mouseHandler);
        
    }
    
    
    // Create smooth animation timer for card transitions
    private void setupAnimationTimer(){
        
        animationTimer = new Timer(16, e -> {
            
            long elapsed = System.currentTimeMillis() - animationStartTime;
            float progress = Math.min(1f, (float) elapsed / ANIMATION_DURATION);
            
            // Advanced easing function for more natural animation
            progress = (float) (progress < 0.5 ? 4 * progress * progress * progress : 
                                            1 - Math.pow(-2 * progress +2, 3));
            
            // Interpolate between start and target offsets
            slideOffset = startOffset + (targetOffset - startOffset) * progress;
            
            // Stop animation when complete
            if(progress >= 1){
                startOffset = targetOffset;
                ((Timer) e.getSource()).stop();
            }
            
            repaint();
            
        });
        
    }
    
    
    
    
     // Add navigation buttons
    private void setupNavigationButtons(){
        prevButton = createNavigationButton("‹");
        nextButton = createNavigationButton("›");
        
        prevButton.addActionListener(e -> previousCard());
        nextButton.addActionListener(e -> nextCard());
        
        add(prevButton);
        add(nextButton);
    }
    
    
    // Create and design navigation button
    private JButton createNavigationButton(String text){
        
        JButton button = new JButton(text){
            
            @Override
            protected void paintComponent(Graphics g){
                Graphics2D g2d = (Graphics2D)g.create();
                g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
                
                // Create circular button shape
                Area circle = new Area(new Ellipse2D.Double(0,0, getWidth(), getHeight()));
                // Background with transparency
                g2d.setColor(new Color(255, 255, 255, 80));
                g2d.fill(circle);
                // Dynamic button color based on interaction state
                Color buttonColor = getModel().isPressed() ? SPECIAL_COLOR.darker() : SPECIAL_COLOR;
                
                g2d.setColor(buttonColor);
                g2d.fill(circle);
                
                // Add subtle border
                g2d.setColor(CARD_BORDER);
                g2d.setStroke(new BasicStroke(2.0f));
                g2d.draw(circle);
                
                // Add text with shadow effect
                g2d.setColor(new Color(0,0,0,50));
                g2d.setFont(new Font("Arial", Font.BOLD, 18));
                FontMetrics fm = g2d.getFontMetrics();
                int x = (getWidth() - fm.stringWidth(text)) / 2;
                int y = (getHeight() + fm.getAscent() - fm.getDescent()) / 2;
                g2d.drawString(text, x + 1, y + 1);
                
                g2d.setColor(Color.WHITE);
                g2d.drawString(text, x, y);
                g2d.dispose();
                
            }
            
        };
        
        // Button styling
        button.setPreferredSize(new Dimension(50, 50));
        button.setBorderPainted(false);
        button.setContentAreaFilled(false);
        button.setFocusPainted(false);
        button.setCursor(new Cursor(Cursor.HAND_CURSOR));
        
        return button;

    }
    
    
    
    // Inner class representing an individual card
    private class Card{
        
        private String title;
        private String description;
        private Color cardColor;
        
        public Card(String title, String description, Color cardColor){
            this.title = title;
            this.description = description;
            this.cardColor = cardColor;
        }
        
        // Render the card with modern visual effects
        public void draw(Graphics2D g2d, int x, int y, float scale, float alpha){
            
            AffineTransform transform = g2d.getTransform();
            
            // Apply scaling transformation
            g2d.translate(x + CARD_WIDTH / 2, y + CARD_HEIGHT / 2);
            g2d.scale(scale, scale);
            g2d.translate(-CARD_WIDTH / 2 , -CARD_HEIGHT / 2);
            
            // Create layered shadow effect
            for(int i = 0; i < 3; i++){
                g2d.setColor(new Color(0,0,0,10 - i *3));
                g2d.fillRoundRect(5 + i, 5 + i, CARD_WIDTH, CARD_HEIGHT, 25, 25);
            }
            
            // Apply transparency and background
            g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, alpha));
            g2d.setColor(CARD_BACKGROUND);
            g2d.fillRoundRect(0, 0, CARD_WIDTH, CARD_HEIGHT, 25, 25);
            
            // Add subtle border
            g2d.setColor(CARD_BORDER);
            g2d.setStroke(new BasicStroke(1.5f));
            g2d.drawRoundRect(0, 0, CARD_WIDTH, CARD_HEIGHT, 25, 25);
            
             // Create gradient accent bar at top of card
             GradientPaint gradient = new GradientPaint(0, 0, cardColor, CARD_WIDTH, 0,
                                new Color(cardColor.getRed(), cardColor.getGreen(), cardColor.getBlue(), 60)
             );
             g2d.setPaint(gradient);
             g2d.fillRoundRect(0, 0, CARD_WIDTH, 6, 6, 6);
             
             // Draw card content
             g2d.setColor(TEXT_COLOR);
             g2d.setFont(new Font("Arial", Font.BOLD, 26));
             //g2d.drawString(title, 25, 60);
             drawWrappedText(g2d, title, 25, 60, CARD_WIDTH - 50);
             
             g2d.setFont(new Font("Arial", Font.PLAIN, 16));
             //g2d.drawString(description, 25, 110);
             drawWrappedText(g2d, description, 25, 110, CARD_WIDTH - 50);
             
            g2d.setTransform(transform);
            
        }
        
        
        // Method to wrap text within card bounds
        private void drawWrappedText(Graphics2D g2d, String text, int x, int y, int width){
            
            FontMetrics fm = g2d.getFontMetrics();
            String[] words = text.split("\\s+");
            StringBuilder line = new StringBuilder();
            
            for(String word: words){
                if(fm.stringWidth(line + " " + word) < width){
                    
                    if(line.length() > 0) line.append(" ");
                    line.append(word);
                    
                }
                else{
                    g2d.drawString(line.toString(), x, y);
                    y += fm.getHeight();
                    line = new StringBuilder(word);
                }
            }
            
            if(line.length() > 0){
                g2d.drawString(line.toString(), x, y);
            }
            
        }
  
    }
    
    
    
    
    // Inner class to create card position indicator dots
    private class CardIndicator extends JComponent{
        
        private static final int DOT_SIZE = 10;
        private static final int DOT_SPACING = 10;
        
        @Override
        protected void paintComponent(Graphics g){
            
            Graphics2D g2d = (Graphics2D)g.create();
            g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
            
            // Calculate total width of indicator
            int totalWidth = cards.size() * (DOT_SIZE + DOT_SPACING) - DOT_SPACING;
            int startX = (getWidth() - totalWidth) / 2;
            
            // Draw dots for each card
            for(int i = 0; i < cards.size(); i++){
                
                if(i == currentIndex){
                    // Active dot with gradient
                    GradientPaint gradient = new GradientPaint(
                            startX + i * (DOT_SIZE + DOT_SPACING), 0, SPECIAL_COLOR,
                            startX + i * (DOT_SIZE + DOT_SPACING) + DOT_SIZE, 0, SPECIAL_COLOR.brighter()
                    );
                    
                    g2d.setPaint(gradient);
                    g2d.fillOval(startX + i * (DOT_SIZE + DOT_SPACING), 0, DOT_SIZE, DOT_SIZE);
                    
                }
                
                else{
                    // Inactive dot
                    g2d.setColor(new Color(SPECIAL_COLOR.getRed(), SPECIAL_COLOR.getGreen(), SPECIAL_COLOR.getBlue(), 100));
                    g2d.fillOval(startX + i * (DOT_SIZE + DOT_SPACING), 0, DOT_SIZE - 1, DOT_SIZE - 1);
                }
                
            }
            
            g2d.dispose();
            
        }
        
        // Calculate preferred size for indicator
        @Override
        public Dimension getPreferredSize(){
            return new Dimension(cards.size() * (DOT_SIZE + DOT_SPACING) - DOT_SPACING, DOT_SIZE);
        }
        
        
    }
    
    
    
    // Add a new card to the slider
    public void addCard(String title, String description, Color color){
        cards.add(new Card(title, description, color));
        indicator.repaint();
        revalidate();
        repaint();
    }
    
    
    // Navigate to previous card
    private void previousCard(){
        if(currentIndex > 0 && !animationTimer.isRunning()){
            currentIndex--;
            startSlideAnimation();
        }
    }
    
   // Navigate to next card
    private void nextCard(){
        if(currentIndex < cards.size() - 1 && !animationTimer.isRunning()){
            currentIndex++;
            startSlideAnimation();
        }
    }
    
    
    
    
    // Start smooth sliding animation between cards
    private void startSlideAnimation(){
        startOffset = slideOffset;
        targetOffset = -currentIndex * (CARD_WIDTH + CARD_SPACING);
        animationStartTime = System.currentTimeMillis();
        animationTimer.restart();
    }
    
    
    
    // Custom painting method to render cards with visual effects
    @Override
    protected void paintComponent(Graphics g){
        
        super.paintComponent(g);
        
        // Enable high-quality rendering
        Graphics2D g2d = (Graphics2D)g.create();
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                                            RenderingHints.VALUE_ANTIALIAS_ON);
        g2d.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING,
                                            RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
        
        
        // Calculate center position for cards
        int centerX = (getWidth() - CARD_WIDTH) / 2;
        int centerY = (getHeight() - CARD_HEIGHT) / 2;
        
        // Render cards with parallax and scale effects
        for(int i = 0; i < cards.size(); i++){
            Card card = cards.get(i);
            int x = centerX + (int) (i * (CARD_WIDTH + CARD_SPACING) + slideOffset);
            
            // Only draw cards that are visible
            if(x + CARD_WIDTH >= 0 && x <= getWidth()){
                // Calculate scale and transparency based on distance from center
                float distance = Math.abs(x - centerX);
                float scale = Math.max(0.85f, 1f - distance / (getWidth() * 0.8f));
                float alpha = Math.max(0.6f, 1f - distance / (getWidth() * 0.8f));
                
                card.draw(g2d, x, centerY, scale, alpha);
                
            }
        
        }
        
        g2d.dispose();
        
        
    }
    
    
    // Set preferred size for the slider
    @Override
    public Dimension getPreferredSize(){
        return new Dimension(900, 600);
    }
    
    
    
    // Manually layout components
    @Override
    public void doLayout(){
        
        super.doLayout();
        
        // Position navigation buttons
        if(prevButton != null && nextButton != null){
            Dimension buttonSize = prevButton.getPreferredSize();
            int y = (getHeight() - buttonSize.height) / 2;
            
            prevButton.setBounds(25, y, buttonSize.width, buttonSize.height);
            nextButton.setBounds(getWidth() - buttonSize.width - 25, y, buttonSize.width, buttonSize.height);
        }
        
        // Position indicator dots
        if(indicator != null){
            Dimension indSize = indicator.getPreferredSize();
            indicator.setBounds((getWidth() - indSize.width) / 2, getHeight() - indSize.height - 25,
                    indSize.width, indSize.height);
        }
        
    }
    
    
    
    
    
    public static void main(String[] args) {
        
        JFrame frame = new JFrame("Card Slider");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        
        
        CardSlider slider = new CardSlider();
            // Add sample cards with different themes
            slider.addCard("Material Design", 
                         "Sleek and modern interface with glass morphism effects and smooth animations.",
                         new Color(103, 58, 183)); // Deep purple
            
            slider.addCard("Smart Interactions", 
                         "Intuitive mouse and wheel controls with responsive feedback and natural gestures.",
                         new Color(0, 150, 136)); // Teal
            
            slider.addCard("Visual Effects", 
                         "Beautiful transitions, parallax scrolling, and dynamic scaling effects.",
                         new Color(233, 30, 99)); // Pink
            
            slider.addCard("Customizable Theme", 
                         "Easy to customize with gradients, shadows, and modern color schemes.",
                         new Color(33, 150, 243)); // Blue
            
            slider.addCard("Responsive Layout", 
                         "Automatically adapts to different screen sizes with fluid animations.",
                         new Color(139, 195, 74)); // Light Green
        
        frame.add(slider);
        //slider.repaint();
        
        frame.setSize(1000, 600);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);

    }

}


The Final Result:

Card Slider in Java Swing

Create Card Slider in Java Swing

Create Card Slider in Java

Create Card Slider in Java Netbeans


if you want the source code click on the download button below




disclaimer: you will get the source code and to make it work in your machine is your responsibility and to debug any error/exception is your responsibility this project is for the students who want to see an example and read the code not to get and run.