Category Archives: Tools and methods

Reproducing A Clever Animation Product, Part 24

Posted on July 13, 2016 by R.P. Churchill

Today I added a new effect and applied it to a top tween that makes up the latest addition to the animation. The effect is based on this equation from the first class you take in physics: x = xo … Continue reading →

Reproducing A Clever Animation Product, Part 23

Posted on July 12, 2016 by R.P. Churchill

Today I changed the form of specifying a tween effect. It was originally specified as a string (e.g., “linear” or “vibrate_right”) but now it is defined as an object literal. The first member field of the object has to be … Continue reading →

Posted in Tools and methods | Tagged animation, fast animation framework, JavaScript | Leave a comment

Reproducing A Clever Animation Product, Part 22

Posted on July 11, 2016 by R.P. Churchill

I want to make the handling of the mMethod parameter in the bcDefineWhateverTween function more flexible and modular. As you can see in the code below, the parsing of the different types of methods or applied effects has to be … Continue reading →

Posted in Tools and methods | Tagged animation, fast animation framework, JavaScript | Leave a comment

Reproducing A Clever Animation Product, Part 21

Posted on July 7, 2016 by R.P. Churchill

The last subject I wanted to explore was animation effects, which is to say defining tweens that proceed from beginning to end in a fashion that is other than linear, which is the default I’ve been using to this point. … Continue reading →

Posted in Tools and methods | Tagged animation, fast animation framework, JavaScript | Leave a comment

Reproducing A Clever Animation Product, Part 20

Posted on July 6, 2016 by R.P. Churchill

Today I added the capability of adding a rotation tween, which I applied to a fourth element at the end of the previous animation. The tween definition is here:

      function bcDefineRotateTween(sElement,pStart,pEnd,tBegin,tDuration,mMethod) {
        var s = sElement+".style.transform='rotate("+pStart+"deg)';";
        var alpha = Math.round(tBegin * 60.0);
        var steps = Math.round(tDuration * 60.0);
        var omega = alpha + steps;
        var increment = (pEnd - pStart) / steps;
        var angle = pStart;
        var index = bcActivitiesList[0].length-1;
        if ((alpha > 0) && (!bcChainFlag)) {
          for (var i=0; i<alpha; i++) {    //>
            bcActivitiesList[i][0] = bcActivitiesList[i].push(s);
          }
        }
        if (!bcChainFlag) {
          index++;
        }
        for (var i=alpha; i<=omega; i++) { //>
          s = sElement+".style.transform='rotate("+angle+"deg)';";
          bcActivitiesList[i][0] = index+1;
          bcActivitiesList[i][index] = s;
          if (mMethod == "linear") {
            angle += increment;
          }
        }
        for (i=omega+1; i<=bcFinalActivity; i++) {
          bcActivitiesList[i][0] = index+1;
          bcActivitiesList[i][index] = s;
        }
        bcClearChainFlag();
      }

function bcDefineRotateTween(sElement,pStart,pEnd,tBegin,tDuration,mMethod) {

var s = sElement+".style.transform='rotate("+pStart+"deg)';";

var alpha = Math.round(tBegin * 60.0);

var steps = Math.round(tDuration * 60.0);

var omega = alpha + steps;

var increment = (pEnd - pStart) / steps;

var angle = pStart;

var index = bcActivitiesList[0].length-1;

if ((alpha > 0) && (!bcChainFlag)) {

for (var i=0; i<alpha; i++) { //>

bcActivitiesList[i][0] = bcActivitiesList[i].push(s);

}

if (!bcChainFlag) {

index++;

}

for (var i=alpha; i<=omega; i++) { //>

s = sElement+".style.transform='rotate("+angle+"deg)';";

bcActivitiesList[i][0] = index+1;

bcActivitiesList[i][index] = s;

if (mMethod == "linear") {

angle += increment;

}

for (i=omega+1; i<=bcFinalActivity; i++) {

bcActivitiesList[i][0] = index+1;

bcActivitiesList[i][index] = s;

}

bcClearChainFlag();

}

Here’s the code added to handle rotations in the addTransformToList … Continue reading →

Posted in Tools and methods | Tagged animation, fast animation framework, JavaScript | Leave a comment

Reproducing A Clever Animation Product, Part 19

Posted on July 5, 2016 by R.P. Churchill

Today I finally finished handling adjustments to the starting time of events in the animation, using the same syntax as the Greensock product I’ve been emulating. In order to do this cleanly I chose to build a separate list of … Continue reading →

Posted in Tools and methods | Tagged animation, fast animation framework, JavaScript | Leave a comment

Reproducing A Clever Animation Product, Part 18

Posted on June 29, 2016 by R.P. Churchill

Yesterday I wrote about how you’re supposed to be able to process conditional function parameters in JavaScript:

      function addTransformToList(sElement,tDuration,trans,tAdjustment,mMethod) {
        var tAdjustment = typeof tAdjustment !== "undefined" tAdjustment : "";
        var mMethod = typeof mMethod !== "undefined" mMethod : "linear";
        ...
      }

function addTransformToList(sElement,tDuration,trans,tAdjustment,mMethod) {

var tAdjustment = typeof tAdjustment !== "undefined" tAdjustment : "";

var mMethod = typeof mMethod !== "undefined" mMethod : "linear";

...

}

The teeeensy little problem is that neither browsers nor syntax checkers in certain development tools (WebStorm, in my case, I used it … Continue reading →

Posted in Tools and methods | Tagged animation, conditional parameters, fast animation framework, JavaScript | Leave a comment

Reproducing A Clever Animation Product, Part 17

Posted on June 28, 2016 by R.P. Churchill

In the interest of making these writings fit with my schedule today and tomorrow I’m going to take a brief detour and describe the next change before completing the one that’s in progress. This will also cover something I’ll be … Continue reading →

Posted in Tools and methods | Tagged animation, default parameters, fast animation framework, JavaScript | Leave a comment

Reproducing A Clever Animation Product, Part 16

Posted on June 27, 2016 by R.P. Churchill

Today I wanted to further rearrange the transition definitions so they more closely matched those used by the Greensock animation product I’ve been emulating. A screenshot from their demo video is shown here: The next step is to move the … Continue reading →

Posted in Tools and methods | Tagged animation, fast animation framework, JavaScript | Leave a comment

Reproducing A Clever Animation Product, Part 15

Posted on June 23, 2016 by R.P. Churchill

After completing yesterday’s post I started digging into combining multiple CSS transforms for individual elements. I was inspired to do this because I realized that if multiple transforms were applied to an element then the string returned by referencing element.style.transform … Continue reading →

Posted in Tools and methods | Tagged animation, css transforms, fast animation framework, JavaScript | Leave a comment

Search for:
Recent Posts
Recent Comments
Categories
Meta
October 2025

M T W T F S S

1 2 3 4 5

6 7 8 9 10 11 12

13 14 15 16 17 18 19

20 21 22 23 24 25 26

27 28 29 30 31

« Jan

Category Archives: Tools and methods

Recent Posts

Recent Comments

Categories

Meta