同时使用scaleX和translationX（VelocityJS）

Question

I have a bar that is filled from a certain percentage to another percentage (0% - 50%). I want to smoothly animate this towards a new range (25% - 55%). This means both the width and the location of the bar will need to be changed. I'm having some trouble doing both of these smoothly at the same time.

After some research I found I needed to use scaleX to smoothly animate the width and translateX to smoothly animate the location (where translateX is also affected by the scale). The problem that occurs now is that the bar will overstep it's desired percentage (55%) and then move back as shown in the snippet below.

 /* Button function to restart. */ const restart = () => { animate(); } const animate = () => { /* Reset the bar to its starting position. (from 0% - 50%) */ Velocity(document.getElementById('movingBar'), { scaleX: 0.5, translateX: 0 }, { duration: 0, easing: [0, 0, 1, 1] }); /* Move the bar to its final position. (from 25% - 55%). */ /* Split into two velocity calls so that they can have a seperate duration/easing if needed. */ Velocity(document.getElementById('movingBar'), { scaleX: 0.30 }, { duration: 1000, easing: [0, 0, 1, 1], queue: false }); Velocity(document.getElementById('movingBar'), { translateX: (25 / 0.30) + '%' }, { duration: 1000, easing: [0, 0, 1, 1], queue: false }); }; /* Start animation on run. */ animate(); 

 #root { width: 700px; height: 100%; } #container { width: 100%; height: 90px; background-color: #000000; } .bar { width: 100%; height: 30px; transform: scaleX(0.5); transform-origin: left; background-color: #FF0000; } #description { display: flex; } .percentage { display: flex; justify-content: flex-end; width: 10%; height: 20px; text-align: right; } .odd { background-color: #DDDDDD; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script> <div id='root' style='width: 100%; height: 100%'> <div id='container'> <div class="bar" style="background-color: #00FF00;"></div> <div id='movingBar' class="bar"></div> <div class="bar" style="background-color: #00FF00; transform: scaleX(0.30) translateX(calc(25 / 0.30 * 1%))"></div> </div> <div id='description'> <div class="percentage even">10%</div> <div class="percentage odd">20%</div> <div class="percentage even">30%</div> <div class="percentage odd">40%</div> <div class="percentage even">50%</div> <div class="percentage odd">60%</div> <div class="percentage even">70%</div> <div class="percentage odd">80%</div> <div class="percentage even">90%</div> <div class="percentage odd">100%</div> </div> <button onClick="restart()">restart</button> </div> 

The example shows the starting position in the top green bar, and the desired position it should animate to in the bottom green bar. The middle red bar is the bar that should animate from the starting position to the desired position. As you can see the red bar reaches the desired result eventually but not before going over 55% for a bit. I'm using VelocityJS to animate at the moment.

Any idea what I'm doing wrong or how I would go about animating this? Is there some calculation I need to do to the duration/easing to correct whatever is going wrong?

Answer 1

The issue is related to how the interpolation of values is done. It would be a hard work to make sure to have a global linear transformation using scaleX and translateX because you cannot control the interpolation of values and the browser will do this for you. so either you do a complex calculation of the duration/easing to find a perfect result or you consider another kind of animation.

For such situation I would consider clip-path even if the support isn't optimal but it will be easier to handle since you have only one property to animate and you don't need any complex calculation as you simply have to use the percentage of the graph.

