Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

the animated left_ptr_watch and wait is really HUGE. #134

Closed
unisgn opened this issue Dec 30, 2022 · 2 comments · Fixed by #144
Closed

the animated left_ptr_watch and wait is really HUGE. #134

unisgn opened this issue Dec 30, 2022 · 2 comments · Fixed by #144
Assignees
Labels
assigned Under progress. Planned Part of a project

Comments

@unisgn
Copy link

unisgn commented Dec 30, 2022

the animated left_ptr_watch and wait is really HUGE. Is there a way to reduce animation frames? perhaps in build.toml? thx.

@ful1e5
Copy link
Owner

ful1e5 commented Dec 31, 2022

To reduce the number of frames in an animated SVG file, you can lower the dur attribute in the animateTransform tag. After doing this, you can generate bitmaps using the command yarn render. There are a few things to consider before changing the dur value:

  1. The duration of other animation tags
  2. The delay between frames (which can be changed during the build in the build.toml file)

For example, if you want to reduce the frames of the file left_ptr_watch.svg by half, you would need to divide each dur value by 2. This is because they are part of the animation, and changing them too much can result in a broken animation or a completely different animation than intended.

<g transform="translate(-50 -50)">
  <g transform="rotate(0 50 50)">
-   <animateTransform attributeName="transform" type="rotate" repeatCount="4" values="0 50 50;360 50 50" keyTimes="0;1" dur="0.7575757575757576s"/>
+   <animateTransform attributeName="transform" type="rotate" repeatCount="4" values="0 50 50;360 50 50" keyTimes="0;1" dur="0.3787878787878788s"/>
    <path fill-opacity="0.8" fill="#f05125" d="M50 50L50 0A50 50 0 0 1 100 50Z"/>
  </g>
  <g transform="rotate(0 50 50)">
-   <animateTransform attributeName="transform" type="rotate" repeatCount="3" values="0 50 50;360 50 50" keyTimes="0;1" dur="1.0101010101010102s"/>
+   <animateTransform attributeName="transform" type="rotate" repeatCount="3" values="0 50 50;360 50 50" keyTimes="0;1" dur="0.5050505050505051s"/>
    <path fill-opacity="0.8" fill="#fdb813" d="M50 50L50 0A50 50 0 0 1 100 50Z" transform="rotate(90 50 50)"/>
  </g>
  <g transform="rotate(0 50 50)">
-   <animateTransform attributeName="transform" type="rotate" repeatCount="2" values="0 50 50;360 50 50" keyTimes="0;1" dur="1.5151515151515151s"/>
+   <animateTransform attributeName="transform" type="rotate" repeatCount="2" values="0 50 50;360 50 50" keyTimes="0;1" dur="0.7575757575757576s"/>
    <path fill-opacity="0.8" fill="#7fbb42" d="M50 50L50 0A50 50 0 0 1 100 50Z" transform="rotate(180 50 50)"/>
  </g>
  <g transform="rotate(0 50 50)">
-   <animateTransform attributeName="transform" type="rotate" repeatCount="1" values="0 50 50;360 50 50" keyTimes="0;1" dur="3.0303030303030303s"/>
+   <animateTransform attributeName="transform" type="rotate" repeatCount="1" values="0 50 50;360 50 50" keyTimes="0;1" dur="1.515151515151515s"/>
    <path fill-opacity="0.8" fill="#32a0da" d="M50 50L50 0A50 50 0 0 1 100 50Z" transform="rotate(270 50 50)"/>
  </g>
</g>

After reducing the number of frames in the SVG file, you should also adjust the delay between the frames. You can do this by defining it in the build.toml file.

[cursors.fallback_settings]
x_hotspot = 100
y_hotspot = 100
-x11_delay = 13
+x11_delay = 7
-win_delay = 0
+win_delay = 1

Use the values of 7 and 1 as examples. Experiment to determine the appropriate values. You can test your cursor here without changing stages.

@arcolinuxz
Copy link

arcolinuxz commented Mar 4, 2023

I was looking in the exact same thing.

image

If the size of these icons could become 1/3 less or half and still have a great look...

Might be something to look into and change to as a default

bibata cursor is the default cursor on https://arcolinux.info so let me also express my thanks for making this cursor

ful1e5 added a commit to ful1e5/cbmp that referenced this issue Sep 9, 2023
Redefined rendering logic to prevent frame omission and stop rendering
when animation completes (fixes #1).

By lowering the `fps` settings, fewer PNG frames are generated for
animated SVGs, resulting in a reduction in the cursor package size
(related to ful1e5/Bibata_Cursor#134).
@ful1e5 ful1e5 self-assigned this Sep 12, 2023
@ful1e5 ful1e5 added Planned Part of a project assigned Under progress. labels Sep 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
assigned Under progress. Planned Part of a project
Projects
Status: Done 👍
Development

Successfully merging a pull request may close this issue.

3 participants