Simple-ish text typing animation

bin/text-inspect.rs

@@ -1,3 +1,5 @@
+use std::time::Duration;
+
 use bevy::{diagnostic::FrameTimeDiagnosticsPlugin, prelude::*};
 
 const LOREM: [&str; 5] = [
@@ -24,7 +26,6 @@ fn main() {
         .add_system(update)
         .add_system(mouse_cursor)
         .add_system(play)
-        .add_system(framerate)
         .run();
 }
 
@@ -92,13 +93,13 @@ fn init_ui(mut commands: Commands) {
                 TextBundle::from_sections(LOREM.iter().map(|&section| TextSection {
                     value: section.into(),
                     style: TextStyle {
-                        font_size: 50.0,
+                        font_size: 20.0,
                         ..default()
                     },
                 }))
                 .with_style(Style {
                     max_size: Size {
-                        width: Val::Px(500.),
+                        width: Val::Px(450.),
                         height: Val::Undefined,
                     },
                     ..default()
@@ -137,7 +138,7 @@ fn manage_buttons(
                 let style = TextStyle {
                     font: font.clone(),
                     color: Color::BLACK,
-                    font_size: 18.0,
+                    font_size: 16.0,
                 };
 
                 root.spawn((
@@ -178,7 +179,7 @@ fn update(
                         value: c.into(),
                         style: TextStyle {
                             font: font.clone(),
-                            font_size: 50.0,
+                            font_size: 16.0,
                             ..default()
                         },
                     })
@@ -206,35 +207,26 @@ fn mouse_cursor(
 fn play(
     mut texts: Query<&mut Text, (With<Marker>, With<PreviewText>)>,
     interactions: Query<&Interaction, (Changed<Interaction>, With<FontButton>)>,
-    mut playing: Local<bool>,
     time: Res<Time>,
-    mut desired: Local<String>,
+    mut duration: Local<Duration>,
 ) {
     for interaction in interactions.iter() {
         match interaction {
-            Interaction::Clicked => *playing = true,
+            Interaction::Clicked => *duration = Duration::from_secs(30),
             _ => (),
         }
     }
-    if *playing {
+    if *duration > Duration::ZERO {
         let mut text = texts.single_mut();
         let total_sections = text.sections.len();
 
-        let curr_cos = time.elapsed().as_secs_f32().cos().abs();
+        *duration = duration.saturating_sub(time.delta());
 
         for (idx, section) in text.sections.iter_mut().enumerate() {
-            let idx_ratio = (total_sections as f32) / ((idx + 1) as f32);
+            let ratio = ((idx + 1) as f32) / (total_sections as f32);
-
+            let cursor = 1.0 - ((*duration).as_secs_f32() / 30.0);
-            let intensity = (curr_cos - idx_ratio).abs() % 1.0;
+            let alpha = if cursor > ratio { 1.0 } else { 0.0 };
-
+            section.style.color.set_a(alpha);
-            section.style.color.set_a(intensity);
         }
-        // Get text sections
-        //
-        // figure out how far into animation we are
-        //
-        // Set current vs desired ratio
-        //
-        // Set current to that % from empty to desired
     }
 }