Here is a simplified example:

 body { background:#000; } .box { height:50px; background:red; clip-path:polygon(10% 100%,10% 0, 40% 0,40% 100%); /*from [10% 40%]*/ transition:1s all; } body:hover .box { clip-path:polygon(50% 100%,50% 0, 60% 0,60% 100%); /*to [50% 60%]*/ } 

 <div class="box"> </div> 

Answer 2

I started with the math while trying to find an answer and got this for translation easing which is almost perfect: [1/3, 0.2, 2/3, 1 - (8/15)];

I calculated those by created a formula for what the translation path should look like 25x / (-0.2x + 0.5) . I then divided it by 83.333333 to get the desired translation formula in a [0, 1] window. I then used the formula of (25x / (-0.2x + 0.5)) / 83.333333 to calculate the cubic-bezier points which I used above. Note that I do 1-C2y for the 4th point, not sure why but otherwise it wouldnt work.

NOTE: This worked for the original problem above but fails to work when the scale changes from anything other than 0.5 - 0.3. I'm still figuring out why.

 /* Button function to restart. */ const restart = () => { animate(); } const desiredX = 0.5; let desiredYScale = 0; let desiredYTranslation = 0; const animate = () => { const barMax = 100; const scaleStart = 0.5; const scaleEnd = 0.4; const offsetStart = 0; const offsetEnd = 10; const translationStart = 100 / barMax * offsetStart / scaleStart; const translationEnd = 100 / barMax * offsetEnd / scaleEnd; const dataS = {}; const dataT = {}; const F = 0.5; const scaleFormula = ((-scaleStart + scaleEnd) * F + scaleStart); //console.log("scale formula: ", scaleFormula); const translationPath = (offsetEnd * F) / scaleFormula; const diffPath = translationPath - (offsetEnd / scaleEnd * F); const diffFormulaA = - (diffPath / (F * F)); const diffFormula = (diffFormulaA/diffPath) * (F - 0.5) * (F - 0.5) + 1 const diffA = diffFormulaA / diffPath; const cX = 0.5; const cY = 0.5 * Math.abs(diffA); const cAx = 2/3 * cX; const cAy = 2/3 * cY; const cBx = 2/3 * cX + 1/3 * 1; const cBy = 2/3 * cY + 1/3 * 1; const multiplicant = 0.5; const realCAX = cAx / cBy * multiplicant; const realCAY = cAy / cBy * multiplicant; const realCBX = 1 - (cBx / cBy * multiplicant); const realCBY = cBy / cBy * multiplicant; console.log("realCAX: ", realCAX); console.log("realCAY: ", realCAY); console.log("realCBX: ", realCBX); console.log("realCBY: ", realCBY); const linearEasing = [0, 0, 1, 1]; //const one = 0.5 + (scaleEnd / 4); //const two = 0.525 - (scaleStart - scaleEnd); //const one = 0.40 + 0.025 / (0.5 - (scaleStart - scaleEnd)); //console.log("One: ", one, (scaleStart - scaleEnd)); //const one = 0.5; //const one = 0.535; //const one = 0.5; const one = 0.5; const two = 0.1; //const two = 0.125; //const translationEasing = [0.33, 10, 0.66, 16]; //const translationEasing = [1/3, 0.2, 2/3, 1-(8/15)]; //const translationEasing = [1/3, 1/15, 2/3, 1-0.4]; //const translationEasing = [0.24, 0.06666, 0.85, 0.1]; //const translationEasing = [0.33, 1.33, 0.66, 1.66]; //const translationEasing = [0.2, 0.8, 0.4, 1]; //const translationEasing = [0.1, 0.4, 1-0.2, 0.5]; //const translationEasing = [realCAX, realCAY, realCBX, realCBY]; //const translationEasing = [1/3, 0.0833333, 2/3, 0.42]; const translationEasing = [one, two, 1-two, 1-one]; //const translationEasing = [0, 0, 1, 1];5 /* Reset the bar to its starting position. (from 0% - 50%) */ Velocity(document.getElementById('movingBar'), { scaleX: scaleStart, translateX: translationStart + '%' }, { duration: 0, easing: linearEasing }); /* Move the bar to its final position. (from 25% - 55%). */ /* Split into two velocity calls so that they can have a seperate duration/easing if needed. */ Velocity(document.getElementById('movingBar'), { scaleX: scaleEnd }, { duration: 1000, easing: linearEasing, queue: false, progress: function(elements, complete, remaining, start, tweenValue) { dataS[complete] = scaleStart + ((scaleEnd - scaleStart) * complete); } }); Velocity(document.getElementById('movingBar'), { translateX: translationEnd + '%', tween: translationEnd }, { duration: 1000, easing: translationEasing, queue: false, progress: function(elements, complete, remaining, start, tweenValue) { dataT[complete] = translationStart + ((translationEnd - translationStart) * complete); console.log("TWEEN", complete, tweenValue); }, complete: function() { //console.log("DONE!"); //console.log("SCALE:"); //if (desiredX in dataS) { //console.log('Scale[0.5]: ', dataS[desiredX], ', Translation[0.5]: ', dataT[desiredX]); //desiredYScale = dataS[desiredX]; //desiredYTranslation = dataT[desiredX]; //} else { //animate(); //} for (const key in dataS) { if (dataS.hasOwnProperty(key)) { //console.log('', key, ': ', dataS[key]); } } //console.log("TRANSLATION:"); for (const key in dataT) { if (dataT.hasOwnProperty(key)) { //console.log('', key, ': ', dataT[key]); } } } }); }; /* Start animation on run. */ animate(); 

 #root { width: 700px; height: 100%; } #container { width: 100%; height: 90px; background-color: #000000; } .bar { width: 100%; height: 30px; transform: scaleX(0.5) transform (calc(20 / 0.5 * 1%)); transform-origin: left; background-color: #FF0000; } #description { display: flex; } .percentage { display: flex; justify-content: flex-end; width: 10%; height: 20px; text-align: right; } .odd { background-color: #DDDDDD; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script> <div id='root' style='width: 100%; height: 100%'> <div id='container'> <div class="bar" style="background-color: #00FF00; transform: scaleX(0.5) translateX(calc(0 / 0.5 * 1%))"></div> <div id='movingBar' class="bar"></div> <div class="bar" style="background-color: #00FF00; transform: scaleX(0.4) translateX(calc(10 / 0.4 * 1%))"></div> </div> <div id='description'> <div class="percentage even">10%</div> <div class="percentage odd">20%</div> <div class="percentage even">30%</div> <div class="percentage odd">40%</div> <div class="percentage even">50%</div> <div class="percentage odd">60%</div> <div class="percentage even">70%</div> <div class="percentage odd">80%</div> <div class="percentage even">90%</div> <div class="percentage odd">100%</div> </div> <button onClick="restart()">restart</button> </div>