add app

app/src-tauri/src/animation/mod.rs

@@ -0,0 +1,2 @@
+pub mod primitives;
+pub mod timeline;

app/src-tauri/src/animation/primitives/circular_text.rs

@@ -0,0 +1,36 @@
+impl Animateable for AnimatedCircularText<'_> {
+    fn draw(&mut self, mut canvas: &mut Canvas, timeline: &Timeline<'_>) {
+        self.prepare(&mut canvas, &self.animation_data);
+
+        self.sort_keyframes();
+
+        self.paint.set_anti_alias(true);
+
+        let default_text_typeface = &Typeface::default();
+
+        let default_text_font = &Font::from_typeface(default_text_typeface, 190.0);
+
+        let text_font: &Font = match self.font {
+            Some(font) => font,
+            None => default_text_font,
+        };
+
+        let radius: f32 = 0.35 * timeline.size.0.min(timeline.size.1) as f32;
+
+        let mut path = Path::new();
+
+        path.add_circle(
+            (timeline.size.0 / 2, timeline.size.1 / 2),
+            radius,
+            PathDirection::CW,
+        );
+
+        let text_width = text_font.measure_str(self.text, Some(&self.paint));
+
+        canvas.draw
+    }
+
+    fn sort_keyframes(&mut self) {
+        self.origin.sort_keyframes();
+    }
+}

app/src-tauri/src/animation/primitives/entities.rs

