simple vector graphics animation DSL-CodePudding

I'm looking for a vector graphics format that supports simple animations. At first I thought SVG would be the best. But SVG animation doesn't have any support in libraries. Is there some other format that would be useable for this?

I would like to have a Rust library, but have no problems writing an FFI to a C or C library either.

Any tips are welcome.

CodePudding user response：

SVG's have some cool animation capabilities, i.e. transform: matrix() attribute CSS transitions. My personal webpage in my profile has an example SVG I animated using CSS.

Here is some material I have gathered, I'm not sure of any other libraries though. The Three.js link has tons of additional info. Hope this helps.

Lastly, two really cool sites I have found using WebGL/Three.js/SVG animation:

CodePudding user response：

To your question/request..

"..I would like to have a Rust library, but have no problems writing an FFI to a C or C library either."

I would recommend, a couple of nice options using Rust, C or C

Option 1:

please check out popular Resvg is a great lib Link, and github 1300 stars

Option 2:

please check out UX-Animate, which also has Rust apps & samples

// Scaling example in rust
use ux::prelude::*;
use ux::{Surface, Window};

#[derive(Default, Application)]
struct Application {
    window: Window,
}

impl Application {
    fn new() -> Self {
        let app: Self = Default::default();
        app.window
            .set_window_size(512, 512)
            .set_title("UX Framework - Scaling")
            .show()
            .connect_destroy(move |_win| Application::quit());

        app.window.set_background_color(Some(color::GRAY_9));

        let surface = Surface::new();
        surface.set_size(400.0, 400.0);

        // we should also change surface content size to avoid distortion
        surface.set_content_size(400.0, 400.0);
        surface.set_position(56.0, 56.0);

        app.window.set_child(&surface);

        surface.connect_draw(move |_widget, ctx, width, height| {
            ctx.clear_rect(0.0, 0.0, width as f64, height as f64);

            ctx.set_fill_color(color::TEAL_9); // Fill color
            ctx.begin_path();
            ctx.rect(10.0, 10.0, 90.0, 90.0);
            ctx.fill();
    
            ctx.scale(0.6, 0.6);
            ctx.set_fill_color(color::ORANGE_9); // Fill color
            ctx.begin_path();
            ctx.rect(30.0, 30.0, 90.0, 90.0);
            ctx.fill();
    
            ctx.scale(0.8, 0.8);
            ctx.set_fill_color(color::INDIGO_9); // Fill color
            ctx.begin_path();
            ctx.rect(50.0, 50.0, 90.0, 90.0);
            ctx.fill();

            false
        });

        app
    }
}

fn main() {
    Application::run();
}

CodePudding user response：

Rust seems to be a bit tricky in this regard. There are some abandoned or incomplete SVG animation library projects in this space, e.g ux-animate.

Features to be implemented on ux-animate‘s roadmap:

Tweening support
Motion support
Animation runtime support
SVG support

As you said simple, how about gtk although it is a gui framework?

The gtk-rs project provides safe bindings to the Rust language for fundamental libraries from the GNOME stack like GLib, Cairo, GTK 3 and GTK 4.

Here is a 10 minute example on animating a circle in Rust with nannou. Worth a look.

From my point of view, maybe ruffle might be an option for you.

ruffle is a Flash Player emulator built in the Rust programming language.

resvg regarding SVG is not an option:

resvg is aiming to support only the static SVG subset; e.g. no a, script, view or cursor elements, no events and no animations.