Biết xử lý animation kết hợp giữa canvas css3 js
(Last Updated: July 15, 2021) Show Saola Animate allows you to create and call JavaScript functions. Besides that, it also allows you to use external script resources to create advanced interactivities. In this tutorial, you will learn how to use external script resources in Saola Animate 3, namely JavaScript, CSS, and HTML files, to better control your document’s look and feel. This tutorial covers:
Import Script ResourcesTo import script resources, do either of the following:
After that, you can:
Edit Script ResourcesTo edit a script resource, double-click it to open the script editor. This editor is similar to the JavaScript Function editor except that it allows editing multiple script resources at once. To open another resource to edit, click Open from Resources in the toolbar and choose the resource you want. Besides, you can click Restore to Original Files to discard all changes and return to the original files at any time. Alternatively, right-click a script resource and select Update from Original Files. Include JavaScript and CSS in DocumentBy default, JavaScript and CSS files added to a project are included in the document. To disable this behavior, select a JavaScript or CSS file and clear the Include in Document check box. Order JavaScript and CSSThe order in which you state the JavaScript or CSS files matters in many cases. One script may contain dependencies on another one, so you have to make sure the dependent script is called after the other. Meanwhile, the order of the CSS files determines which ones take precedence. CSS rules that are defined earlier have lower precedence than those defined later, meaning that styles declared later win. To order JavaScript and CSS resources, click Order JS/CSS to open the corresponding dialog. Then, choose the resource type and click the Move Up (1) or Move Down (2) button to reorder the files. You can also specify whether to include a specific file in the document by selecting the check box next to the file’s label. That’s how you can use external script resources in a Saola Animate document. Hope this helps. Related Articles: The In this article, let’s look specifically at animation in canvas and techniques to make them look smoother. We’ll look specifically at easing transitions — like “ease-in” and “ease-out” — that do not come for free in canvas like they do in CSS. Let’s start with a static canvas. I’ve drawn to the canvas a single playing card that I grabbed out of the DOM: Let’s start with a basic animation: moving that playing card on the canvas. Even for fairly basic things like requires working from scratch in canvas, so we’ll have to start building out functions we can use. First, we’ll create functions to help calculate X and Y coordinates:
This will help us update the position values as the image gets animated. Then we’ll keep re-rendering the canvas until the animation is complete. We do this by adding the following code to our
Now we have animation! We’re steadily incrementing by 1 unit each time, which we call a linear animation. You can see how the shape moves from point A to point B in a linear fashion, maintaining the same consistent speed between points. It’s functional, but lacks realism. The start and stop is jarring. What we want is for the object to accelerate (ease-in) and decelerate (ease-out), so it mimics what a real-world object would do when things like friction and gravity come into play. A JavaScript easing functionWe’ll achieve this with a “cubic” ease-in and ease-out transition. We’ve modified one of the equations found in Robert Penner’s Flash easing functions, to be suitable for what we want to do here.
Inserting this into our code, which is a cubic ease, we get a much smoother result. Notice how the card speeds towards the center of the space, then slows down as it reaches the end. Advanced easing with JavaScriptWe can get a slower acceleration with either a quadratic or sinusoidal ease.
For a faster acceleration, go with a quintic or exponential ease:
More sophisticated animations with GSAPRolling your own easing functions can be fun, but what if you want more power and flexibility? You could continue writing custom code, or you could consider a more powerful library. Let’s turn to the GreenSock Animation Platform (GSAP) for that. Animation becomes a lot easier to implement with GSAP. Take this example, where the card bounces at the end. Note that the GSAP library is included in the demo. The key function is
The And we’re not just talking about bounces. There are tons of different easing options to choose from. Putting it all togetherStill unsure about which animation style and method you should be using in canvas when it comes to easing? Here’s a Pen showing different easing animations, including what’s offered in GSAP. Check out my Solitaire card game to see a live demo of the non-GSAP animations. In this case, I’ve added animations so that the cards in the game ease-out and ease-in when they move between piles. In addition to creating motions, easing functions can be applied to any other attribute that has a from and to state, like changes in opacity, rotations, and scaling. I hope you’ll find many ways to use easing functions to make your application or game look smoother. |