@@ -0,0 +1,241 @@
+use serde::{Deserialize, Serialize};
+
+use crate::animation::timeline::Timeline;
+
+use super::{
+    paint::{Paint, TextPaint},
+    utils::timestamp_to_frame,
+    values::{AnimatedFloatVec2, AnimatedValue},
+};
+
+//#region Animateable Objects
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(tag = "type")]
+pub enum AnimatedEntity {
+    Text(AnimatedTextEntity),
+    Ellipse(AnimatedEllipseEntity),
+    Box(AnimatedBoxEntity),
+}
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(tag = "type")]
+pub enum Entity {
+    Text(TextEntity),
+    Ellipse(EllipseEntity),
+    Box(BoxEntity),
+}
+
+impl AnimatedEntity {
+    pub fn calculate(&mut self, timeline: &Timeline) -> Option<Entity> {
+        match self {
+            Self::Text(text_entity) => text_entity.calculate(timeline),
+            Self::Box(box_entity) => box_entity.calculate(timeline),
+            Self::Ellipse(ellipse_entity) => ellipse_entity.calculate(timeline),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct AnimatedTextEntity {
+    pub text: String,
+    pub origin: AnimatedFloatVec2,
+    pub paint: TextPaint,
+    pub animation_data: AnimationData,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct TextEntity {
+    pub text: String,
+    pub origin: (f32, f32),
+    pub paint: TextPaint,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct AnimatedBoxEntity {
+    pub position: AnimatedFloatVec2,
+    pub size: AnimatedFloatVec2,
+    pub origin: AnimatedFloatVec2,
+    pub paint: Paint,
+    pub animation_data: AnimationData,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct BoxEntity {
+    pub position: (f32, f32),
+    pub size: (f32, f32),
+    pub origin: (f32, f32),
+    pub paint: Paint,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct AnimatedEllipseEntity {
+    pub paint: Paint,
+    pub radius: AnimatedFloatVec2,
+    pub origin: AnimatedFloatVec2,
+    pub position: AnimatedFloatVec2,
+    pub animation_data: AnimationData,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct EllipseEntity {
+    pub radius: (f32, f32),
+    pub position: (f32, f32),
+    pub origin: (f32, f32),
+    pub paint: Paint,
+}
+
+pub trait Animateable {
+    fn sort_keyframes(&mut self);
+
+    fn calculate(&mut self, timeline: &Timeline) -> Option<Entity>;
+
+    // Checks if the Box is visible and should be drawn
+    fn should_draw(&self, animation_data: &AnimationData, timeline: &Timeline) -> bool {
+        let start_frame = timestamp_to_frame(animation_data.offset, timeline.fps);
+        let end_frame = timestamp_to_frame(
+            animation_data.offset + animation_data.duration,
+            timeline.fps,
+        );
+
+        // println!("start {0} end {1}", start_frame, end_frame);
+
+        let is_before = timeline.render_state.curr_frame < start_frame;
+        let is_after = timeline.render_state.curr_frame > end_frame;
+        let is_between = !is_after && !is_before;
+
+        if is_between {
+            return true;
+        } else {
+            return false;
+        }
+    }
+}
+
+impl AnimatedTextEntity {
+    fn into_static(&mut self, timeline: &Timeline) -> TextEntity {
+        self.sort_keyframes();
+
+        let origin = self.origin.get_value_at_frame(
+            timeline.render_state.curr_frame,
+            &self.animation_data,
+            timeline.fps,
+        );
+
+        TextEntity {
+            text: self.text.clone(),
+            origin,
+            paint: self.paint.clone(),
+        }
+    }
+}
+
+impl Animateable for AnimatedTextEntity {
+    fn calculate(&mut self, timeline: &Timeline) -> Option<Entity> {
+        let should_draw = self.should_draw(&self.animation_data, timeline);
+
+        if should_draw {
+            self.sort_keyframes();
+
+            Some(Entity::Text(self.into_static(timeline)))
+        } else {
+            None
+        }
+    }
+
+    fn sort_keyframes(&mut self) {
+        self.origin.sort_keyframes();
+    }
+}
+
+impl Animateable for AnimatedBoxEntity {
+    fn sort_keyframes(&mut self) {
+        self.position.sort_keyframes();
+        self.size.sort_keyframes();
+    }
+
+    fn calculate(&mut self, timeline: &Timeline) -> Option<Entity> {
+        let should_draw = self.should_draw(&self.animation_data, timeline);
+
+        if should_draw {
+            self.sort_keyframes();
+
+            let position = self.position.get_value_at_frame(
+                timeline.render_state.curr_frame,
+                &self.animation_data,
+                timeline.fps,
+            );
+
+            let size = self.size.get_value_at_frame(
+                timeline.render_state.curr_frame,
+                &self.animation_data,
+                timeline.fps,
+            );
+
+            let origin = self.origin.get_value_at_frame(
+                timeline.render_state.curr_frame,
+                &self.animation_data,
+                timeline.fps,
+            );
+
+            Some(Entity::Box(BoxEntity {
+                position,
+                size,
+                origin,
+                paint: self.paint.clone(),
+            }))
+        } else {
+            None
+        }
+    }
+}
+
+impl Animateable for AnimatedEllipseEntity {
+    fn calculate(&mut self, timeline: &Timeline) -> Option<Entity> {
+        let should_draw = self.should_draw(&self.animation_data, timeline);
+
+        if should_draw {
+            self.sort_keyframes();
+
+            let radius = self.radius.get_value_at_frame(
+                timeline.render_state.curr_frame,
+                &self.animation_data,
+                timeline.fps,
+            );
+
+            let position = self.position.get_value_at_frame(
+                timeline.render_state.curr_frame,
+                &self.animation_data,
+                timeline.fps,
+            );
+
+            let origin = self.origin.get_value_at_frame(
+                timeline.render_state.curr_frame,
+                &self.animation_data,
+                timeline.fps,
+            );
+
+            Some(Entity::Ellipse(EllipseEntity {
+                radius,
+                position,
+                origin,
+                paint: self.paint.clone(),
+            }))
+        } else {
+            None
+        }
+    }
+
+    fn sort_keyframes(&mut self) {
+        self.position.sort_keyframes();
+        self.radius.sort_keyframes();
+    }
+}
+
+//#endregion
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct AnimationData {
+    pub offset: f32,
+    pub duration: f32,
+    pub visible: bool,
+}

app/src-tauri/src/animation/primitives/interpolations.rs

@@ -0,0 +1,170 @@
+use std::cmp::Ordering;
+
+use super::keyframe::RenderedKeyframe;
+use serde::{Deserialize, Serialize};
+use simple_easing::{
+    circ_in, circ_in_out, circ_out, cubic_in, cubic_in_out, cubic_out, expo_in, expo_in_out,
+    expo_out, quad_in, quad_in_out, quad_out, quart_in, quart_in_out, quart_out, quint_in,
+    quint_in_out, quint_out,
+};
+
+#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
+pub struct SpringProperties {
+    pub mass: f32,
+    pub damping: f32,
+    pub stiffness: f32,
+}
+
+#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
+pub struct SpringState {
+    pub velocity: f32,
+    pub last_val: f32,
+}
+
+#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
+#[serde(tag = "easing_function")]
+pub enum EasingFunction {
+    QuintOut,
+    QuintIn,
+    QuintInOut,
+    CircOut,
+    CircIn,
+    CircInOut,
+    CubicOut,
+    CubicIn,
+    CubicInOut,
+    ExpoOut,
+    ExpoIn,
+    ExpoInOut,
+    QuadOut,
+    QuadIn,
+    QuadInOut,
+    QuartOut,
+    QuartIn,
+    QuartInOut,
+}
+
+impl EasingFunction {
+    fn ease(self: &Self, t: f32) -> f32 {
+        match self {
+            EasingFunction::QuintOut => quint_out(t),
+            EasingFunction::QuintIn => quint_in(t),
+            EasingFunction::QuintInOut => quint_in_out(t),
+            EasingFunction::CircOut => circ_out(t),
+            EasingFunction::CircIn => circ_in(t),
+            EasingFunction::CircInOut => circ_in_out(t),
+            EasingFunction::CubicOut => cubic_out(t),
+            EasingFunction::CubicIn => cubic_in(t),
+            EasingFunction::CubicInOut => cubic_in_out(t),
+            EasingFunction::ExpoOut => expo_out(t),
+            EasingFunction::ExpoIn => expo_in(t),
+            EasingFunction::ExpoInOut => expo_in_out(t),
+            EasingFunction::QuadOut => quad_out(t),
+            EasingFunction::QuadIn => quad_in(t),
+            EasingFunction::QuadInOut => quad_in_out(t),
+            EasingFunction::QuartOut => quart_out(t),
+            EasingFunction::QuartIn => quart_in(t),
+            EasingFunction::QuartInOut => quart_in_out(t),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy, Serialize, Deserialize)]
+#[serde(tag = "type")]
+pub enum InterpolationType {
+    Linear,
+    Spring(SpringProperties),
+    EasingFunction(EasingFunction),
+}
+
+pub fn calculate_spring_value(
+    curr_frame: i32,
+    start_value: f32,
+    target_value: f32,
+    start_frame: i32,
+    _end_frame: i32,
+    spring_props: &SpringProperties,
+) -> f32 {
+    const PRECISION: f32 = 0.01;
+    const STEP: f32 = 10.0;
+    const REST_VELOCITY: f32 = PRECISION / 10.0;
+
+    let _is_growing = match start_value.total_cmp(&target_value) {
+        Ordering::Equal => false,
+        Ordering::Less => false,
+        Ordering::Greater => true,
+    };
+
+    let mut _is_moving = false;
+    let mut spring_state = SpringState {
+        last_val: start_value,
+        velocity: 0.0,
+    };
+
+    let mut position = start_value;
+    let relative_curr_frame = curr_frame - start_frame;
+
+    //  println!("target_value {target_value} start_value {start_value}");
+    //  println!("start_frame {start_frame} end_frame {end_frame}");
+
+    for _ in 0..relative_curr_frame {
+        let _is_moving = spring_state.velocity.abs() > REST_VELOCITY;
+
+        let spring_force = -spring_props.stiffness * 0.000001 * (position - target_value);
+        let damping_force = -spring_props.damping * 0.001 * spring_state.velocity;
+        let acceleration = (spring_force + damping_force) / spring_props.mass; // pt/ms^2
+
+        spring_state.velocity = spring_state.velocity + acceleration * STEP; // pt/ms
+        position = position + spring_state.velocity * STEP;
+        //       println!("{position}")
+    }
+
+    position
+}
+
+pub fn interpolate_rendered_keyframes(
+    first_ren_keyframe: &RenderedKeyframe,
+    second_ren_keyframe: &RenderedKeyframe,
+    curr_frame: i32,
+    interpolation_type: InterpolationType,
+    _fps: i16,
+) -> f32 {
+    let frame_range = second_ren_keyframe.absolute_frame - first_ren_keyframe.absolute_frame;
+    let position_in_range = curr_frame - first_ren_keyframe.absolute_frame;
+    let progress: f32 = (1.0 / frame_range as f32) * position_in_range as f32;
+
+    /*     println!(
+        "Progress:{0} Frame_Range: {1} Position_In_Range: {2}",
+        progress, frame_range, position_in_range
+    ); */
+
+    let value_diff = second_ren_keyframe.keyframe.value - first_ren_keyframe.keyframe.value;
+
+    match interpolation_type {
+        InterpolationType::Linear => {
+            let interpolated_val =
+                first_ren_keyframe.keyframe.value + (value_diff * progress as f32);
+
+            return interpolated_val;
+        }
+        InterpolationType::EasingFunction(easing_function) => {
+            let eased_progress = easing_function.ease(progress);
+
+            let interpolated_val =
+                first_ren_keyframe.keyframe.value + (value_diff * eased_progress as f32);
+
+            return interpolated_val;
+        }
+        InterpolationType::Spring(spring_properties) => {
+            let interpolated_value = calculate_spring_value(
+                curr_frame,
+                first_ren_keyframe.keyframe.value,
+                second_ren_keyframe.keyframe.value,
+                first_ren_keyframe.absolute_frame,
+                second_ren_keyframe.absolute_frame,
+                &spring_properties,
+            );
+            return interpolated_value;
+        }
+    };
+}

app/src-tauri/src/animation/primitives/keyframe.rs

@@ -0,0 +1,140 @@
+use std::cmp::Ordering;
+
+use serde::{Deserialize, Serialize};
+
+use super::{
+    entities::AnimationData,
+    interpolations::{interpolate_rendered_keyframes, InterpolationType},
+    utils::render_keyframe,
+};
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct Keyframe {
+    pub value: f32,
+    pub offset: f32,
+    pub interpolation: Option<InterpolationType>,
+}
+
+#[derive(Debug, Clone)]
+pub struct RenderedKeyframe {
+    pub absolute_frame: i32,
+    pub keyframe: Keyframe,
+    pub index: usize,
+    pub distance_from_curr: i32,
+    pub abs_distance_from_curr: i32,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Keyframes {
+    pub values: Vec<Keyframe>,
+}
+
+impl Keyframes {
+    pub fn get_value_at_frame(
+        &self,
+        curr_frame: i32,
+        animation_data: &AnimationData,
+        fps: i16,
+    ) -> f32 {
+        let keyframe_count = self.values.len();
+
+        if keyframe_count > 0 {
+            let mut rendered_keyframes: Vec<RenderedKeyframe> = self
+                .values
+                .to_vec()
+                .into_iter()
+                .enumerate()
+                .map(|(index, keyframe)| {
+                    render_keyframe(keyframe, animation_data, index, curr_frame, fps)
+                })
+                .collect();
+
+            rendered_keyframes
+                .sort_by(|a, b| a.abs_distance_from_curr.cmp(&b.abs_distance_from_curr));
+
+            let closest_keyframe = rendered_keyframes.get(0).unwrap();
+
+            let result = match (closest_keyframe.distance_from_curr).cmp(&0) {
+                Ordering::Equal => closest_keyframe.keyframe.value,
+                Ordering::Greater => {
+                    if closest_keyframe.absolute_frame == curr_frame {
+                        return closest_keyframe.keyframe.value;
+                    } else {
+                        let previous_keyframe =
+                            rendered_keyframes.to_vec().into_iter().find(|keyframe| {
+                                if closest_keyframe.index > 0 {
+                                    keyframe.index == closest_keyframe.index - 1
+                                } else {
+                                    false
+                                }
+                            });
+
+                        if let Some(previous_keyframe) = previous_keyframe {
+                            let interpolation = match previous_keyframe.keyframe.interpolation {
+                                Some(val) => val,
+                                None => InterpolationType::Linear,
+                            };
+
+                            let interpolated_value = interpolate_rendered_keyframes(
+                                &previous_keyframe,
+                                closest_keyframe,
+                                curr_frame,
+                                interpolation,
+                                fps,
+                            );
+
+                            return interpolated_value;
+                        } else {
+                            if closest_keyframe.absolute_frame > curr_frame {
+                                return closest_keyframe.keyframe.value;
+                            } else {
+                                return 0.0;
+                            }
+                        }
+                    }
+                }
+                Ordering::Less => {
+                    if closest_keyframe.absolute_frame == curr_frame {
+                        return closest_keyframe.keyframe.value;
+                    } else {
+                        let next_keyframe = rendered_keyframes
+                            .to_vec()
+                            .into_iter()
+                            .find(|keyframe| keyframe.index == closest_keyframe.index + 1);
+
+                        if let Some(next_keyframe) = next_keyframe {
+                            let interpolation = match closest_keyframe.keyframe.interpolation {
+                                Some(val) => val,
+                                None => InterpolationType::Linear,
+                            };
+
+                            let interpolated_value = interpolate_rendered_keyframes(
+                                closest_keyframe,
+                                &next_keyframe,
+                                curr_frame,
+                                interpolation,
+                                fps,
+                            );
+
+                            return interpolated_value;
+                        } else {
+                            if closest_keyframe.absolute_frame < curr_frame {
+                                return closest_keyframe.keyframe.value;
+                            } else {
+                                return 0.0;
+                            }
+                        }
+                    }
+                }
+            };
+
+            result
+        } else {
+            0.0
+        }
+    }
+
+    pub fn sort(&mut self) {
+        self.values.sort_by(|a, b| a.offset.total_cmp(&b.offset));
+    }
+}

app/src-tauri/src/animation/primitives/mod.rs

@@ -0,0 +1,7 @@
+pub mod entities;
+pub mod interpolations;
+pub mod keyframe;
+pub mod paint;
+pub mod tests;
+pub mod utils;
+pub mod values;

app/src-tauri/src/animation/primitives/paint.rs

@@ -0,0 +1,69 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct Color {
+    value: (u8, u8, u8, f32),
+}
+
+impl Color {
+    pub fn new(red: u8, green: u8, blue: u8, alpha: f32) -> Color {
+        Color {
+            value: (red, green, blue, alpha),
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+#[serde(tag = "type")]
+pub enum PaintStyle {
+    Fill(FillStyle),
+    Stroke(StrokeStyle),
+    StrokeAndFill(StrokeAndFillStyle),
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct Paint {
+    pub style: PaintStyle,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct TextPaint {
+    pub style: PaintStyle,
+    pub align: TextAlign,
+    pub size: f32,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct StrokeStyle {
+    pub color: Color,
+    pub width: f32,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct StrokeAndFillStyle {
+    pub stroke: StrokeStyle,
+    pub fill: FillStyle,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct FillStyle {
+    pub color: Color,
+}
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub enum TextAlign {
+    Left,
+    Center,
+    Right,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct FontDefinition {
+    pub family_name: String,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct Font {
+    pub glyph_count: i32,
+    pub weight: i32,
+    pub style: String,
+}

app/src-tauri/src/animation/primitives/tests.rs

@@ -0,0 +1,175 @@
+#[cfg(test)]
+use crate::animation::primitives::{
+    entities::AnimationData,
+    interpolations::{calculate_spring_value, SpringProperties},
+    keyframe::{Keyframe, Keyframes},
+    utils::timestamp_to_frame,
+};
+
+#[test]
+fn interpolates_the_input() {
+    use crate::animation::primitives::{
+        interpolations::{interpolate_rendered_keyframes, InterpolationType},
+        keyframe::{Keyframe, Keyframes, RenderedKeyframe},
+        utils::render_keyframe,
+    };
+
+    let animation_data = AnimationData {
+        offset: 0.0,
+        duration: 3.0,
+        visible: true,
+    };
+
+    let fps = 60;
+
+    let keyframes1 = Keyframes {
+        values: vec![
+            Keyframe {
+                value: 0.0,
+                offset: 0.0,
+                interpolation: None,
+            },
+            Keyframe {
+                value: 100.0,
+                offset: 1.0,
+                interpolation: None,
+            },
+            Keyframe {
+                value: 300.0,
+                offset: 3.0,
+                interpolation: None,
+            },
+        ],
+    };
+
+    let keyframes2 = Keyframes {
+        values: vec![
+            Keyframe {
+                value: -100.0,
+                offset: 0.0,
+                interpolation: None,
+            },
+            Keyframe {
+                value: 0.0,
+                offset: 1.0,
+                interpolation: None,
+            },
+        ],
+    };
+
+    let rendered_keyframes1: Vec<RenderedKeyframe> = keyframes1
+        .values
+        .into_iter()
+        .enumerate()
+        .map(|(index, keyframe)| {
+            let rendered_keyframe = render_keyframe(keyframe, &animation_data, index, 120, 60);
+            rendered_keyframe
+        })
+        .collect();
+
+    let rendered_keyframes2: Vec<RenderedKeyframe> = keyframes2
+        .values
+        .into_iter()
+        .enumerate()
+        .map(|(index, keyframe)| {
+            let rendered_keyframe = render_keyframe(keyframe, &animation_data, index, 120, 60);
+            rendered_keyframe
+        })
+        .collect();
+
+    let val1 = interpolate_rendered_keyframes(
+        rendered_keyframes1.get(1).unwrap(),
+        rendered_keyframes1.get(2).unwrap(),
+        120,
+        InterpolationType::Linear,
+        fps,
+    );
+
+    let _val2 = interpolate_rendered_keyframes(
+        rendered_keyframes2.get(0).unwrap(),
+        rendered_keyframes2.get(1).unwrap(),
+        30,
+        InterpolationType::Linear,
+        fps,
+    );
+
+    assert_eq!(val1, 200.0);
+    //println!("{0}", val2);
+}
+
+#[test]
+fn calculates_the_spring_value() {
+    let _fps = 60;
+    let previous_value = 0.0;
+    let next_value = 500.0;
+
+    let mut spring_props = SpringProperties {
+        mass: 1.0,        // Mass of the object attached to the spring
+        stiffness: 100.0, // Stiffness of the spring
+        damping: 10.0,    // Damping factor of the spring
+    };
+
+    let value1 =
+        calculate_spring_value(100, previous_value, next_value, 100, 300, &mut spring_props);
+    let value2 =
+        calculate_spring_value(150, previous_value, next_value, 100, 300, &mut spring_props);
+    let value3 =
+        calculate_spring_value(200, previous_value, next_value, 100, 300, &mut spring_props);
+
+    println!("{value1}");
+    println!("{value2}");
+    println!("{value3}");
+}
+
+#[test]
+fn converts_timestamp_to_frame() {
+    let frame1 = timestamp_to_frame(0.0, 60);
+    let frame2 = timestamp_to_frame(1.0, 60);
+    let frame3 = timestamp_to_frame(1.5, 60);
+
+    assert_eq!(frame1, 0);
+    assert_eq!(frame2, 60);
+    assert_eq!(frame3, 90);
+}
+
+#[test]
+fn gets_value_at_frame() {
+    let animation_data = AnimationData {
+        offset: 0.0,
+        duration: 5.0,
+        visible: true,
+    };
+
+    let fps = 60;
+
+    let keyframes = Keyframes {
+        values: vec![
+            Keyframe {
+                value: 0.0,
+                offset: 0.0,
+                interpolation: None,
+            },
+            Keyframe {
+                value: 100.0,
+                offset: 1.0,
+                interpolation: None,
+            },
+            Keyframe {
+                value: 300.0,
+                offset: 3.0,
+                interpolation: None,
+            },
+        ],
+    };
+
+    let value1 = keyframes.get_value_at_frame(50, &animation_data, fps);
+    let value2 = keyframes.get_value_at_frame(90, &animation_data, fps);
+    let value3 = keyframes.get_value_at_frame(120, &animation_data, fps);
+    let value4 = keyframes.get_value_at_frame(180, &animation_data, fps);
+    let value5 = keyframes.get_value_at_frame(220, &animation_data, fps);
+    println!("value1: {0}", value1);
+    println!("value2: {0}", value2);
+    println!("value3: {0}", value3);
+    println!("value4: {0}", value4);
+    println!("value5: {0}", value5);
+}

app/src-tauri/src/animation/primitives/utils.rs

@@ -0,0 +1,29 @@
+use super::{
+    entities::AnimationData,
+    keyframe::{Keyframe, RenderedKeyframe},
+};
+
+pub fn timestamp_to_frame(timestamp: f32, fps: i16) -> i32 {
+    return (timestamp * fps as f32).round() as i32;
+}
+
+pub fn render_keyframe(
+    keyframe: Keyframe,
+    animation_data: &AnimationData,
+    index: usize,
+    curr_frame: i32,
+    fps: i16,
+) -> RenderedKeyframe {
+    let animation_start_frame = timestamp_to_frame(animation_data.offset, fps);
+    let frame_offset = timestamp_to_frame(keyframe.offset, fps);
+    let absolute_frame = animation_start_frame + frame_offset;
+    let distance_from_curr = absolute_frame - curr_frame;
+
+    RenderedKeyframe {
+        absolute_frame,
+        keyframe,
+        index,
+        distance_from_curr,
+        abs_distance_from_curr: distance_from_curr.abs(),
+    }
+}

app/src-tauri/src/animation/primitives/values.rs

@@ -0,0 +1,79 @@
+use serde::{Deserialize, Serialize};
+
+use super::{
+    entities::AnimationData,
+    keyframe::{Keyframe, Keyframes},
+};
+
+pub trait AnimatedValue<T> {
+    fn sort_keyframes(&mut self);
+    fn get_value_at_frame(&self, curr_frame: i32, animation_data: &AnimationData, fps: i16) -> T;
+}
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct AnimatedFloat {
+    pub keyframes: Keyframes,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct AnimatedFloatVec2 {
+    pub keyframes: (AnimatedFloat, AnimatedFloat),
+}
+
+impl AnimatedFloat {
+    pub fn new(val: f32) -> AnimatedFloat {
+        AnimatedFloat {
+            keyframes: Keyframes {
+                values: vec![Keyframe {
+                    value: val,
+                    offset: 0.0,
+                    interpolation: None,
+                }],
+            },
+        }
+    }
+}
+
+impl AnimatedFloatVec2 {
+    pub fn new(x: f32, y: f32) -> AnimatedFloatVec2 {
+        AnimatedFloatVec2 {
+            keyframes: (AnimatedFloat::new(x), AnimatedFloat::new(y)),
+        }
+    }
+}
+
+impl AnimatedValue<f32> for AnimatedFloat {
+    fn sort_keyframes(&mut self) {
+        self.keyframes.sort();
+    }
+
+    fn get_value_at_frame(&self, curr_frame: i32, animation_data: &AnimationData, fps: i16) -> f32 {
+        self.keyframes
+            .get_value_at_frame(curr_frame, &animation_data, fps)
+    }
+}
+
+impl AnimatedValue<(f32, f32)> for AnimatedFloatVec2 {
+    fn sort_keyframes(&mut self) {
+        self.keyframes.0.sort_keyframes();
+        self.keyframes.1.sort_keyframes();
+    }
+
+    fn get_value_at_frame(
+        &self,
+        curr_frame: i32,
+        animation_data: &AnimationData,
+        fps: i16,
+    ) -> (f32, f32) {
+        let x = self
+            .keyframes
+            .0
+            .get_value_at_frame(curr_frame, animation_data, fps);
+
+        let y = self
+            .keyframes
+            .1
+            .get_value_at_frame(curr_frame, animation_data, fps);
+
+        return (x, y);
+    }
+}

app/src-tauri/src/animation/timeline.rs

@@ -0,0 +1,262 @@
+use crate::animation::primitives::{
+    entities::{AnimatedBoxEntity, AnimatedEntity, AnimatedTextEntity, AnimationData},
+    interpolations::{EasingFunction, InterpolationType, SpringProperties},
+    keyframe::{Keyframe, Keyframes},
+};
+use rayon::prelude::*;
+use serde::{Deserialize, Serialize};
+
+use super::primitives::{
+    entities::Entity,
+    paint::{Color, FillStyle, Paint, PaintStyle, StrokeStyle, TextAlign, TextPaint},
+    values::{AnimatedFloat, AnimatedFloatVec2},
+};
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub struct Input {
+    pub title: String,
+    pub sub_title: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Timeline {
+    entities: Vec<AnimatedEntity>,
+    pub render_state: RenderState,
+    pub duration: f32,
+    pub fps: i16,
+    pub size: (i32, i32),
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct RenderState {
+    pub curr_frame: i32,
+}
+
+impl Timeline {
+    fn calculate(&self) -> Vec<Entity> {
+        let mut entities = self.entities.clone();
+
+        let entities = entities
+            .par_iter_mut()
+            .map(|entity| entity.calculate(self))
+            .filter(|entity| entity.is_some())
+            .map(|entity| entity.unwrap())
+            .collect();
+
+        return entities;
+    }
+}
+
+fn build_bg(offset: f32, paint: Paint, size: (i32, i32)) -> AnimatedBoxEntity {
+    let bg_box = AnimatedBoxEntity {
+        paint,
+        animation_data: AnimationData {
+            offset: 0.0 + offset,
+            duration: 5.0,
+            visible: true,
+        },
+        origin: AnimatedFloatVec2::new(1280.0 / 2.0, 720.0 / 2.0),
+        position: AnimatedFloatVec2 {
+            keyframes: (
+                AnimatedFloat {
+                    keyframes: Keyframes {
+                        values: vec![
+                            Keyframe {
+                                value: (size.0 * -1) as f32,
+                                offset: 0.0,
+                                interpolation: Some(InterpolationType::EasingFunction(
+                                    EasingFunction::QuintOut,
+                                )),
+                            },
+                            Keyframe {
+                                value: 0.0,
+                                offset: 5.0,
+                                interpolation: None,
+                            },
+                        ],
+                    },
+                },
+                AnimatedFloat {
+                    keyframes: Keyframes {
+                        values: vec![Keyframe {
+                            value: 0.0,
+                            offset: 0.0,
+                            interpolation: None,
+                        }],
+                    },
+                },
+            ),
+        },
+        size: AnimatedFloatVec2 {
+            keyframes: (
+                AnimatedFloat {
+                    keyframes: Keyframes {
+                        values: vec![Keyframe {
+                            interpolation: None,
+                            value: size.0 as f32,
+                            offset: 0.0,
+                        }],
+                    },
+                },
+                AnimatedFloat {
+                    keyframes: Keyframes {
+                        values: vec![Keyframe {
+                            value: size.1 as f32,
+                            offset: 0.0,
+                            interpolation: None,
+                        }],
+                    },
+                },
+            ),
+        },
+    };
+    return bg_box;
+}
+
+#[tauri::command]
+pub fn calculate_timeline_entities_at_frame(timeline: Timeline) -> Vec<Entity> {
+    timeline.calculate()
+}
+
+pub fn test_timeline_entities_at_frame(
+    render_state: RenderState,
+    size: (i32, i32),
+    input: Input,
+) -> Vec<Entity> {
+    let box1_paint = Paint {
+        style: PaintStyle::Fill(FillStyle {
+            color: Color::new(34, 189, 58, 1.0),
+        }),
+    };
+
+    let box2_paint = Paint {
+        style: PaintStyle::Fill(FillStyle {
+            color: Color::new(23, 178, 28, 1.0),
+        }),
+    };
+
+    let box3_paint = Paint {
+        style: PaintStyle::Fill(FillStyle {
+            color: Color::new(43, 128, 98, 1.0),
+        }),
+    };
+
+    let title_paint = TextPaint {
+        style: PaintStyle::Stroke(StrokeStyle {
+            color: Color::new(0, 0, 0, 1.0),
+            width: 10.0,
+        }),
+        align: TextAlign::Center,
+        size: 20.0,
+    };
+
+    let sub_title_paint = TextPaint {
+        style: PaintStyle::Fill(FillStyle {
+            color: Color::new(0, 0, 0, 1.0),
+        }),
+        align: TextAlign::Center,
+        size: 10.0,
+    };
+
+    let timeline = Timeline {
+        fps: 60,
+        duration: 5.0,
+        size,
+        entities: vec![
+            AnimatedEntity::Box(build_bg(0.0, box1_paint, size)),
+            AnimatedEntity::Box(build_bg(0.5, box2_paint, size)),
+            AnimatedEntity::Box(build_bg(1.0, box3_paint, size)),
+            AnimatedEntity::Text(AnimatedTextEntity {
+                paint: title_paint,
+                text: input.title,
+                animation_data: AnimationData {
+                    offset: 0.0,
+                    duration: 6.0,
+                    visible: true,
+                },
+                origin: AnimatedFloatVec2 {
+                    keyframes: (
+                        AnimatedFloat {
+                            keyframes: Keyframes {
+                                values: vec![
+                                    Keyframe {
+                                        value: 0.0,
+                                        offset: 0.0,
+                                        interpolation: Some(InterpolationType::Spring(
+                                            SpringProperties {
+                                                mass: 1.0,
+                                                damping: 20.0,
+                                                stiffness: 200.0,
+                                            },
+                                        )),
+                                    },
+                                    Keyframe {
+                                        value: (size.0 / 2) as f32,
+                                        offset: 2.0,
+                                        interpolation: None,
+                                    },
+                                ],
+                            },
+                        },
+                        AnimatedFloat {
+                            keyframes: Keyframes {
+                                values: vec![Keyframe {
+                                    value: (size.1 / 2) as f32,
+                                    offset: 0.0,
+                                    interpolation: None,
+                                }],
+                            },
+                        },
+                    ),
+                },
+            }),
+            AnimatedEntity::Text(AnimatedTextEntity {
+                paint: sub_title_paint,
+                text: input.sub_title,
+                animation_data: AnimationData {
+                    offset: 0.5,
+                    duration: 6.0,
+                    visible: true,
+                },
+                origin: AnimatedFloatVec2 {
+                    keyframes: (
+                        AnimatedFloat {
+                            keyframes: Keyframes {
+                                values: vec![
+                                    Keyframe {
+                                        value: 0.0,
+                                        offset: 0.0,
+                                        interpolation: Some(InterpolationType::Spring(
+                                            SpringProperties {
+                                                mass: 1.0,
+                                                damping: 20.0,
+                                                stiffness: 200.0,
+                                            },
+                                        )),
+                                    },
+                                    Keyframe {
+                                        value: (size.0 / 2) as f32,
+                                        offset: 2.0,
+                                        interpolation: None,
+                                    },
+                                ],
+                            },
+                        },
+                        AnimatedFloat {
+                            keyframes: Keyframes {
+                                values: vec![Keyframe {
+                                    value: ((size.1 / 2) as f32) + 80.0,
+                                    offset: 0.0,
+                                    interpolation: None,
+                                }],
+                            },
+                        },
+                    ),
+                },
+            }),
+        ],
+        render_state: render_state,
+    };
+
+    timeline.calculate()
+}