Simple PixiJS Animation Example 6 - Pixijs-animation Typing CST Test
Loading…
Simple PixiJS Animation Example 6 — Pixijs-animation Code
A PixiJS animation moving a circle along a sine wave
# pixijs/demo/App6.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
</head>
<body>
<script>
const app = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(app.view)
const circle = new PIXI.Graphics()
circle.beginFill(0xffff00)
circle.drawCircle(0,0,30)
circle.endFill()
circle.x = 0
circle.y = 300
app.stage.addChild(circle)
let t = 0
app.ticker.add(() => {
t += 0.05
circle.x = t * 100
circle.y = 300 + Math.sin(t)*100
})
</script>
</body>
</html>Pixijs-animation Language Guide
PixiJS Animation refers to the animation capabilities of the PixiJS rendering engine, including sprite animations, frame-based MovieClips, tick-based updates, timeline systems, and GPU-accelerated WebGL motion. It enables high-performance 2D animations for games, interactive apps, and real-time graphics.
Primary Use Cases
- ▸Animating 2D game characters or sprites
- ▸Interactive UI transitions in WebGL
- ▸Frame-based animation using MovieClips
- ▸Physics-driven or code-driven motion
- ▸Real-time scene updates (games, dashboards)
Notable Features
- ▸High-speed WebGL renderer
- ▸Ticker-based game loop
- ▸MovieClip for frame animations
- ▸Support for Spine and DragonBones
- ▸GPU-accelerated transforms, filters, and effects
Origin & Creator
Originally created by Goodboy Digital (Matt Karl & co.) around 2013 as a high-performance WebGL 2D renderer.
Industrial Note
PixiJS Animation is widely used in casino slot games, educational games, marketing microsites, interactive billboards, and real-time dashboards where smooth WebGL animation is essential.