Dioxus Motion

https://github.com/wheregmis/dioxus-motion.git
Admin
A lightweight, cross-platform animation library for Dioxus, enabling smooth animations for web,...
Tokens:8,891
Snippets:30
Trust Score:7.9
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Serve Dioxus Application

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/docs/README.md

Starts the Dioxus development server. The command can be used to serve the app for the default platform or a specific platform using the `--platform` flag.

```bash
dx serve
```

```bash
dx serve --platform desktop
```

--------------------------------

### Start Tailwind CSS Watcher

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/docs/README.md

Initiates the Tailwind CSS compiler to watch for changes and generate the CSS file. Requires prior installation of Node.js, npm, and the Tailwind CSS CLI.

```bash
npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch
```

--------------------------------

### Dioxus Motion Installation and Features

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Instructions for adding dioxus-motion to your Cargo.toml, including optional dependencies for web, desktop, and mobile platforms, and enabling transition features.

```toml
[dependencies]
dioxus-motion = { version = "0.3.0", optional = true, default-features = false }

[features]
default = ["web"]
web = ["dioxus/web", "dioxus-motion/web"]
desktop = ["dioxus/desktop", "dioxus-motion/desktop"]
mobile = ["dioxus/mobile", "dioxus-motion/desktop"]

```

```toml
[dependencies]
dioxus-motion = { version = "0.3.0", optional = true, default-features = false }

[features]
default = ["web"]
web = ["dioxus/web", "dioxus-motion/web", "dioxus-motion/transitions"]
desktop = [
    "dioxus/desktop",
    "dioxus-motion/desktop",
    "dioxus-motion/transitions",
]
mobile = ["dioxus/mobile", "dioxus-motion/desktop", "dioxus-motion/transitions"]

```

--------------------------------

### Create Animation Sequences

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Illustrates how to create and run animation sequences, chaining multiple animations with different configurations. This example demonstrates animating a scale property through a series of spring-based movements.

```rust
let scale = use_motion(1.0f32);

// Create a bouncy sequence
let sequence = AnimationSequence::new()
    .then(
        1.2, // Scale up
        AnimationConfig::new(AnimationMode::Spring(Spring {
            stiffness: 400.0,
            damping: 10.0,
            mass: 1.0,
            velocity: 5.0,
        }))
    )
    .then(
        0.8, // Scale down
        AnimationConfig::new(AnimationMode::Spring(Spring {
            stiffness: 300.0,
            damping: 15.0,
            mass: 1.0,
            velocity: -2.0,
        }))
    )
    .then(
        1.0, // Return to original
        AnimationConfig::new(AnimationMode::Spring(Spring::default()))
    );

// Start the sequence
scale.animate_sequence(sequence);
// Each step in the sequence can have its own timing, easing, and spring physics configuration. Sequences can also be looped or chained with other animations.
```

--------------------------------

### Dioxus Motion New Features: Animation Delays

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Demonstrates how to add a delay before an animation starts using the with_delay configuration option.

```rust
.with_delay(Duration::from_secs(1))

```

--------------------------------

### Rust: Advanced 3D Cube Animation with Looping

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/blog.md

Illustrates an advanced animation scenario using a custom `Transform3D` struct and spring physics with infinite looping. This example showcases animating multiple properties like rotation, translation, and scale for complex visual effects.

```rust
#[derive(Debug, Clone, Copy)]
struct Transform3D {
    rotate_x: f32,
    rotate_y: f32,
    rotate_z: f32,
    translate_x: f32,
    translate_y: f32,
    scale: f32,
}

#[component]
fn SwingingCube() -> Element {
    let mut transform = use_motion(Transform3D::zero());
    
    // Animate the cube with spring physics
    transform.animate_to(
        Transform3D::new(
            PI / 3.0,  // X rotation
            PI / 2.0,  // Y rotation
            PI / 4.0,  // Z rotation
            2.0,       // X translation
            -1.0,      // Y translation
            1.2,       // Scale
        ),
        AnimationConfig::new(AnimationMode::Spring(Spring {
            stiffness: 35.0,
            damping: 5.0,
            mass: 1.0,
            velocity: 2.0,
        }))
        .with_loop(LoopMode::Infinite),
    );
    // ...rest of the implementation
}
```

