Javascript animate line and image - library - javascript

I have been researching a way to simultaneously animate a line and images.
see gif example here:
but I can not find any library to do this easily. I have attempted to use raw javascript but its too complicated and not working smooth. Do you have any libraries that can accomplish the animation shown in the gif? thanks

Probably the first example of animating a line like this is from Jake Archibald, who used SVG with a dashed stroke length that varied over time. This could be the basis of your vertical line. With a bit of modification it could use the scroll position instead of time.
There is a library specifically for this line animation technique called Vivus.
But if you're looking for a more full-featured SVG library that would give you a lot more options you could look at SnapSVG, Bonsai and Velocity.

Related

Paperjs problem with using custom paths as styling handles/segmentPoints

Example
Video Example
The lack of selection styling in paperjs makes you improvise and one way to style them, is to create them yourself ( recommended on this post).
But the huge con with this is the performance! Where canvas quickly goes from usable 60fps to terrible 20 within seconds. Now the only method I thought would work to style your handles/points, is now useless.
Now I'm out of ideas as to how style them and I'm trying to seek the help of stackoverflow... The main thing that I want to achieve is the hover effect on handles/points . At this point I coded the most of the stuff in paperjs, and I really wouldn't want to switch everything to something else like PixiJs.
P.S Any help is appreciated!
In your video, the frame rate goes down because you draw a lot of paths and this would also happen at some point even with the native Paper.js selection.
So your only chance is to try to have as few as possible shapes in your scene.
Maybe you can take advantage of the less known features of Paper.js to reduce them a bit:
item.selectedColor
paper.settings.handleSize
Then, there is also the possibility of using SymbolItem for repeted shapes (like your circles) that should have better performances than regular paths.
Finally, if you're out of solutions, you could also fork the library and hook into the selection drawing code to adapt to your needs :).

Best way to go about making "simple" line graphs with a very light footprint? jquery? canvas?

I'm trying to create line graphs like the one in the image below.
It needs to have a very light weight(in kb), and needs to have points that I could hover(for a tooltip about that point, like in the image). I don't need pie charts or anything like that, just line graphs like above.
I'm just not sure how to go about it best, I don't know canvas, and i'm assuming that might be pretty complex trying to do what I need with canvas. I know jQuery decently well.
I'm wondering: Is there a very light weight framework/plugin that would allow me to do just the bare essentials like in the image? If not, how would you suggest going about this with jQuery?
All I need are the lines drawn, with points that I could trigger a hover on, I can take care of the tooltip and all that, i'm just trying to figure out how to draw all the lines the match up with the grid, and get the little circle elements in the right position.
Thanks so much.
ps: light weight to me is not more than a few kb, because I want them to be interactive(not just a static image), but i'm not going to have so many of them that I need a huge jquery plugin, just something small.
Also: I'm trying to make it so it's responsive, and shrinks to fit a phones screen.
SVG sounds just like what you are looking for. You can use a library such as JQuery SVG or Raphael (based on Prototype.js) to make it easier.
Google Chart API is very solid and easy to use. Here is an example of a simple Line Chart
http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
You can also Interact with the charts you create:
https://google-developers.appspot.com/chart/interactive/docs/basic_interactivity
https://google-developers.appspot.com/chart/interactive/docs/events
I don't know how lightweight you could possibly get to do what you want, for that kind of thing I would normally use flot.
If you are not planning any manipulation on the graphs. Use a PHP library called pChart
Check out Google Charts. It looks like the perfect thing. It doesn't use flash, so it's smaller than some, and it has tooltips. As a bonus, you can use live data on the web.

Which js library to use for creating not complicated animation with html5 canvas?

I want to write some animation with html5 canvas element. I found that there are some js libraries that help to leverage canvas functionality. For example KineticJS, FabricJS. But I don't know which library to use.
What is pros and cons when using this libraries? Or may be you know even better implementation?
edit
I'm going to create something similar to static picture, but with piece оf animation. For example floating clouds on the sky, flower where you can tear off a petal and throw it. May be some animation with sun. This is general description, hope this helps.
There is Processing.js, which is a port of Processing for Java. Processing.js is ideal for 2d images.
Raphaël uses svg to draw images, which results in more compatibility.
For 3d there is Three.js, which uses both canvas and webgl.
There are a lot of different libraries around, you should first find out what you want to draw.
http://javascript.open-libraries.com/utilities/drawing/10-best-javascript-drawing-and-canvas-libraries/
cgSceneGraph is a javascript animation framework providing a full animation engine with timelines, animation keys, ...
It also provides helper methods to easily add animations on every attribute of an element.
The example on the home page of the website is exactly what you talk about, so it should fit your need :)
For simple animations forget the canvas and use position: absolute div elements with background image that you can move around with CSS transform translate3d and scale3d.

