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.
If you find this project useful, please, read the Support this Project on how to contribute.
ABeamer includes a web browser library, a render server agent and a command line utility. For the ABeamer Animation Editor, read Animation Editor.
Read the requirements for details about the necessary software to install if you need to render, create gifs or movies in the local machine.
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
.
e.g prop: 'border-style'; valueText: ['dotted', 'dashed']
.
valueStart: 10px; value: 100;
valueText: ['red', '#FF00AA'];
valueFormat: '%d%'; value: 100;
prop: 'src'; valueText: ['a.png', 'b.png'];
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)'
;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:
disturbance
to produce random effects.ABeamer provides several interpolators, which can be defined by:
ABeamer has following interpolators:
harmonic
and damped
oscillators - Rotation and Balancing motion.pulsar
oscillator.The interpolators are chained in the following order: easing→oscillator→path.
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:
info
flyover.video-sync
flyover [1].text-split
task.typewriter
task.factory
task.decipher
task.color-attack
task.shape
task.speech
shape task.charts
task.and much more coming soon.
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:
npm install -g abeamer
However, in order to render frames, generate gifs and movies, it requires:
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 supports phantomjs
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
Try these examples online without any installation:
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
:
let 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:
const 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.
ABeamer command line utility is used to:
abeamer check
.abeamer create
.abeamer serve
.abeamer render
.abeamer gif
.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.
If you find this project useful, consider supporting it:
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.
MIT License
(c) 2018-2024 Alexandre Bento Freire