Tag Archives: animation

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 →

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

Reproducing A Clever Animation Product, Part 14

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

Today I shortened up the way transforms are specified. Rather than specify the type of transform and its explicit starting and ending values I combined the information using object literals. Here are the new specifications, each listed after the old … Continue reading →

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

Reproducing A Clever Animation Product, Part 13

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

Today I made sure the left and right arrows could be used to advance the animation forwards or backwards by the current increment. I also highlighted the increment on the buttons used to set it. I also learned that the … Continue reading →

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

Search for:
Recent Posts
Recent Comments
Categories
Meta
April 2024

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

« Jan

Tag Archives: animation

Recent Posts

Recent Comments

Categories

Meta