-
Recent Posts
Recent Comments
- R.P. Churchill on TWSL Series 07: Discovery and Data Collection
- R.P. Churchill on A Simulationist’s Framework for Business Analysis: Round Two
- LN on A Simulationist’s Framework for Business Analysis: Round Two
- R.P. Churchill on Starting to Learn About the Java Memory Model
- R.P. Churchill on Multidimensional Arrays in Javascript
Categories
Meta
May 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 31
Tag Archives: fast animation framework
Reproducing A Clever Animation Product, Part 20
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:
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 |
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
Reproducing A Clever Animation Product, Part 19
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
Reproducing A Clever Animation Product, Part 18
Yesterday I wrote about how you’re supposed to be able to process conditional function parameters in JavaScript:
1 2 3 4 5 |
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
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
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
Reproducing A Clever Animation Product, Part 15
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
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 12
If we have the full animation state specified for every animation step then one of the easiest things we can do is to change the speed of the animation by changing the increment, which is shown below. Clicking on any … Continue reading
Reproducing A Clever Animation Product, Part 11
Here is the updated version that uses the information in the bcTransformList to build the cleanest possible stream of transformation events in the bcActivitiesList. The need for a separate structure to hold the initial and final states of the animation … Continue reading