ceceppa / anima Goto Github PK

Godot: run sequential and parallel animations with less code

Home Page: https://ceceppa.github.io/anima/

License: MIT License

GDScript 100.00%

anima's Introduction

Anima

Anima is an add-on for the Godot game engine that simplifies the process of creating dynamic and impactful UI animations.

Introduction

Working with Godot's Tween to create UI animations can be quite challenging. However, Anima, an add-on for Godot, simplifies the process by allowing you to create animations using a clear and concise syntax with just a few lines of code. With 89 built-in animations and 33 easing options, Anima provides a vast array of options to choose from. Moreover, you can easily add your animations using a syntax similar to CSS, making it a convenient tool for developers.

Installation
Documentation & Demo
Differences between Anima and Godot Tween
Stay in Touch
Contribution
License

Installation

This is a regular editor plugin. Copy the contents of addons/Anima into the same folder in your project, and activate it in your project settings.

Documentation & Demo

Check out documentation, demo code and live examples.

Differences between Anima and Godot Tween

	Anima	Tween
Chaining	support for sequential, parallel and concurrent animations	Only Godot 4
Easing	33 built-in, more can be added programmatically	limited
Use Curve as easing	yes	no
Set Pivot point	yes (2D Only)	no
Create and reuse custom animations	89 built-in, more can be added programmatically	No
Animate elements in group or grids	yes	No
Multiple distance formulas for Grid animations	yes	no
Loop	Infinite, Times, and delayed loops	Infinite only
Animate relative values	yes	Only Godot 4
Play/Loop backwards	yes	no
Dynamic values	yes	no
CSS-Like animations	yes	no

Example

var anima = Anima.Node($Node).anima_keyframes({
    from = {
        opacity = 0,
        scale = Vector2(0.5, 0.5),
    },
    to = {
        opacity = 1,
        scale = Vector2.ONE
    },
    easing = Anima.EASING.EASE_OUT_BACK,
})

await anima.play()

anima.play_reverse_with_delay(1)

Built-in animations

Original source: https://github.com/animate-css/animate.css

Stay in Touch

Contribution

Contributions are welcome and are accepted via pull requests.

License

MIT

anima's People

Contributors

Stargazers

Watchers

Forkers

anidemdex mjsolidarios realkotob belzecue aijikl zaksnet denise-amiga jrmysrss baiduwen3 godotworks godotcollection jpcard sulzyro joao-pedro-braz cybersys vicky-vittles solitaryurt boyquotes

anima's Issues

just don't work, even the demo project

first of all, I recently migrated from Unity to Godot, so it could be something I'm doing wrong, but absolutely nothing works, not even importing it into my project or using the demo project.

this is the error when I try to import in my project:
res://addons/anima/core/anima_node.gd:538 - Parse Error: Identifier "ANIMA" not declared in the current scope. modules/gdscript/gdscript.cpp:2788 - Failed to load script "res://addons/anima/core/anima_node.gd" with error "Parse error". (User)

this is the error when I try to run the demo project, and the godot build I'm using:

thanks :)

Add support for Shapes

Add supports for basic shapes to be easily animatable.

anima docs website was unavailable

the docs and demos website see like been unavailable.
i can't make sure about it. but please to check. thanks.

Too big visual editor size

Scale the default UI size down, as all buttons are too big.

LICENSE is spelled wrong

The file name is currently "LICENCE" with a "CE", but the proper way to spell the word "LICENSE" is ending with an "SE".

Can't run anima - project.gd broken

After trying to activate Anima in Godot, the editor says: "Can't activate Shape plugin, broken project.gd"

not working for .gde files

anima/addons/anima/utils/animations.gd

Line 22 in b61ee6f

if file.find('.gd.') < 0 and file.find(".gd") > 0:

The first if statement is always true: file.find('.gd.') < 0

The second if statement is also match for both .gd file and .gdc file ,which makes it's quite confusion

and I guess its not working for gde file, I use a low version of anima , and it report cant find any animation

in replacement:

		for file in list:
			if file.ends_with('.gdc'):
				filtered.push_back(file.replace('.gdc', '.gd'))
			elif file.ends_with('.gde'):
				filtered.push_back(file.replace('.gde', '.gd'))
			elif file.ends_with('.gd'):
				filtered.push_back(file)
		_animations_list = filtered

BTW, Anima is a great plugin ! Thanks a lot !

Anima_on_started/compleleted will not work well at sometimes in Godot 4

