JS transitions with setInterval

Question

I know that there is the css transition, but I want to apply the transition on a text (and that thing can't be made in css). And I want a custom transitions.

Can you give me a website where you draw the curve and it gives you the js calculations?(Or something like that)

score 1 · Answer 1 · answered May 23 '12 at 07:25

1

When I working with some visual feature I need to set the float number to table cell. Not native set, but with animation: 0.1 .0.15.. 0.2... 0.3....................... 1 with short intervals. Flickering. I use thomething like this:

 value = 150
 step = value / 50; // 50 iterations, use preffered for you    
 timer_id = setInterval(function()
 {
   next_iteration += step
   if (next_iteration >= value)
   {
     next_iteration = value
   }
   field.text(next_iteration)
   if (next_iteration >= value)
   {
     clearInterval(timer_id);
     return true
   }
 }, 0 /* zero or more, this is pause between iterations */)

answered May 23 '12 at 07:25

odiszapc

4,089
2
27
42

It's good, but this is linear transition. Even if I change 50, it will still be linear. Could you give an ease-in-out exemple? – user1365010 May 23 '12 at 07:32
I am not JS guru. I have some problems while i use above way to set multiple values at the same time: local variables has benn overwritter by each other. To fix this I have transform all local variables to single array keyed by "value". After that all parralel iterations become working with separate variable. Sorry for my bad english, guys... – odiszapc May 23 '12 at 07:32
Yes, it's linear. Hm... easy in out is more complicated... I think you need to calculate the step or pause value with a parabola or hyperbole equations: "next_iteration += step" to "next_iteration = hyperbole_formula(step)" – odiszapc May 23 '12 at 07:34
Yes, but all my question is how to write this hyperbole_formula function. – user1365010 May 23 '12 at 07:38

score 1 · Accepted Answer · edited May 23 '17 at 12:10

1

You should definitely see at "Math: Ease In, ease Out a displacement using Hermite curve with time constraint". May be this question is a bit different from yours, but there was given a good link to "Interpolation Tricks" which in turn may clarify the "Easy In/Out" technique for you. The link is worth to see it indeed.

edited May 23 '17 at 12:10

Community

1
1

answered May 23 '12 at 07:46

Sergei Danielian

4,938
4
36
58

score 0 · Answer 3 · answered May 23 '12 at 07:24

0

you can make text transitions in css3, for demos visit here

answered May 23 '12 at 07:24

Neji

6,591
5
43
66

score 0 · Answer 4 · edited May 23 '17 at 11:54

0

Basic transitions can be done with Jquery´s animate(); If you want more complex paths i guess that will not fir your needs.

But there was a similar question: Complex animation in jQuery

refering to: http://weepy.github.com/jquery.path/

edited May 23 '17 at 11:54

Community

1
1

answered May 23 '12 at 07:24

Sidrich2009

570
1
4
11

score 0 · Answer 5 · answered Mar 24 '17 at 00:52

i know this is old, but... try using some equations to work out the position at a particular point in the movement using ease in out equations. Here's one i found for cubic ease in out

Math.easeInOutCubic = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t*t + b;
    t -= 2;
    return c/2*(t*t*t + 2) + b;
};

this combined with the seInterval function can be very effective and gives you loads of control. just ask if you want more info...

JS transitions with setInterval

5 Answers5