Html 5 Animations

As a result of the advancements brought by HTML 5, SkiaMap now incorporates these features. However, it’s important to note that these benefits will not be accessible in the desktop application’s preview version since they are specifically designed for HTML pages.

When you choose an animation shape, you’ll find the following buttons above the selected shape:

Edit HTML 5 Properties

Click on this button to access and modify HTML-specific properties. Upon clicking, the properties window will appear, allowing you to configure the HTML 5 properties that will be visible on the HTML page.

Image Effects Properties:

Blur Radius: Applies a Gaussian blur to the image or shape. Check the “Apply” box for the effect to be visible.
Brightness: Applies a linear multiplier to the input image, adjusting brightness. Values below 100% darken the image, while values above 100% brighten it.
Contrast: Adjusts the contrast of the input image. Values between 0% and 100% decrease contrast, and values above 100% increase it.
Drop Shadow and Color: Drop Shadow Color defines the color of the drop shadow. Click the ellipsis button to choose a color if you want to make changes. Check the “Apply Drop Shadow” box to enable the effect.
Offset X: The horizontal offset for the shadow, specified as a <length> value. Negative values place the shadow to the left of the element.
Offset Y: The vertical offset for the shadow, specified as a <length> value. Negative values place the shadow above the element.
Shadow Blur: The shadow’s blur radius, specified as a <length>. A larger value results in a larger and more blurred shadow. If unspecified, it defaults to 0, creating a sharp, unblurred edge. Negative values are not allowed.
Gray Scale: Converts the image to grayscale. A value of 100% is completely grayscale, while 0% leaves the input unchanged.
Opacity Percent: Applies transparency. 0% makes the image completely transparent, and 100% leaves the image unchanged.
Sepia Percent: Converts the image to sepia. A value of 100% is completely sepia, and 0% makes no change.
Invert Percent: Inverts the samples in the input image. A value of 100% completely inverts the image, and 0% leaves it unchanged.
Hue Rotate (degs): Applies a color rotation to the elements. A value of 0 degrees leaves the input unchanged. Positive hue rotation increases the hue value, while negative rotation decreases it. The initial interpolation value is 0. There is no minimum or maximum value. The effect of values above 360 degrees are, given hue-rotate(Ndeg), evaluates to N module 360.

Html 5 Animations

In addition to the properties mentioned earlier, there are various animations available to animate these properties along a timeline. The following sections outline these animations and the corresponding properties that need configuration.

Please refer to the accompanying images for a visual explanation of these properties.