一体化
动画
引擎.
一个快速且多功能的 JavaScript
库，用于动画 网络.
npm i animejs
赞助商
一体化
完整的
动画师工具箱
摆脱浏览器限制，使用单个 API 在网络上动画任何内容。
- timer
- easings
- draggable
- scroll
- scope
- waapi
- timeline
- stagger
- svg
- spring
- animation
增强的变换
使用通用的合成 API 平滑地混合各个 CSS 变换属性。
一个轻量级
和模块化的 API
仅导入您需要的部分，以保持捆绑包大小较小。
我们的赞助商
Anime.js 是 100% 免费的，并且仅在我们的赞助商的帮助下才有可能实现。
animate('.square', {
rotate: 90,
loop: true,
ease: 'inOutExpo',
});
animate('.shape', {
x: random(-100, 100),
y: random(-100, 100),
rotate: random(-180, 180),
duration: random(500, 1000),
composition: 'blend',
});
animate('.car', {
...createMotionPath('.circuit'),
});
animate(createDrawable('.circuit'), {
draw: '0 1',
});
animate('.circuit-a', {
d: morphTo('.circuit-b'),
});
animate(createDrawable('path'), {
draw: ['0 0', '0 1', '1 1'],
delay: stagger(40),
ease: 'inOut(3)',
autoplay: onScroll({ sync: true }),
});
const options = {
grid: [13, 13],
from: 'center',
};
createTimeline()
.add('.dot', {
scale: stagger([1.1, .75], options),
ease: 'inOutQuad',
}, stagger(200, options));
createDraggable('.circle', {
releaseEase: createSpring({
stiffness: 120,
damping: 6,
})
});
createTimeline()
.add('.tick', {
y: '-=6',
duration: 50,
}, stagger(10))
.add('.ticker', {
rotate: 360,
duration: 1920,
}, '<');
createScope({
mediaQueries: {
portrait: '(orientation: portrait)',
}
})
.add(({ matches }) => {
const isPortrait = matches.portrait;
createTimeline().add('.circle', {
y: isPortrait ? 0 : [-50, 50, -50],
x: isPortrait ? [-50, 50, -50] : 0,
}, stagger(100));
});
捆绑包大小
27.13 KB
- 定时器 5.60 KB
- 动画 +5.20 KB
- 时间线 +0.55 KB
- 可动画的 +0.40 KB
- 可拖动 +6.41 KB
- 滚动 +4.30 KB
- 作用域 +0.22 KB
- 错落 +0.48 KB
- SVG 0.35 KB
- 弹簧 0.52 KB
- WAAPI 3.50 KB
Funding goal
0%
Loading sponsors...
Help the project via