I am looking for a javascript animation framework. I have found some:
http://www.pixijs.com/
http://phaser.io/
http://paperjs.org/
These all are good.
But I would like a GUI based animation creater framework, so that I can create translation, scale and frame animations. That will allow me easily create basic animations without having to write much code.
Something like cocos studio for cocos2d.
If you guys, know any such framework, please let me know. Thanks.
If you need some animations libraries, here are some good ones:
Greensock: https://greensock.com/
Velocity.js: http://julian.com/research/velocity/
If you want to create animations in a GUI, things to consider:
Adobe Edge (paid): https://creative.adobe.com/products/animate
Bouncejs: http://bouncejs.com/
CSS Animate: http://cssanimate.com/
I wrote a very simple library based on request animation frame that can basically animate anything you want as it only returns number values over specified time according to the specified easing.
https://github.com/alanbo/animate.js
I have created one, which is very simple and small
https://github.com/allenhwkim/jsanimation
Usage
import {slideInRight} from 'jsanimation';
slideInRight(el);
Related
I have been using react to build out an editor. One of the configurable properties is to dynamically generate background color animation. For example, an infinite fade in and fade out with a x second period.
The problem is that the color animation needs to be same and synchronized in multiple views. CSS animations does not enable that synchronization without being hacky. I want to use 'react-motion' but it does not incorporate timing easily.
Looking for some concrete examples using react + react libraries (ideally react-motion). Thanks in advance.
Not a direct answer to your request for examples using react + react libraries, but, if you're rendering on the client/browser you can use a global var for keeping sync between views. If that is too "hacky" for you, then perhaps finding a common parent up the ladder that both views can be handed a synchronized var/value.
After doing quite a bit of research into all of this, it turns out that the answer is just working at the animation frame level.
CSS animations abstracts all of this away from devs but as a result it gives very little control between animations.
React Motion react-motion while a good library for dealing with transition animations (it's intended purpose) again does not address controls between animations.
They key though exists in the react-motion code. You just have to request animation frames one after the other using raf library and then calculate the animations per view using the common frame info. It's pretty tedious and no real generic solution here.
I'm trying to find a way to replace the flash animaton on this page http://www.autopulsen.se/ into jQuery. I could cut the images out and rotate them with javascript but it would require major changes in code. Basically I want to keep the same look without flash.
Is this possible?
Yes, you can.
Your starting point would be having a look at this site, there are a lot of zoom plugins on there, which is the main feature of that flash menu. Then you would want to chain the JQuery Shake effect, and maybe look at the fade effect.
To achieve the slanted look you will want to use the skew css selector as featured here.
I'll throw in GreenSock Animation Platform:
www.greensock.com/gsap-js
which may be worth a look, especially if there's the option of paying for a commercial license, as that includes a pretty nifty throwProps plugin.
you can use CSS3 animation but this one i think so good and hard to built in css3
anyway
giving you some animation generator
ceaser
CSS3animationGenrator
Css3Maker
and this one for Inspiration
At DesignShack
I´m currently developing my first jQuery Plugin. It´s called Fraction Slider and is a Slideshow-Framwork which allows you to animate unlimited elements (with different animations, delay, etc) per slide.
Here you can find a small demo, and also the documentation:
Demo
It´s also hosted in the jQuery Plugin repository
So, introduction is over ;)
Now i have a few question:
The general code. What could i improve, what should be replaced, etc.
As you can see, when us different animations, delays, speeds etc. the html tag for each element will have an awfully lot of data-... attributes. I would like to make that a bit more easy and maybe with less markup (damn, i dont know how to say this in english).
How could i do that - any ideas or suggestions?
What should i add to the plugin? I was think about pager/controls, fading and simple show/hide effect and maybe making it responsive.
Last but not least: i would be happy to get some general feedback about the plugin and its realization.
Looks like it doesn't support chaining. e.g.
$('.step-slider').fractionSlider().remove();
I am making a game and I want to animate my character(attacking, walking, etc) but I don't have an idea on how to do it. I know it is not for loop because if it is, the animation will play in an instant you won't be able to see it. I have downloaded a sample sprite sheet and I will test on it once I learn how to do it.
You can obtain sprites animation using CSS3's steps() function where supported. Or a plain javascript approach using timers (setTimeout, setInterval).
Here a simple examples of both: http://codepen.io/anon/pen/hCeuG
However for the JS part, it's better if you have a single game loop where you update your animation, that it's just an example. You can find a very deep explanation about javascript game loop here: http://nokarma.org/2011/02/02/javascript-game-development-the-game-loop/index.html
there are making JS based gaming libraries available that exists for the sole purpose of making games easier. you should be using one of them.
I have worked on some of them and I like CreateJS with extensive support of sounds and spritesheets.
in fact you can create spritesheets on fly using animations
You can use Free sprites or try to make it with Photoshop ( if you are pro ! ) or Sprite Maker ( for Basic users ! )
for 3D Models you can use
I was also in such situation.
CreateJS was very much helpful for me.
This library has avery good documentation on handling sprite-sheet and bitmap animation.
EaselJS has examples with source code to show how to use the sprite sheet in your game.
Another blog which was helpful for sprite sheet manipulation was by David Rousset: HTML5 Gaming: animating sprites in Canvas with EaselJS
I think these could be helpful for you
I'm looking for a simple Flex or JavaScript based image editing component which can be embedded in a web application. It shouldn't be a web service but rather a component that I can download and customize (i18n etc.).
I only need some basic features: most important is cropping, optional features would be rotating and adjusting brightness/contrast.
Basically something like splashup.com, but as an open source application rather than a web-service.
Thanks a lot in advance for any hints!
-- Andreas
There is pixastic.
Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript.
Be sure to read the documentation to make sure the operations you are looking to perform are supported by all browsers. There are some issues with IE.
They have a editor you can try. It shows off some of the features.
Your question suggests you want an out of the box solution, or at least a base to stand on.
Quick Google search reveals editImage. This doesn't look polished or bug free, however building on this or rolling your own should not be difficult.
Here is a good article on Image Manipulation in Flex. Towards the end of it read "Cropping, Panning and Zooming", your basically looking at 5 lines of code. I think you might even be happier building this yourself.
Thanks for your answers!
I ended up customizing and extending this component:
http://blog.mediablur.com/2008/02/20/flex-image-cropping-component/