--------------------------------

### Dioxus Motion Custom Style Generation

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Provides an example of how to generate CSS transform styles from a motion-controlled Transform struct using use_memo.

```rust
    let transform = use_motion(Transform::default());

    let transform_style = use_memo(move || {
        format!(
            "transform: translate({}px, {}px) scale({}) rotate({}deg);",
            transform.get_value().x,
            transform.get_value().y,
            transform.get_value().scale,
            transform.get_value().rotation * 180.0 / std::f32::consts::PI
        )
    });

    // and using the memo in the component
    //   rsx! {
    //     div {
    //         class: "...",
    //         style: "{transform_style.read()}",
    //         // ...rest of component...
    //     }
    //   }

```

--------------------------------

### Animate Component Property

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Provides an example of animating a single component property, such as scale, using `use_motion` and `animate_to`. This snippet showcases the use of spring physics for dynamic animations.

```rust
use dioxus_motion::prelude::*;

#[component]
fn PulseEffect() -> Element {
    let scale = use_motion(1.0f32);

    use_effect(move || {
        scale.animate_to(
            1.2,
            AnimationConfig::new(AnimationMode::Spring(Spring {
                stiffness: 100.0,
                damping: 5.0,
                mass: 0.5,
                velocity: 1.0
            }))
            .with_loop(LoopMode::Infinite)
        );
    });

    rsx! {
        div {
            class: "w-20 h-20 bg-blue-500 rounded-full",
            style: "transform: scale({scale.get_value()})"
        }
    }
}
```

--------------------------------

### Add Dioxus Motion Dependency

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Shows how to include the dioxus-motion library in your Rust project's Cargo.toml file. It provides examples for both the recommended stable version from crates.io and the development version from a Git repository.

```toml
# Recommended: Stable version from crates.io
dioxus-motion = "0.3.1"

# Development version: Follows Dioxus main branch
dioxus-motion = { git = "https://github.com/wheregmis/dioxus-motion.git", branch = "main" }
```

--------------------------------

### Implement Custom Animatable Types in Rust

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Demonstrates how to create custom animatable types by implementing the `Animatable` trait for a `Point3D` struct. This example highlights the simplified trait requirements compared to previous versions, requiring only `interpolate` and `magnitude` methods along with standard Rust operator implementations.

```rust
use dioxus_motion::prelude::*;

#[derive(Debug, Copy, Clone, PartialEq, Default)]
struct Point3D {
    x: f32,
    y: f32,
    z: f32,
}
// Point3D automatically implements Send + 'static since all fields are Send + 'static

// Implement standard Rust operator traits
impl std::ops::Add for Point3D {
    type Output = Self;
    fn add(self, other: Self) -> Self {
        Self {
            x: self.x + other.x,
            y: self.y + other.y,
            z: self.z + other.z,
        }
    }
}

impl std::ops::Sub for Point3D {
    type Output = Self;
    fn sub(self, other: Self) -> Self {
        Self {
            x: self.x - other.x,
            y: self.y - other.y,
            z: self.z - other.z,
        }
    }
}

impl std::ops::Mul<f32> for Point3D {
    type Output = Self;
    fn mul(self, factor: f32) -> Self {
        Self {
            x: self.x * factor,
            y: self.y * factor,
            z: self.z * factor,
        }
    }
}

// Implement Animatable with just two methods!
impl Animatable for Point3D {
    fn interpolate(&self, target: &Self, t: f32) -> Self {
        *self + (*target - *self) * t
    }
    
    fn magnitude(&self) -> f32 {
        (self.x * self.x + self.y * self.y + self.z * self.z).sqrt()
    }
}

// Now you can animate 3D points!
let mut position = use_motion(Point3D::default());
position.animate_to(
    Point3D { x: 10.0, y: 5.0, z: -2.0 },
    AnimationConfig::new(AnimationMode::Spring(Spring::default()))
);

```

--------------------------------

### Configure Page Transitions

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Demonstrates how to implement smooth page transitions in a Dioxus application using the `dioxus-motion` library. This involves annotating routes with transition effects and using `AnimatedOutlet` for rendering.

