Show Text Letter by Letter

Show text letter by letter

HTML

<div id="msg"/>

Javascript

var showText = function (target, message, index, interval) {   
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
  }
}

Call with:

$(function () {
  showText("#msg", "Hello, World!", 0, 500);   
});

How to reveal one letter at a time?

Here's a snippet for something that you are looking for.

p{  color: Pink;   font-family: "Courier";  font-size: 20px;  margin: 10px 0 0 10px;  white-space: nowrap;  overflow: hidden;  width: 30em;  animation: type 4s steps(60, end); }
@keyframes type{   from { width: 0; } } 

<p>Hi folks, this is typing animation using CSS</p>

Display a String letter by letter in a TextView -Android

This code works,

    public void setText(final String s)
    {
    TextView tv= (TextView)HomeActivity.tf.getView().findViewById(R.id.textViewFragment);
    final int[] i = new int[1];
    i[0] = 0;
    final int length = s.length();
    final Handler handler = new Handler()
    {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            char c= s.charAt(i[0]);
            Log.d("Strange",""+c);
            tv.append(String.valueOf(c));
            i[0]++;
        }
    };

    final Timer timer = new Timer();
    TimerTask taskEverySplitSecond = new TimerTask() {
        @Override
        public void run() {
            handler.sendEmptyMessage(0);
            if (i[0] == length - 1) {
                timer.cancel();
            }
        }
    };
    timer.schedule(taskEverySplitSecond, 1, 500);
}

Print string letter by letter in React

The reason you aren't seeing the update in your for loop is that setState() is asynchronous and the updated state value is not available until the next render. So you are just looping through your string, logging the current state value (which is an empty string) and then calling setState which will be called once the loop is finished. see: Console.log() after setState() doesn't return the updated state

When thinking about a loop like this in the context of react you need to take into account the larger state/render cycle. The 'loop' of the animation is actually successive renders triggered by state changes.

The useEffect hook gives you a built in method of leveraging this cycle, meaning that you simply need to track index through sequential renders (the snippet uses useRef to persist the value) and use it to update state, thus triggering a new render, etc.

Here is a quick snippet.

const App = () => {
  const [placeholder, setPlaceholder] = React.useState('');

  const
    string = 'This is the final string.',
    index = React.useRef(0);

  React.useEffect(() => {
    function tick() {
      setPlaceholder(prev => prev + string[index.current]);
      index.current++;
    }
    if (index.current < string.length) {
      let addChar = setInterval(tick, 500);
      return () => clearInterval(addChar);
    }
  }, [placeholder]);

  return (
    <div>
      {placeholder}
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

How do I make text appear letter by letter in a box in Pygame?

See Typewriter Effect Pygame. The basic idea is that you use a timer event (pygame.time.set_timer()) and append the text letter by letter:

typewriter_event = pygame.USEREVENT+1
pygame.time.set_timer(typewriter_event, 100)

text = 'Hello World'
typewriter_text = ""

while run:
    # [...]

    for event in pygame.event.get():
        if event.type == typewriter_event:
            if len(typewriter_text) < len(text):
                typewriter_text += text[len(typewriter_text)]

Unfortunately pygame cannot render text with line breaks. You have to render the test line by line. See Rendering text with multiple lines in pygame

---

Related Topics