文档 | 演示

创建派生信号，该信号是原始信号的动画版本

use leptos::*;
use leptos_animation::*;

#[component]
pub fn Counter() -> impl IntoView {
    AnimationContext::provide();

    let (value, set_value) = create_signal(0.0);

    let animated_value = create_animated_signal(move || value.get().into(), tween_default);

    let clear = move |_| set_value.set(0.0);
    let decrement = move |_| set_value.update(|value| *value -= 1.0);
    let increment = move |_| set_value.update(|value| *value += 1.0);

    view! {
        <main class="simple">
            <button on:click=clear>"Clear"</button>
            <button on:click=decrement>"-1"</button>
            <button on:click=increment>"+1"</button>
            <div>"Value: " {value} <br/> "Animated value: " {animated_value}</div>
        </main>
    }
}

功能

• 允许多个动画同时播放
• 高效调用 window.request_animation_frame()：只有当有动画播放时，并且每帧只调用一次，即使有多个动画信号正在运行。
• 允许自定义持续时间、缓动函数、目标更新和缓动方法。可以用于任何类型。
• 动画信号每帧同时更新。使用多个动画信号的特效每帧只调用一次。