```rust
use dioxus_motion::prelude::*;

#[derive(Routable, Clone, Debug, PartialEq, MotionTransitions )]
#[rustfmt::skip]
enum Route {
    #[layout(NavBar)]
        #[route("/")]
        #[transition(Fade)]
        Home {},
        #[route("/slide-left")]
        #[transition(ZoomIn)]
        SlideLeft {},
        #[route("/slide-right")]
        SlideRight {},
        #[route("/slide-up")]
        SlideUp {},
        #[route("/slide-down")]
        SlideDown {},
        #[route("/fade")]
        Fade {},
    #[end_layout]
    #[route("/:..route")]
    PageNotFound { route: Vec<String> },
}

#[component]
fn NavBar() -> Element {
    rsx! {
        nav { id: "navbar take it",
            Link { to: Route::Home {}, "Home" }
            Link { to: Route::SlideLeft {}, "Blog" }
        }
        AnimatedOutlet::<Route> {}
    }
}
```

--------------------------------

### Rust: Core Animation with Spring Physics

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/blog.md

Demonstrates the basic usage of the dioxus-motion library to animate a value using spring physics. It shows how to initialize a motion state and trigger an animation to a target value with configurable spring parameters.

```rust
let mut position = use_motion(0.0f32);
position.animate_to(
    100.0,
    AnimationConfig::new(AnimationMode::Spring(Spring {
        stiffness: 100.0,
        damping: 10.0,
        mass: 1.0,
        velocity: 0.0,
    }))
);
```

--------------------------------

### Basic Value Transitions with Motion

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/ROADMAP.md

Demonstrates the basic usage of the `Motion` primitive for animating a value from an initial state to a target state over a specified duration. This is a foundational element for creating animations in Dioxus Motion.

```rust
// Already implemented via:
Motion::new(0.0)
    .to(100.0)
    .duration(Duration::from_millis(300))
```

--------------------------------

### Run Clippy on Workspace

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/CONTRIBUTING.md

Analyzes the entire Dioxus Motion workspace using Clippy with all features enabled, treating warnings as errors. This ensures consistent code quality across all crates.

```bash
cargo clippy --workspace --all-features -- -D warnings
```

--------------------------------

### Dioxus Motion API Migration (v0.1.x to v0.2.x)

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Compares the old animation API (use_value_animation, use_transform_animation) with the new unified use_motion API and its configuration options.

```rust
// Before (v0.1.x)
// let mut motion = use_value_animation(Motion::new(0.0).to(100.0));

// After (v0.2.x)
// let mut value = use_motion(0.0f32);
// value.animate_to(
//     100.0,
//     AnimationConfig::new(AnimationMode::Tween(Tween {
//         duration: Duration::from_secs(2),
//         easing: easer::functions::Linear::ease_in_out,
//     }))
// );

// Before (v0.1.x)
// let mut transform = use_transform_animation(Transform::default());

// After (v0.2.x)
// let mut transform = use_motion(Transform::default());
// transform.animate_to(
//     Transform::new(100.0, 0.0, 1.2, 45.0),
//     AnimationConfig::new(AnimationMode::Spring(Spring {
//         stiffness: 100.0,
//         damping: 10.0,
//         mass: 1.0,
//         ..Default::default()
//     }))
// );

```

--------------------------------

### Dioxus Motion New Features: On Complete Callback

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Illustrates how to specify a callback function to be executed once an animation has finished.

```rust
.with_on_complete(|| println!("Animation complete!"))

```

--------------------------------

### Run Dioxus Motion Tests

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/CONTRIBUTING.md

Executes all unit and integration tests defined within the Dioxus Motion project using Cargo. This verifies the correctness of the codebase.

```bash
cargo test
```

--------------------------------

### Build Dioxus Motion Project

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/CONTRIBUTING.md

Compiles the Dioxus Motion project using Cargo, Rust's build system and package manager. This command ensures all dependencies are fetched and the project is built successfully.

```bash
cargo build
```

--------------------------------

### Clone and Navigate Dioxus Motion Repository

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/CONTRIBUTING.md

Clones the Dioxus Motion project repository from GitHub and changes the current directory into the cloned project. This is the initial step for local development.

