Description
ABeamer is a powerful frame-by-frame animation ecosystem, designed to create an animated story in the web browser and generate the file images of each frame in either a local machine or in the cloud.
Unlike VelocityJs
and JQuery.animate
which were built for real-time user interaction, ABeamer allows you to build complex frame based animations and save them frame-by-frame with transparency at high resolution and lossless compression without frame drop.
When an animated story is designed to be rendered in the cloud, no software is required to install on the local machine,allowing video hosting services, ad network, e-commerce companies many other businesses to provide a tool for their users to add text, images, and special effects to their images or videos by just using the web browser and then teleport the story to the company's machine to render the frame images and generate animated gifs or videos.
What's new
ABeamer 1.5:
- New
datetime-functions
plugin. - Added
hsl2Rgb
,rgb2Hsl
,hsl
andhsla
functions tocolor-functions
plugin. - Support input array parameter in
color-functions
. - Added
abs
andsign
functions. - Added
allowExpr
parameter toadd-vars
task. - Fixed a bug on the reducing the release version size.
- Improved command line documentation.
ABeamer 1.4:
- Teleportation initial snapshot can be delay by using
story.startTeleporting()
. Read about it on the blog post. - Debugging code was removed from
abeamer.min.js
. Useabeamer-debug.min.js
if you need such information.
ABeamer 1.3:
- Fixes font rendering on
animate-transitions
example. - Adds minify to all abeamer release js files.
- Adds execution scripts (linux and windows) when ABeamer is downloaded as zip file.
ABeamer 1.2:
- Fixes gif generator bug on Windows.
- Adds
--gif-background
toabeamer gif
CLI.
ABeamer 1.1:
- Improves and simplifies the usage of Virtual Animators.
- The CLI has:
- a new
check
command to verify the requirements and help to configure puppeteer. - new parameters to fine-tune the generation of movies and gifs.
- new environments variables to avoid changing the search path to execute
ffmpeg
and imagemagickconvert
.
- a new
- Better support for paths with spaces.
- Improved support for windows developers with new batch files.
ABeamer 1.0:
ABeamer was raised to production level with the release of ABeamer 1.0.0.
This is the first LTS version and it includes many improvements, bug fixes, a few cosmetics changes in the documentation, and better support on Windows platform and Microsoft web browsers.
ABeamer 1.0.0 gives great access to the command-line allowing to create stories that can be configure by the server, opening the door to multiple dimension rendering.
The animated-badges
now are configurable by the server, and don't require the installation of local js/css files.
How to generate an animated badge with ABeamer >>>
ABeamer 0.3.2:
Now ABeamer has a website and blog. Have a look: https://abeamer.a-bentofreire.com.
With the creation of the blog, the project updates will be described in more detail and its information can be used as documentation.
In this version includes more detailed documentation and several fixed several documentation bugs.The major goal now is to raise the ABeamer to production level.
The roadmap was also updated and added many details.
ABeamer 0.3.1:
Includes chart series as expressions, allowing to plot mathematical functions.
The standard library now also includes log
, log10
and exp
.
ABeamer 0.3.0:
Includes the first implementation of the charts plugin.
Although there is still a lot of work for reach production stage, and the API can still change,is already usable in projects.
This plugin, will now enter a phase of research to ensure all parameters are consistent and their names and specifications are easy to use.
Have a look how the charts look in action or play with them in Code Pen.
read more >>>
This version also includes:* Gallery examples can viewed online without installing.* expressions support object variables.* expressions support one-dimension indices access to array variable.* Easings gallery.
For more details see the CHANGELOG.
Components
ABeamer includes a web browser library, a render server agent and a command line utility.
For the ABeamer Animation Editor, read Animation Editor.
- ABeamer web browser library is a highly extensible TypeScript/JavaScript library bundled with a rich toolset reducing the time to build complex animations.
- ABeamer render server agent is designed to communicate with a render server, usually a headless web browser, in order to save each frame to the disk. It can run either with the full potential supporting Code Handlers or in a sanitized environment allowing you to safely to render animations created by other users.
- ABeamer command line utility allows you to build new projects, render frames, create animated gifs or movies.
Read the requirements for details about the necessary software to install if you need to render, create gifs or movies in the local machine.
Donate
To build this project, and take it to the next level with the creation of the Animation Editor, it requires a full-time developer, please, consider donating to keep this projectalive and help to tell your story or to grow your business:
- paypal
- Bitcoin:
1mH89kWbvffActY7FAke26t2fbJE9U6jv
- Add a star to the github repo.
Features
- Free and Open-source.
- Simple and intuitive design.
- Supports rendering in the cloud in a sanitized environment.
- Extensively documented: End-User Documentation and Developer Documentation.
- Absolutely minimum dependencies.
- Highly Extensible via plugins including interpolators, functions, flyovers and tasks.
- Tasks to build complex animations and F/X.
- Large gallery of example projects.
- Multiple scenes (only default scenes are teleportable).
- Scene transitions.
- Expressions, functions and variables.
- Parallel and off-sync property animations.
- Teleportable JQuery-like containers.
- Teleportable flyovers.
- Saves frame-by-frame into a file sequence with transparency and at high resolution.
- Optional support for SCSS, LESS and TypeScript.
- DOM and Virtual Elements, Animators and Scenes. read more >>>
- Localization of messages and plugin functionalities, including functions and variables.
Property Animation
ABeamer has a complex system that allows to interpolate pixels, numbers,text, colors and much more.ABeamer guesses the starting value and property type from CSS style information,or if that information is given via valueStart
.* General CSS properties:
e.g prop: 'border-style'; valueText: ['dotted', 'dashed']
.
- Pixel properties.
e.g.valueStart: 10px; value: 100;
- Dual-pixel properties via paths.
- Color properties.
e.g.valueText: ['red', '#FF00AA'];
- Formatted numerical properties.
e.g.valueFormat: '%d%'; value: 100;
- Unformatted numerical properties.
- Image properties.
e.g.prop: 'src'; valueText: ['a.png', 'b.png'];
- Text properties.
class
property.
e.g.prop: 'class'; valueText: ['+class1 -class2'];
visible
property.
e.g.prop: 'visible'; duration: 1; value: 1;
transform
property:
e.g.prop: 'transform'; valueFormat: 'rotateX(%fdeg)'
;
CSS Animations
ABeamer doesn't supports CSS animations, but ABeamer was designed in a way that its animations are similar to CSS animations, therefore it's easy to convert CSS Animations to ABeamer animations.
Besides the property interpolation described above, ABeamer also supports:
- Item-delay with
disturbance
to produce random effects.
- CSS animation-iteration-count.
Interpolators
ABeamer provides several interpolators, which can be defined by:
- Teleportable Built-in interpolators. Accessible by name and ID.
- Teleportable Expressions.
- Plugins. Only official plugins can be teleportable.
- Code Handlers due security reasons aren't teleportable.
ABeamer has following interpolators:
- Easings - The speed of motion.
harmonic
anddamped
oscillators - Rotation and Balancing motion.
pulsar
oscillator.
- Paths - n-dimension motion.
The interpolators are chained in the following order: easing→oscillator→path.
Toolset
ABeamer has a rich toolset. Extensibility and teleportation are the key features of these tools.
Unless is noticed, all the built-in tools support teleportation.
Just like in the case of interpolators, Code Handlers aren't teleported, and the tools can be extended via plugins but only official plugins are teleportable.
ABeamer has the following tools:
- Scene transitions.
info
flyover.
video-sync
flyover [1].
- Wrappers.
- Text tasks:
text-split
task.typewriter
task.
factory
task.
decipher
task.
color-attack
task.
shape
task.
speech
shape task.
charts
task.
and much more coming soon.
Installation
To create animations, It's only required to have the web browser library
without the need of any software installed in the computer.
If you have nodejs already installed, install using npm:
[sudo] npm install -g abeamer
Otherwise if you don't want to install nodejs, download from here,but it won't execute the command-line utility.
Requirements
However, in order to render frames, generate gifs and movies, it requires:1. nodejs.
To render, it requires puppeteer render server
npm install -g puppeteer
.
Puppeteer installs Chromium by default, since Chromium is outdated and it has less features than Chrome,
before installing puppeteer, read the following note on how to configure puppeteer to use Chrome instead of Chromium. ABeamer also supportsphantomjs
but since its features are outdated it is preferable to use puppeteer.To generate gifs, it requires to have imagemagick on system path.
For Windows users, read the following note.To create movies, it requires to have ffmpeg on the system path.
To check if 2-4 points are installed and configured, execute:abeamer check
Playground
Try these examples online without any installation:
Get started
Start by creating a new project using the ABeamer command line utility:
abeamer create myproject
ABeamer web browser library root is ABeamer.Story
.
When you create a story, you define an immutable number of frames per second,
and all animations are interpolated based on that fps
.
on file js/main.ts
:
var story = ABeamer.createStory(25); // creates a story with 25 fps
The story
holds a collection of Scenes.
Only one scene can be visible at a given moment in time except during the transition between two scenes.
It represents the natural concept of a scene in a storyline.
By using Scenes, ABeamer can speed up the processing speed by reducing the global amount of calculations.
The bare-bones of a html
file:
<div class="abeamer-story" id=story>
<div class=abeamer-scene id=scene1>
<p id="hello">Hello world</p>
</div>
</div>
The bare-bones of a abeamer.ini
file:
$abeamer-width: 200;
$abeamer-height: 100;
The bare-bones of a scss
file:
@import "./../abeamer.ini";
body,
html,
.abeamer-story,
.abeamer-scene {
width: $abeamer-width + px;
height: $abeamer-height + px;
}
Html Elements with abeamer-scene
class are added automatically.
Scenes can be added manually with the following code:
var newScene = story.AddScene();
Creating scenes with abeamer-scene
class is the preferable way.
You add animations to the scene defining the time in 'seconds', 'milliseconds' or 'frames' but if it's defined in time, these are converted to frames based on the story fps.
scene1.addAnimations(
[{
selector: '#hello', // dom or JQuery selector
duration: '4s', // at 25fps, the duration is 100 frames
props: [
{
prop: 'left', // property, text, url to animate
easing: 'easeOutQuad', // easing
value: 100 // end value
}
]
}]
);
You can add multiple properties in parallel or off-sync with the position
or advance
parameter.
Command line
ABeamer command line utility is used to:
- checks if requirements are configured:
abeamer check
. - create projects:
abeamer create
. - launch a live server:
abeamer serve
. - create a png file sequence:
abeamer render
. - create gifs:
abeamer gif
. - create movies:
abeamer movie
.
For detailed examples, read: Command Line Utility.
Read Requirements for details about the necessary software to install if you need to render, create gifs or movies on the local machine.
Documentation
Roadmap & Known Issues
Contribute
ABeamer was built on Linux/Chrome/Puppeteer and tested on Windows, Firefox, Opera, MS IE11 and MS Edge.
To keep an healthy cooperation environment, before posting an issue, please read Code Of Conduct.
Report issues on github.
License
MIT License
Copyrights
(c) 2018-2024 Alexandre Bento Freire