Questions tagged [animation]

For questions related to graphical animations. This includes, but is not limited to sliding, tweening, rotating and resizing of shapes.

Filter by
Sorted by
Tagged with
5
votes
1answer
242 views

Retrocomputing scanline function

I need to refactor this code, targeted to Google Chrome (current+) to make it manageable going forward. Here is a working JSBin of the idea. The messiness comes from determining the accurate number ...
5
votes
1answer
330 views

A “pointless” animation program

The assignment description for this code is this: Each time the user clicks the Circles button, randomly colored circles flow into the display and continuously change their shapes. Here is a ...
5
votes
2answers
7k views

Elevator program code challenge

I recently applied for a job where the company gave me the following prompt for a code challenge. They have since told me "yeah, no thanks" but provided me with no feedback about why they came to that ...
5
votes
2answers
175 views

Consecutive animations

I'm new to Core Animations, I want to fade out two different layers one after another.I write them in a CATransaction block. I wonder if there is better approach to make such animations. ...
5
votes
2answers
204 views

AI to avoid obstacle

The AI I'm making is really simple, however it might be a bit too inefficient for what it is doing. The chart below shows speed differences between various arithmetic and math operations. ...
5
votes
1answer
107 views

Make a PPM chain showing a maze generated and solved

Beware: if you run this program with default configuration, it will produce from ~250 to ~1000 plain PPM images in the directory it's being run in, which all summed up will weigh ~4MB. These PPMs can ...
5
votes
1answer
214 views

Particle text directive

Directive that shows text as particles on a canvas. Looking for a general review. Plunker here. image.service.js: ...
5
votes
1answer
3k views

Toggling a CSS animation

I'm trying to toggle a dropdown box that will appear and disappear upon clicking the button. ...
5
votes
1answer
59 views

Tick module for the game

I tried to look up and suck in most of the information about optimizing this operation and this is what I came up with. As it's pretty much core of the game, I really would like to have it performant ...
5
votes
1answer
152 views

Animating a screw made up of elements

I am working on code to generate a screw made up of different elements and animating it by rotatation. The elements are so called conveying elements (denoted by GFA)...
5
votes
2answers
516 views

Simple animation method with requestAnimationFrame code structure

I'm writing a animate method to perform DOM animations. I know there are a lot of libraries out there that already does that (and I use some ideas of them) but I usually prefer writing my own code to ...
5
votes
1answer
975 views

Canvas animation of network nodes and edges

This code generates an animation that gives the idea of an ever changing network of nodes (each with different impact and possibly more than one color) connecting each other to create something. I ...
5
votes
1answer
552 views

Class(es) for animating objects on a canvas

I'm building a simple canvas animation engine as an exercise in learning ES6. Coming from C++ and Java, I miss static properties, but I've read that "Prototypes having data properties is generally ...
5
votes
1answer
8k views

Bouncing ball in JavaScript

I have been using this code for a while for a project at work. Actually I got it from a friends who got it from a book. But either way it worked for my demonstration. But the other night I decided to ...
5
votes
1answer
411 views

Rendering explosion of bouncing balls on a canvas

I'm making a particle engine that can spawn new explosions while keeping particles from previous ones active (until they despawn). The code works well on its own but within the game, two or more ...
5
votes
1answer
179 views

Hoc462 - A Raycaster

For the past week, I've been making a raycaster in JS and if you want a live demo, you can try it here. It ran smoothly before I added variable height walls but now it is very slow (~15 FPS) so I want ...
5
votes
1answer
59 views

Drawing a roaming figure in a field, with less flickering

I'm a student to programming. I currently just working a thing where the player can walk around a field of hashtags. so far you can only walk horizontally but before i go any further, i realized that ...
5
votes
2answers
155 views

Simple animation with Javascript and JQuery

I'm learning Javascript and JQuery, and just finished a chapter on JQuery animations.So i decided to give it a try and implement a simple animation on Html document i had. Here is the code: ...
5
votes
1answer
141 views

Animation Template Method for Snake Game

I have recently finished my first iteration of a template method implementation for a JavaScript canvas animation of the snake game. However, I would love for the community to critique this code and ...
5
votes
1answer
189 views

Smoother column resize, page reveal animation

I've been working on this site. The designers original inspiration for the column layout came from this site. I've been trying to get the animation as smooth as possible, to match the smoothness of ...
5
votes
1answer
1k views

Custom marquee consumes a lot of CPU power

I've a code which applies marquee to certain elements by using the requestAnimFrame method. However, when I test my application on a lower spec PC (Intel Celeron 2....
5
votes
1answer
94 views

Sprite is Refreshing

I am using "AndEngine" and I would like to know if I am following the best practice when I want to refresh the entity. Let say, I have 2 sprites and I want change them into 2 another sprites. I ...
5
votes
0answers
95 views

Calculate and apply realistic velocities when animating sprites

I am brand new to Scratch (and animation in general) and have been playing around with various techniques I feel will probably come in handy. My project in question can be viewed here. It started as a ...
4
votes
4answers
163 views

Animated scrolling to a place in the same webpage

I'm just beginning web design, and I've come up with this code to scroll to a place in the same page. I don't know if this can or should be improved much longer, so I'm asking for any tips that can ...
4
votes
3answers
383 views

Basic orbiting planets in P5.js

I started studying JavaScript about a week ago and I would like some opinions and advice on my code. This program just creates a canvas and instantiates 5 planets that orbit around a sun, giving them ...
4
votes
2answers
10k views

