Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@bitty/animate
Advanced tools
Readme
@bitty/animate
Create and manage animation functions with AnimationFrame API.
This library is published in the NPM registry and can be installed using any compatible package manager.
npm install @vitorluizc/animate --save
# For Yarn, use the command below.
yarn add @vitorluizc/animate
This module has an UMD bundle available through JSDelivr and Unpkg CDNs.
<script src="https://cdn.jsdelivr.net/npm/@bitty/animate"></script>
<script>
// module will be available through `animate` function.
var animation = animate(function () {
// ...
});
animation.start();
</script>
Call animate
, the default exported function, with your callback and use returned object to manage your animation.
import animate from '@bitty/animate';
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const position = { x: 0, y: 0 };
const animation = animate(() => {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(position.x, position.y, 100 / 2, 0, 2 * Math.PI);
context.fillStyle = '#000000';
context.fill();
context.closePath();
});
window.addEventListener('mousemove', (event) => {
position.x = event.clientX;
position.y = event.clientY;
});
animation.start();
See this example on Codepen.
animate
The default exported function, which receives callback
as argument and returns an Animation
.
callback
is a synchronous function running into a AnimationFrame recursion.let count = 0;
const animation = animate(() => {
context.clearRect(0, 0, element.width, element.height);
context.font = '4rem monospace';
context.textAlign = 'center';
context.fillText(count, element.width / 2, element.height / 2);
count++;
});
animation.start();
See this example on Codepen.
export default function animate(callback: () => void): Animation;
Animation
An object returned by animate
function to manage your animations. It can start, stop and check if animation is running.
running
: A getter property that indicates if animation is running.
start()
: A method to start the animation.
stop()
: A method to stop the animation.
const animation = animate(() => { ... });
animation.start();
// Stops the animation after 10s
setTimeout(() => animation.stop(), 10 * 1000);
if (animation.running)
console.log('The animation is running...');
export interface Animation {
readonly running: boolean;
stop: () => void;
start: () => void;
}
Released under MIT License.
FAQs
Create and manage animation functions with AnimationFrame API.
The npm package @bitty/animate receives a total of 7 weekly downloads. As such, @bitty/animate popularity was classified as not popular.
We found that @bitty/animate demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.