Giters

thorvg / thorvg

Thor Vector Graphics is a lightweight portable library used for drawing vector-based scenes and animations including SVG and Lottie. It can be freely utilized across various software platforms and applications to visualize graphical contents.

Home Page:https://www.thorvg.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

lottie: Support the layer effect

theashraf opened this issue · comments

commented

Hey team

We've encountered an issue with the dotLottie players where a specific animation is not rendering. The main issue is documented here: LottieFiles/dotlottie-web#164.

I ran a Lottie features report using relottie on the mentioned animation and compiled a list of features it utilizes. It appears that ThorVG does not yet support the "layer effect" feature, which is used by this animation. Any suggestions on how to proceed?

Here is the list of features identified:

name
threedimensional
height
width
metadata
metadata-children
generator
composition
composition-children
layer-precomposition
layer-type
time-stretch
start-time
out-point
in-point
hidden
layer-threedimensional
blend-mode-normal
has-mask
auto-orient
layer-transform
layer-transform-children
anchor-point
animated-position
animated
position-keyframe-list
position-keyframe-list-children
position-keyframe
position-keyframe-out-tangent
keyframe-bezier-handle
keyframe-bezier-handle-x-axis
keyframe-bezier-handle-y-axis
position-keyframe-in-tangent
keyframe-value
keyframe-value-children
position-keyframe-time
layer-transform-scale
animated-multidimensional
keyframe-list
keyframe-list-children
keyframe
keyframe-out-tangent
keyframe-in-tangent
keyframe-time
layer-transform-skew
animated-value-static
static-value
translation
rotation-clockwise
animated-value
layer-transform-skew-axis
transform-opacity
reference-id
composition-index
layer-shape
effect-list
effect-list-children
effect-drop-shadow
effect-type
enabled
effect-param-list
effect-param-list-children
effect-param-color
effect-value-color
animated-color
effect-param-slider
effect-value-slider
effect-param-angle
effect-value-angle
shape-list
shape-list-children
shape-path
shape-type
shape-direction-clockwise
animated-shape-prop
animated-shape
shape-keyframe-list
shape-keyframe-list-children
shape-keyframe
shape-keyframe-out-tangent
shape-keyframe-in-tangent
shape-keyframe-start
shape-keyframe-start-children
bezier
bezier-closed
bezier-in-tangents
bezier-in-tangents-children
bezier-out-tangents
bezier-out-tangents-children
bezier-vertices
bezier-vertices-children
shape-keyframe-time
shape-fill
shape-fill-color
fill-rule-non-zero
shape-fill-opacity
version
framerate
assets
assets-children
asset-precomposition
id-asset-precomposition
shape-stroke
line-cap-butt
line-join-miter
miter-limit-value
stroke-opacity
stroke-width
shape-stroke-color

You can check the animation at this URL: https://lottie.host/c47dca0a-2580-41b8-b2e9-75a9aeeb017b/Ja2z677E9b.json

commented

Unfortunately, we cannot use this resource at the moment due to the lack of support for "layer effects." We plan to support it, but it will take a few months. Perhaps, you can find an alternative method to convert this resource without relying on layer effects. For example:

  • Using a blurred shadow effect images beneath the leaf shapes.
  • Replace the effect with the additional shapes with radial-gradient filling beneath the leaf shapes .
commented

Thank you, @hermet, for the updates

commented

another layer effect requirement: LottieFiles/dotlottie-web#181