Handling Mouse Scrolling

Custom Scroll Animations in SDL

How can I implement custom scroll animations in SDL applications?

Abstract art representing computer programming

Implementing custom scroll animations in SDL can enhance the user experience by providing smooth and visually appealing interactions. Here’s an example program that responds to scroll events:

#include <SDL.h>

#include <chrono>
#include <iostream>

int main(int argc, char* argv[]) {
  using namespace std::chrono;
  SDL_Init(SDL_INIT_VIDEO);
  SDL_Window* window = SDL_CreateWindow(
    "Custom Scroll Animations Example",
    SDL_WINDOWPOS_UNDEFINED,
    SDL_WINDOWPOS_UNDEFINED,
    800, 600, SDL_WINDOW_SHOWN
  );
  SDL_Renderer* renderer =
    SDL_CreateRenderer(window, -1, 0);

  SDL_Event event;
  bool running = true;
  float scrollPosition = 0.0f;
  float targetPosition = 0.0f;
  float animationSpeed = 0.1f;  
  auto lastTime = high_resolution_clock::now();

  while (running) {
    auto currentTime = high_resolution_clock::now();
    duration<float> deltaTime =
      currentTime - lastTime;
    lastTime = currentTime;

    while (SDL_PollEvent(&event)) {
      if (event.type == SDL_MOUSEWHEEL) {
        targetPosition += event.wheel.y * 20.0f;  
      }
      if (event.type == SDL_QUIT) {
        running = false;
      }
    }

    // Smoothly interpolate the scroll position
    // towards the target position
    scrollPosition += (
      targetPosition - scrollPosition
    ) * animationSpeed;

    SDL_SetRenderDrawColor(renderer, 0, 0, 0, 255);
    SDL_RenderClear(renderer);

    SDL_SetRenderDrawColor(
      renderer, 255, 255, 255, 255);

    SDL_Rect rect = {
      375,
      static_cast<int>(scrollPosition),
      50,
      50
    };
    SDL_RenderFillRect(renderer, &rect);

    SDL_RenderPresent(renderer);
  }

  SDL_DestroyRenderer(renderer);
  SDL_DestroyWindow(window);
  SDL_Quit();
  return 0;
}

We use a target position to determine the final desired scroll position. Gradually interpolate the current scroll position towards the target position to create a smooth animation.

The animationSpeed variable controls how quickly the scroll position interpolates towards the target position. Adjust this value to achieve the desired animation effect.

In the event loop, we update the target position based on mouse wheel input. Each scroll event changes the target position, and the animation logic smoothly adjusts the current scroll position.

Here’s a more advanced example that includes easing for a smoother animation:

#include <SDL.h>

#include <chrono>
#include <cmath>
#include <iostream>

float EaseOut(float t) {
  return 1.0f - std::pow(1.0f - t, 3);  
}

int main(int argc, char* argv[]) {
  using namespace std::chrono;

  SDL_Init(SDL_INIT_VIDEO);
  SDL_Window* window = SDL_CreateWindow(
    "Custom Scroll Animations Example",
    SDL_WINDOWPOS_UNDEFINED,
    SDL_WINDOWPOS_UNDEFINED,
    800, 600, SDL_WINDOW_SHOWN
  );

  SDL_Renderer* renderer =
    SDL_CreateRenderer(window, -1, 0);

  SDL_Event event;
  bool running = true;
  float scrollPosition = 0.0f;
  float targetPosition = 0.0f;
  float animationSpeed = 0.1f;
  auto lastTime = high_resolution_clock::now();

  while (running) {
    auto currentTime = high_resolution_clock::now();
    duration<float> deltaTime = currentTime - lastTime;
    lastTime = currentTime;

    while (SDL_PollEvent(&event)) {
      if (event.type == SDL_MOUSEWHEEL) {
        targetPosition += event.wheel.y * 20.0f;
      }
      if (event.type == SDL_QUIT) {
        running = false;
      }
    }

    // Smoothly interpolate the scroll position
    // towards the target position with easing
    float t = EaseOut(
      animationSpeed * deltaTime.count());
    scrollPosition += (
      targetPosition - scrollPosition) * t;

    SDL_SetRenderDrawColor(renderer, 0, 0, 0, 255);
    SDL_RenderClear(renderer);

    SDL_SetRenderDrawColor(
      renderer, 255, 255, 255, 255);

    SDL_Rect rect = {
      375,
      static_cast<int>(scrollPosition),
      50,
      50
    };

    SDL_RenderFillRect(renderer, &rect);

    SDL_RenderPresent(renderer);
  }

  SDL_DestroyRenderer(renderer);
  SDL_DestroyWindow(window);
  SDL_Quit();
  return 0;
}

By following these steps, you can implement custom scroll animations in SDL. Using interpolation and easing functions, you can create smooth and visually appealing animations that enhance the user experience in your applications.

This Question is from the Lesson:

Handling Mouse Scrolling

Learn how to detect and handle mouse scroll wheel events in SDL2, including vertical and horizontal scrolling, as well as scroll wheel button events.

Answers to questions are automatically generated and may not have been reviewed.

This Question is from the Lesson:

Handling Mouse Scrolling

Learn how to detect and handle mouse scroll wheel events in SDL2, including vertical and horizontal scrolling, as well as scroll wheel button events.

sdl2-promo.jpg
Part of the course:

Game Dev with SDL2

Learn C++ and SDL development by creating hands on, practical projects inspired by classic retro games

Free, unlimited access

This course includes:

  • 53 Lessons
  • 100+ Code Samples
  • 91% Positive Reviews
  • Regularly Updated
  • Help and FAQ
Free, Unlimited Access

Professional C++

Comprehensive course covering advanced concepts, and how to use them on large-scale projects.

Screenshot from Warhammer: Total War
Screenshot from Tomb Raider
Screenshot from Jedi: Fallen Order
Contact|Privacy Policy|Terms of Use
Copyright © 2024 - All Rights Reserved