Python tkinter bouncing ball animation

In the current code, the animation is very unclear, and not "polished" (it doesn't run smooth). Can I make the animation smoother? And/or, why it doesn't run smooth? ...
4
votes
2answers
224 views

Cursor module for a text-editor

A few weeks ago, I had started to write a text-editor in C++ using SFML library. The work is now paused pretty much because I am a lazy freak. So, I thought I might use this passive time to get ...
4
votes
1answer
1k views

D3js: transition from stacked bar chart to bar chart with different datasets

Could I get some advice on the following D3 code that transitions a stacked bar chart into a bar chart with two different datasets? I would like to know how to write cleaner and more efficient code. ...
4
votes
2answers
735 views

JavaScript metaballs optimization

I created this basic metaball visualization in JavaScript. While it does look nice, it is very slow if you increase number of balls and/or make drawing area larger. I think that the performance is so ...
4
votes
2answers
2k views

GameLoop with requestAnimationFrame

I am creating a HTML game where you fight monsters and stuff and this is part of the game loop for dealing damage: ...
4
votes
2answers
153 views

Simple element slider animation tool

I'm new to jQuery and I've been messing about with this code, It works but I want to learn how to shorten the code by the eliminating unnecessary repeated code. Here is a link to JSFiddle HTML <...
4
votes
3answers
393 views

Sprite and AnimatedSprite

I have a Sprite class and an AnimatedSprite subclass, and I'd like to decouple these them and maintain substitutability, ...
4
votes
1answer
66 views

Android Java Splash Screen code

Here's my android splash screen. I am trying to figure out a better way to write it. It just moves the logo up to the center of the screen. It's my third time creating a splash screen for an android ...
4
votes
1answer
53 views

D3 animation explaining base-10 notation

This is my first D3 code. I am self-taught so I am not sure that the chaining of the transition follows the common best practices. Also, is there a way to avoid duplicating the "group" and the "anim" ...
4
votes
2answers
2k views

Animating the percent of a “percentage bar” during the transition

I have created a very basic animated percentage bar with HTML, CSS, and JS the only problem ...
4
votes
3answers
140 views

Switch questions using JavaScript and CSS

I am writing a Q&A wap page and want to switch questions in one page. This is my first time to write JS and CSS code, so I think there must be some improvement. ...
4
votes
1answer
1k views

Animated Score Amounts for Game

This is a simple class for a label with a score that animates counting up or down. When someone in the game scores points, the numbers count up or down to the new total. Here is an example of what ...
4
votes
2answers
1k views

Is this the correct approach to animation in Java?

I was fiddling with animation in Java and wrote this: ...
4
votes
1answer
638 views

Carousel for website

I have been building my own carousel over the past few days. I am not a jQuery guru, just an enthusiast, and I think my code is a little sloppy, hence the post. Basically what happens is: If someone ...
4
votes
1answer
50 views

Langton's ant in Clojurescript

The weekly coding challenge in Eric Normand's newsletter this week involves implementing Langton's ant. I wanted something on my screen so I put together a simple re-frame app. The core functions ...
4
votes
1answer
113 views

Sierpinski’s Gasket Triangle in JavaScript

I wrote the Sierpinski’s Gasket Triangle in JavaScript, but I feel the code can be better, especially from L32 to L47. Could you make it more organized? ...
4
votes
2answers
184 views

Lorentz Attractor visualization using functional programming

I have been working on this Lorenz Attractor visualization for the past day. I am currently also trying to change my coding style into a more functional programming one. I find it quite hard, to be ...
4
votes
2answers
134 views

JavaScript component to display ephemeral notifications

I would like to improve my code and organization of JS files so I'm wondering if you guys could tell me what I could do better. I've included a small but typical example of how I often use components. ...
4
votes
2answers
580 views

JavaScript animation effect stack

I am building a library that uses animations in a canvas. I need to apply effects to some objects in the canvas and I came up with an effect stack that contains each effect to be executed on a ...
4
votes
2answers
3k views

Animating opacity of 1400 Raphael.js objects hurts animating performance

I am animating 1400 objects trying to create a 'twinkling effect'. As the user moves the mouse faster more hexagon shapes pop into full opacity and have varying fade out rates. The version in the ...
4
votes
1answer
73 views

Screen transition effect like in Final Fantasy games

I've created a battle screen transition effect similar to Final Fantasy games, you can see it in action here: https://gilles-leblanc.github.io/ff8-transition/ I'm interested in code quality, ...
4
votes
1answer
73 views

Event triggers for animations using vanilla ES6

I'm new to JS and wanna know right code style or approach to cod Vanilla JS using ES6. To practice this, I'm using ESLint JS code-style of AirBnb and referencing clean-code-javascript repo. However, I ...
4
votes
1answer
1k views

Sprite animation with SDL2

For the past few days I've been trying to learn how to animate 2D sprites using SDL2. For that purpose, I've taken a 6 frames animation from a Pokémon game and made a PNG image out of it : The way I ...
4
votes
1answer
268 views

CSS3 Dropdown Menu (touch device or mouse compatible)

This may be rather basic, but I wanted to experiment and learn with some of the upcoming CSS3 techniques. I wasn't able to come up with an HTML/CSS only solution, and I had to work longer than I'd ...
4
votes
1answer
2k views

D3.js interpolating line on circumference of circle

For now, I've tried to make a line rotate on the path of a circle, but used setInterval multiple times and there might be other ways of achieving the same. I would ...

1 2 3 4 5 8