```bash
git clone https://github.com/wheregmis/dioxus-motion.git
cd dioxus-motion
```

--------------------------------

### Run Clippy Code Analysis

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/CONTRIBUTING.md

Analyzes the Dioxus Motion codebase using Clippy, a Rust linter, with all features enabled. It enforces Rust coding standards and treats warnings as errors.

```bash
cargo clippy --all-features -- -D warnings
```

--------------------------------

### Dioxus Motion Send + 'static Requirements

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Demonstrates how to use Dioxus Motion with types that satisfy the Send + 'static bounds, including built-in types, custom types, and using Arc for shared ownership.

```rust
use dioxus_motion::prelude::*;

// ✅ This works - f32 is Send + 'static
let motion = use_motion(0.0f32);

// ✅ This works - custom type with Send + 'static
#[derive(Copy, Clone, Default)]
struct Point { x: f32, y: f32 } // Send + 'static automatically derived

let point_motion = use_motion(Point::default());

// ❌ This won't compile - Rc<T> is not Send
// let bad_motion = use_motion(std::rc::Rc::new(0.0f32));

// ✅ Use Arc<T> instead for shared ownership
// Note: The type inside Arc must implement Animatable
#[derive(Copy, Clone, Default)]
struct SharedValue { value: f32 }

impl std::ops::Add for SharedValue {
    type Output = Self;
    fn add(self, other: Self) -> Self {
        Self { value: self.value + other.value }
    }
}

impl std::ops::Sub for SharedValue {
    type Output = Self;
    fn sub(self, other: Self) -> Self {
        Self { value: self.value - other.value }
    }
}

impl std::ops::Mul<f32> for SharedValue {
    type Output = Self;
    fn mul(self, factor: f32) -> Self {
        Self { value: self.value * factor }
    }
}

impl dioxus_motion::animations::core::Animatable for SharedValue {
    fn interpolate(&self, target: &Self, t: f32) -> Self {
        Self { value: self.value + (target.value - self.value) * t }
    }
    
    fn magnitude(&self) -> f32 {
        self.value.abs()
    }
}

let shared_motion = use_motion(SharedValue { value: 0.0 });

// ✅ Alternative: Use Arc to share the motion itself (not the value)
let shared_motion_handle = std::sync::Arc::new(use_motion(0.0f32));
// Now you can clone the Arc and share the motion across components
let motion_clone = shared_motion_handle.clone();

```

--------------------------------

### Rust Dioxus Component: Physics-Based Animated Flower

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/blog.md

This Rust code defines a Dioxus component `AnimatedFlower` that utilizes the `dioxus-motion` library for physics-based animations. It animates petal transforms and center scaling using `use_motion` and `animate_to` with spring physics, demonstrating organic UI element movement.

```rust
#[derive(Debug, Clone, Copy)]
struct PetalTransform {
    rotate: f32,
    scale: f32,
    translate_x: f32,
    translate_y: f32,
}

#[component]
fn AnimatedFlower() -> Element {
    let mut petal_transform = use_motion(PetalTransform::zero());
    let mut center_scale = use_motion(0.0f32);
    
    // Animate petals blooming
    petal_transform.animate_to(
        PetalTransform::new(PI / 4.0, 1.2, 3.0, 3.0),
        AnimationConfig::new(AnimationMode::Spring(Spring {
            stiffness: 60.0,
            damping: 8.0,
            mass: 0.5,
            velocity: 1.0,
        }))
        .with_loop(LoopMode::Infinite),
    );
    // ...rest of the implementation
}
```

--------------------------------

### Rust: Motion Hook Implementation

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/blog.md

Provides the implementation of the `use_motion` hook, which is central to managing animation state within Dioxus components. It initializes an `AnimationState` with an initial value and returns a `Motion` struct to control the animation.

```rust
pub fn use_motion<T: Animatable>(initial: T) -> Motion<T> {
    let state = use_signal(|| AnimationState::new(initial));
    Motion::new(state)
}
```

--------------------------------

### Run Dioxus Motion Tests with Features

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/CONTRIBUTING.md

Executes Dioxus Motion tests while enabling specific feature flags. This allows testing platform-specific or functionality-specific code paths.