Magnifier effect for D3/GraphGL force directed network visualization?

Is it possible to create a smooth animated magnifying effect (similar to the dock on Mac OS X) when hovering over nodes in a force-directed graph visualization using the D3 or GraphGL libraries?
The nodes would need to expand and displace the others around it, while maintaining the force-directed layout.
If someone could fork this to demonstrate, that would be great! Thanks
note, this is different from a simple zoom as in this question
Great question. To answer it, I implemented a D3 plugin for fisheye distortion. It's roughly based on previous work in Flare and Sigma.js, which are in turn based on the work of Sarkar and Brown, "Graphical Fisheye Views of Graphs", CHI'92.
Here's a quick demo with the Misérables dataset. View source for the code. I'll do a writeup later today when I have time.
Note: this uses a static force layout; the layout is computed on startup and doesn't change. I think this is probably what you want in conjunction with fisheye distortion, or else the distortion will compete with your ability to move nodes around dynamically. But in theory it's possible to combine them, if that's what you want.
It'd be amazing if you could do this with pure CSS, but unfortunately it looks like attributes for various SVG elements (ie, circles) aren't reachable via CSS. Specifically 'radius', but I think this is true for a whole slew of SVG element properties.
But its not super hard to do via d3. Here is my example jsfiddle. Basically you do the following:
Use transitions (see Tutorial #2 to learn how to use these). Basically do a d3element.transition().delay(300).attr(...) to make the changes happen.
To keep the 'blown up' circles from overlapping the best I could figure out to do was to modify the force layout's charge setting. Increasing the repulsive forces when circles are larger.
Hopefully thats what you are looking for...
Pure css can do this if you accept it.
.app{
-webkit-transition-property:-webkit-transform;
-moz-transition-property:-moz-transform;
-transition-property:-transform;
-webkit-transition-duration:.15s;
-moz-transition-duration:.15s;
-transition-duration:.15s;
}
.app:hover{
-webkit-transform:scaleX(1.2) scaleY(1.2);
-moz-transform:scaleX(1.2) scaleY(1.2);
-transform:scaleX(1.2) scaleY(1.2);
}
It's used on my home page tuoxie.me

Shape tween in javascript

Is there a way to do a shape tween in javascript?
Using canvas maybe...
Shape tween as in Flash is harder to find than motion tween and simple attributes interpolation (like in JSTweener, Tween.lib, JQuery's animate(), d3's transition(), RaphaelJS's animate(), etc.). Those libraries, some cited in the other answers, don't do shape tweening.
You first need to know if you want to draw with SVG or with canvas and what library you will be using. Then, you need an interpolator, a function that will compute the transition between two given shapes, that can write a proper path in SVG or canvas. I wrote an implementation for SVG in D3.js to do some animated transitions between a lot of different shapes (using Gielis's superformula), if someone still need one. You can find an example here
If you will be doing graphics on the HTML 5 canvas element, you may want to check the Processing.js library. There is a tweening library, but you will probably find it helpful for many other things.
Processing.js uses JavaScript to draw
shapes and manipulate images on the
HTML 5 Canvas element. The code is
light-weight, simple to learn and
makes an ideal tool for visualizing
data, creating user-interfaces and
developing web-based games.
For tweening, you may want to have a look at the following:
Tween.lib - Motion Tweening for Processing.js
Motion Tweening for Processing.js
Some animated examples here combine motion|shape tweening using RaphaelJS. Check out the ones on the bottom:
http://raphaeljs.com/animation.html
For tweens in Javascript use http://coderepos.org/share/wiki/JSTweener
I use tween.js (http://learningthreejs.com/) a great library that will tween anything. If you already use jQuery I would also recommend looking into it's animate function.

Categories