Highlighted

Typewriter effect in html Canvas with a dynamic text box

Explorer ,
Jun 17, 2019

Copy link to clipboard

Copied

I want a create a typewriter text animation on effect like this https://typeitjs.com/  in canvas.

I have been searching online for a long time and just can't find an answer... if anyone has an idea I would love to hear from you!

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

use the ticker's framerate or interval. eg,

createjs.Ticker.framerate=10;

(but i suspect that will affect your entire projects framerate).  if that's not a problem, use it or, at least, try it.

if it's a problem, use setItnerval:

var s = 'this is your text';

var F = f.bind(this);

var fI;

clearInterval(fI);

fI=setInterval(F,400);

function f(e){

if(this.tf.text.length<s.length){

this.tf.text+=s.charAt(this.tf.text.length);

} else {

clearInterval(fI);

}

}

TOPICS
Discussions

Views

739

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Typewriter effect in html Canvas with a dynamic text box

Explorer ,
Jun 17, 2019

Copy link to clipboard

Copied

I want a create a typewriter text animation on effect like this https://typeitjs.com/  in canvas.

I have been searching online for a long time and just can't find an answer... if anyone has an idea I would love to hear from you!

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

use the ticker's framerate or interval. eg,

createjs.Ticker.framerate=10;

(but i suspect that will affect your entire projects framerate).  if that's not a problem, use it or, at least, try it.

if it's a problem, use setItnerval:

var s = 'this is your text';

var F = f.bind(this);

var fI;

clearInterval(fI);

fI=setInterval(F,400);

function f(e){

if(this.tf.text.length<s.length){

this.tf.text+=s.charAt(this.tf.text.length);

} else {

clearInterval(fI);

}

}

TOPICS
Discussions

Views

740

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 17, 2019 0
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

use a loop (eg, setInterval or tick) to sequentially add letters.  eg,

var s = 'this is your text';

var F = f.bind(this);

this.addEventListener("tick", F);

function f(e){

if(this.tf.text.length<s.length){

this.tf.text+=s.charAt(this.tf.text.length);

} else {

this.removeEventListener('tick',F);

}

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 2
Explorer ,
Jun 17, 2019

Copy link to clipboard

Copied

works... great. Is they a way to set the interval time?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 0
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

use the ticker's framerate or interval. eg,

createjs.Ticker.framerate=10;

(but i suspect that will affect your entire projects framerate).  if that's not a problem, use it or, at least, try it.

if it's a problem, use setItnerval:

var s = 'this is your text';

var F = f.bind(this);

var fI;

clearInterval(fI);

fI=setInterval(F,400);

function f(e){

if(this.tf.text.length<s.length){

this.tf.text+=s.charAt(this.tf.text.length);

} else {

clearInterval(fI);

}

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 0
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

A little something I whipped up:

// Method added to CreateJS Text object to add text one character at a time

// Arguments:

//  text: text to add

//  cps: characters per second (optional; default 12)

//  clear: clear current contents of textfield (optional; default false)

//  callback: function to call when done (optional)

cjs.Text.prototype.type = function(text, cps, clear, callback) {

    if (clear) {

        this.text = "";

    }

    if (this.typeData) {

        clearInterval(this.typeData.timer);

    }

    this.typeData = {text: text, callback: callback, chars: 0};

    this.typeData.timer = setInterval(function() {

        var td = this.typeData;

        this.text += td.text.charAt(td.chars);

        if (td.chars++ === td.text.length - 1) {

            clearInterval(td.timer);

            if (td.callback) {

                td.callback.call(this);

            }

        }

    }.bind(this), 1000 / (cps ? cps : 12));

}

Just stick the above code anywhere in your setup/initialization frame, then use as, for example:

this.test.type("This is a test.");

Or:

this.test.type("This is another test.", 24, false, doSomethingWhenDone);

Note that if you specify a character rate higher than the stage's frame rate, you'll see multiple consecutive characters appear at once.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 2
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

Excellent.

I'll save this one.

And maybe a good addition would be to get the current text field's text if the user doesn't provide any. So it would only be a matter of calling this.textField.type();

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 0
ClayUUID LATEST
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

It could also use some input validation. Currently if you pass it a null string it will go into an infinite loop.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 1