```bash
# Run tests with specific features
car go test --features web
car go test --features desktop
car go test --features transitions

# Run tests with all features
car go test --all-features
```

--------------------------------

### Dioxus Motion New Features: Loop Modes

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Shows how to configure animation loop modes, including infinite loops and repeating a specific number of times.

```rust
.with_loop(LoopMode::Infinite)
.with_loop(LoopMode::Times(3))

```

--------------------------------

### Rust Scaling for Normalized Values

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Demonstrates a method for scaling normalized values, commonly used for properties like colors. The `scale` function multiplies the value by a factor and then clamps the result between 0.0 and 1.0 to maintain its normalized state.

```rust
fn scale(&self, factor: f32) -> Self {
    Self {
        value: (self.value * factor).clamp(0.0, 1.0)
    }
}
```

--------------------------------

### Rust: Animatable Trait Definition

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/blog.md

Defines the `Animatable` trait, which is crucial for making custom types compatible with the animation system. It specifies methods for zero value, epsilon, magnitude, scaling, addition, subtraction, and interpolation, ensuring type safety and flexibility.

```rust
pub trait Animatable: 'static + Copy + Send + Sync {
    fn zero() -> Self;
    fn epsilon() -> f32;
    fn magnitude(&self) -> f32;
    fn scale(&self, factor: f32) -> Self;
    fn add(&self, other: &Self) -> Self;
    fn sub(&self, other: &Self) -> Self;
    fn interpolate(&self, target: &Self, t: f32) -> Self;
}
```

--------------------------------

### Rust Interpolation for Circular Values

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Provides an implementation for interpolating circular values, such as angles. It calculates the difference between target and current values and adjusts it to ensure the shortest path interpolation, preventing jumps across the 0/2π boundary.

```rust
fn interpolate(&self, target: &Self, t: f32) -> Self {
    let mut diff = target.angle - self.angle;
    // Ensure shortest path
    if diff > PI { diff -= 2.0 * PI; }
    if diff < -PI { diff += 2.0 * PI; }
    Self { angle: self.angle + diff * t }
}
```

--------------------------------

### Rust Position Struct and Animatable Implementation

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Defines a custom `Position` struct with `f32` coordinates and implements standard Rust operator traits for arithmetic operations. It also includes an implementation of the `Animatable` trait with `interpolate` and `magnitude` methods for animation purposes.

```rust
#[derive(Debug, Copy, Clone)]
struct Position {
    x: f32,
    y: f32,
}

#[derive(Debug, Copy, Clone, PartialEq, Default)]
struct Position {
    x: f32,
    y: f32,
}

// Implement standard Rust operator traits
impl std::ops::Add for Position {
    type Output = Self;
    fn add(self, other: Self) -> Self {
        Self { x: self.x + other.x, y: self.y + other.y }
    }
}

impl std::ops::Sub for Position {
    type Output = Self;
    fn sub(self, other: Self) -> Self {
        Self { x: self.x - other.x, y: self.y - other.y }
    }
}

impl std::ops::Mul<f32> for Position {
    type Output = Self;
    fn mul(self, factor: f32) -> Self {
        Self { x: self.x * factor, y: self.y * factor }
    }
}

// Implement Animatable with just two methods!
impl Animatable for Position {
    fn interpolate(&self, target: &Self, t: f32) -> Self {
        *self + (*target - *self) * t
    }
    
    fn magnitude(&self) -> f32 {
        (self.x * self.x + self.y * self.y).sqrt()
    }
}
```

--------------------------------

### Dioxus Motion Animatable Trait Definition

Source: https://github.com/wheregmis/dioxus-motion.git/blob/main/README.md

Presents the definition of the Animatable trait, which is required for custom types to be animated by Dioxus Motion.

```APIDOC
pub trait Animatable:
    Copy + 'static + Default +
    std::ops::Add<Output = Self> +
    std::ops::Sub<Output = Self> +
    std::ops::Mul<f32, Output = Self>
{
    fn interpolate(&self, target: &Self, t: f32) -> Self;
    fn magnitude(&self) -> f32;
    fn epsilon() -> f32 { 0.01 } // Default implementation
}

```
Tokens:
Raw