Hi! I just start to use this amazing tool. But there are few issues I got:

anima_on_started/completed will not worked at some times:1. Lambda function. 2. None parameter function. 3. Function with array parameter.

For this issue. I checked from code(tween.gd). And I found that fn.callv(args) will not call function with none parameter

anima_on_started/completed may be called at almost same time.
I tried to get changing values from callbacks. Values maybe the final value not changing value(For instance form picture. Value in anima_on_started should be 100 not 70).

For first issue. I tried to remove "[null]" parameter from callabacks. And call "fn.call()" instead of "fn.callv(args)". But I also want to listent to your advice for this issue.
For the rest issues. I didn't step deep into codes.
Please take look if you have time. Thanks!

Not Support shader_param?

godot: 3.5.1
anima: 0.3.2
I found shader_param in doc is error. use shared_param?

var anima = Anima.begin(self, 'al2')
anima.then({node = $Sprite, property = "material:shader_param/DissolveRate", from = -1.0, to = 1.0, duration = 1})
anima.then({node = self, property = "opacity", from = 1, to = 0, duration = 0.28})
anima.play()

but not work

then I used Tween, luckily is correct

var t = $Sprite/Tween.interpolate_property($Sprite, "material:shader_param/DissolveRate", -1, 1, 1)
$Sprite/Tween.start()

docs website has broken links

Most of the links on this page are broken: https://ceceppa.github.io/anima/docs/intro

Here are some of the broken links:

Most lead to a "Page Not Found".

The next button at the bottom works. I'd guess the documentation generator automatically linkified the types, but somehow did it incorrectly or their pages were never uploaded?

Create demo for shapes

anima on started cannot be used

godot: 4.0rc1
anima: 0.4

GLES3 causes lockup for 30-45 seconds in the 3d demos

Please see this relevant Godot issue:

godotengine/godot#56670

Perhaps we could move to GLES2 export for the demo example to prevent issues with GLES3 shader compilation?

Create new UI for demo viewer

Cyclic dependecy on editor?

Anima plugin works well inside the game. But some features to code with anima inside the editor are lost the first time you add the plugin (like autocompletion until the script is fully loaded by the editor).

For now, i discover that reloading the engine at least 2 times solves this (the first time you add the plugin folder and the second time after you activate the plugin)

Add/Investigate support for C#

Visual node editor isn't shown

Anima visual node editor remains hidden after clicking on AnimaVisualNode in the scene tree

Error log:

 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 res://addons/anima/utils/anima_declaration_group.gd:56 - Invalid get index 'property' (on base: 'Dictionary').
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 res://addons/anima/utils/anima_declaration_group.gd:56 - Invalid get index 'property' (on base: 'Dictionary').
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: opacity
 animation not found: opacity
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale
 modules/gdscript/gdscript_functions.cpp:788 - passing a Dictionary has been deprecated. Please use Anima.Node / Anima.Group / Anima.Grid instead
 No animation found with name: scale
 animation not found: scale

EDIT:

The errors are at utils/anima_declaration_grid.gd, utils/anima_declaration_group.gd, and utils/anima_declaration_node.gd: at function anima_property
It should be .anima_property(property_name) instead of .anima_animation(property_name)

anima_property cannot handle discontinuous property eg. bool property

Hi!
When I tried to call anima_property func with "visible" value. Script will be broken at runtime. I tried to use callback func to set visibility(It is not a straight forward solution).

If you have any idea to solve this little problem. Please let me know. Thanks!

Hide strategy proposal and a bug report

[PROPOSAL] Although the hide strategy is nice and in most cases more than enough, there are times where i would prefer for example to have an initial value for position or size instead of visibility or transparency.
An interesting solution would be to have an additional property initial_value which sets all the nodes to the value before the animation begins. Of course all of this could be done manually (setting the size of the nodes before the animation starts for example) but since anima already iterates through the objects it would be convenient if there was a built in property.

[BUG] Also when using anima.set_visibility_strategy(Anima.VISIBILITY.TRANSPARENT_ONLY) with a group animation the changes the scale of the controls, the controls never came back to be visible. I would expect them to become visible once the animation starts. I had to animate modulate to overcome this:

anima.with({
  group = games_container,
  items_delay = 0.05,
  property = "modulate:a",
  from = 0,
  to = 1
})

Parse error - Godot 3.5.2 - Anima 0.3.2

