Help with Smooth motion with script in HTML5 Canvas

Question

I used to use Flash in the early 2000s and a few weeks ago have got back into using Animate to create some interactive HTML pieces. I have old hard drives with lots of old Flash files with Actionscript examples/experiments from 'back in the day' that would have exactly what I'm looking for but sadly the software no longer supports old script 😞

In Animate using HTML5 Canvas I'd like to recreate smooth-motion animation with code.
Back in the day there was an ease-out code that would start moving/scaling/rotating something fast then would ease out near the end position/size/angle.
Wondered if anyone on here could help? I've scowered youtube, this forum and google to no avail.

Action to be coded
- have a symbol labelled 'square'
- use code to move it from X position = 100, Y position = 200 to X position = 200, Y position = 400
and also Scale from 100% to 120% and Rotate to a specified angle (85 degrees)

- ideally motion would start off fast then ease towards end. If the ease is too difficult then just motion A-B with code would be amazing!

Action to take place when
My days of coding from scratch are long gone so it would be amazing if there was an example of the code for the above movement to be implemented for the following:
- Code on a keyframe so action happens when at this point in timeline.

- When a button 'button' is clicked
- Timed (action happens amount of time)

I know it's asking for a lot so any guidance is appreciated!

JoãoCésar17023019 · Answer

Hi.

HTML5 Canvas document content is created using CreateJS. So all the motion tween capabilities is handled by TweenJS which is part of the CreateJS suit of libraries.

AS3 and HTML5 documents have pros and cons, but I can tell you that TweenJS is far superior to the default tween libraries of the ActionScript 3.0 document.

With that being said, you can tween an object on the current timeline when the current frame is visited like this:

createjs.Tween.get(this.yourInstanceToBeAnimated).to({ x: 200, y: 400, scaleX: 1.2, scaleY: 1.2, rotation: 85 }, 500, createjs.Ease.sineEaseOut);

Or listening to a button click like this:

var _this = this;

_this.yourButtonInstance.on("click", function(e)
{
    createjs.Tween.get(_this.yourInstanceToBeAnimated).to({ x: 200, y: 400, scaleX: 1.2, scaleY: 1.2, rotation: 85 }, 500, createjs.Ease.sineEaseOut);
});

I hope this info can help you to get started.

Please let us know if you have any further questions.

Regards,

JC

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded