ful1e5 / Bibata_Cursor

Open source, compact, and material designed cursor set.
https://www.bibata.live
GNU General Public License v3.0
2.01k stars 71 forks source link

the animated left_ptr_watch and wait is really HUGE. #134

Closed unisgn closed 1 year ago

unisgn commented 1 year ago

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

ful1e5 commented 1 year ago

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 commented 1 year ago

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