I installed Anima in a fresh new project but whenever i was tried to run my game i got this error:
"res://addons/anima/core/node.gd:9 - Parse Error: The identifier "AnimaTween" isn't declared in the current scope."

Im using 0.3.2 version from the Godot Asset Library.

Add support for Godot 4.0

Make future releases to be just the addon

I'll try this plugin, seems cool, but in the meanwhile, i want to suggest to make future releases to be just the addon folder or the anima plugin folder, not the entire repository source code.

This way, everyone can download only the plugin and also keep it updated via git.

Access node specific properties during grid/group animations

It would be nice to be able to access specific properties of the current iterating node while performing a group or grid animation.

For example:

anima.then({
  grid = $VBoxContainer,
  grid_size = Vector2(3, 3),
  animation_type = Anima.GRID.FROM_CENTER,
  property = "modulate",
  to = Color.red,
  duration = 0.3
})
anima.then({
  grid = $VBoxContainer,
  grid_size = Vector2(3, 3),
  animation_type = Anima.GRID.FROM_CENTER,
  property = "modulate",
  from = Color.red,
  to = "myCell:modulate",
  iteratee = "myCell"
  duration = 0.3
})

The iteratee field could contain the cell that is being animated and by using ":" you get the value of the cell's property at the time before the animation starts.
In the above example every cell would animate from red to their current modulate color which could be used to create a "red wave" animation on the grid, and then returning each cell's color to its original value assuming they all have a different one.

This is just a thought I had, of course it doesn't have to be implemented that specific way if at all. :)

Structure proposal

You seem to be using the same class (AnimaNode) for everything right but this makes it hard to maintain and possibly prone to errors because you have to pass dictionaries with properties that sometimes are not compatible with each other. Plus users will have to remember all the names of the properties they have to pass. A better approach would be to have a different class for each type of animation. An example would be:

# Create a class named AnimaAnimationGrid (or something similar)
# then pass the type of the animation into the Begin method so this would return an AnimaAnimationGrid node instead of a generic AnimaNode.
# With that in place now you can have proper properties for the methods instead of dictionaries (kind of like tween but with all of the nice features your project provieds)
var anima := Anima.Begin(AnimaAnimations.Grid, self)
anima.then(
   grid: $Grid,
   grid_size: grid_size,
   animation_type: Anima.GRID.COLUMNS_EVEN,
   property: "x",
   to: 5, 
   relative: true,
   duration: 0.3,
   easing: Anima.EASING.EASE_OUT_SINE,
   items_delay: 0
)

That way users wont have to go back to the documentation in order to check which parameters they can pass etc...

EDIT: And of course have a base class from which all of the animations inherit

Anima visual node editor

Allows creating animations in the editor using Visual Node editor a la Visual Shader

Error when trying to play an animation

I'm not sure if thats intentional but the pivot is passed as a string there and the function expects a dictionary:

The code that invoked the error:

var anima := Anima.begin(self)
anima.then({node = self, animation = "tada", duration = 0.7})
anima.play()

The object (self) is a MarginContainer if that helps.

Initial values do not reset when using an animation repeatedly

Hello, it seems that if you interrupt a currently playing animation with another play() call, it seems to use the current values as the new initial value, and then animate from there, instead of resetting first, and then playing the animation.

I could be missing a step though; I'm just following what I saw in the docs:

if Input.is_action_just_pressed("use_ability"):
  var anima = Anima.begin(self)
  anima.then({ node = self, animation = "wobble", duration = 0.2 })
  anima.play()

The animation basically plays everytime I hit a key. Attached is a video of what it looks like. As you can see, it starts to veer way off its original position.

godot_y8gKmQ0JNE.mp4

I checked the live demo for anima and it doesn't seem to have this problem. On checking the code, you seem to avoid this by duplicating the original node then hiding it. That seem like a janky solution for me though.

My current workaround is to toggle the control's visibility off then on. This only works for nodes in a container though, since the container can reset its children's position/rotation/scale. Still, I was wondering if there's something I'm missing so I don't have to even resort to a workaround?

Note: I'm using Anima 0.3.1

Translations not working as expected on typewrite animation

Hi, I found out that typewrite is currently using
var l = node.text.length()
this leads to getting translation key length instead of the actual translation text leght.
In order to fix the issue I changed that line to
var l = tr(node.text).length()
so it now uses translation resolved text instead of translation key and it is fully compatible with non translated Strings.

I was going to open a PR with the fix but I found out that typewrite sintax changed on your latest version and I don't know how to properly invoke tr function on that case.