简体   繁体   English

使用 JavaScript 为 MathJax 方程设置动画

[英]Using JavaScript to animate MathJax equation

I would like to perform a seamless animation which gives the impression of substituting variables into an expression step by step.我想执行一个无缝动画,给人一种将变量逐步代入表达式的印象。 However there are a few issues that make it rather ugly.然而,有一些问题使它变得相当丑陋。

  1. When an element fadesOut the element below moves upward one position.当一个元素淡出时,下面的元素向上移动一个位置。 How can I get the element to stay where it is?我怎样才能让元素保持原样?

  2. Aesthetically it is a bit ugly.从美学上看,它有点丑陋。 If anyone could guide me to resources to make it more elegant that would be great.如果有人可以指导我找到资源以使其更优雅,那就太好了。 Also if you have an idea to make it prettier using JS please give it a try!另外,如果您有使用 JS 使它更漂亮的想法,请尝试一下!

 $('#next').hide(); $('#next2').hide(); $('#next3').hide(); $('#next4').hide(); $('#next5').hide(); $('#next6').hide(); $('#next7').hide(); $('#next8').hide(); $('#next').fadeIn(1000); $('#start').fadeOut(1000); $('#next4').fadeIn(3000); $('#next').fadeOut(1000); $('#next3').fadeIn(4000); $('#next5').fadeIn(4000); $('#next3').fadeOut(1000); $('#next4').fadeOut(3000); $('#next6').fadeIn(5000); $('#next5').fadeOut(3000); $('#next6').fadeOut(6000); $('#next7').fadeIn(13000); $('#next7').fadeOut(1000); $('#next8').fadeIn(15000);
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_CHTML"></script> <div id="equation"> <h2 id="start">`KE_{rot} = \\frac1 2 I \\omega^2`</h2> <br> <h2 id="next">`\\omega =sqrt(2\\alpha \\Delta degrees)`</h2> <br> <h2 id="next2">`KE_{rot} = \\frac1 2 I sqrt(2\\alpha \\Delta degrees)`</h2> <br> <h2 id="next3">`\\alpha = frac\\{tau_{max}} {I}`</h2> <br> <h2 id="next4">`KE_{rot} = \\frac1 2 I \\sqrt{(2 (\\frac{\\tau_{max}} {I}) \\Delta degrees)}^2`</h2> <br> <h2 id="next5">`KE_{rot} = \\frac1 2 I \\(2 (\\frac{\\tau_{max}} {I}) \\Delta degrees)`</h2> <br> <h2 id="next6">`KE_{rot} = \\tau_{max}\\Delta degrees`</h2> <br> <h2 id="next7">`\\tau_{max} = I \\alpha`</h2> <br> <h2 id="next8">`KE_{rot} = I \\ \\alpha \\ \\Delta degrees`</h2> </div>

I would ditch using <h2> and <br> tags.我会放弃使用<h2><br>标签。 Have a collection of <div> sets that will serve as slides.拥有一组将用作幻灯片的<div>集。 Give each one the slide class.给每个人上slide课。 Put which equations you want to display on each slide.把你想在每张幻灯片上显示的方程式。 Do some fancy stuff with Array.prototype.reduce and Promise s to transition between slides.Array.prototype.reducePromise做一些奇特的事情来在幻灯片之间转换。

 $(function() { // I have no idea why jQuery doesn't have a reduce function $.fn.reduce = Array.prototype.reduce; // Create a chain of promises function waterfall(arr, action) { arr.reduce(function(prev, next) { return prev.then(function() { return action(next); }); }, Promise.resolve()); } // Function to actual fade an element in/out and return a promise function fader(el) { return new Promise(function(resolve, reject) { $(el).fadeIn(2000).promise().done(function() { this.fadeOut(1000).promise().done(function() { resolve(); }); }); }); } // Bootstrap waterfall($(".slide"), fader); });
 .math-set { text-align: center; } .slide { display: none; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=AM_CHTML"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="math-set"> <div class="slide"> <div>`KE_{rot} = \\frac1 2 I \\omega^2`</div> </div> <div class="slide"> <div>`\\omega =sqrt(2\\alpha \\Delta degrees)`</div> <div>`KE_{rot} = \\frac1 2 I sqrt(2\\alpha \\Delta degrees)`</div> </div> <div class="slide"> <div>`\\alpha = frac\\{tau_{max}} {I}`</div> </div> <div class="slide"> <div>`KE_{rot} = \\frac1 2 I \\sqrt{(2 (\\frac{\\tau_{max}} {I}) \\Delta degrees)}^2`</div> <div>`KE_{rot} = \\frac1 2 I \\(2 (\\frac{\\tau_{max}} {I}) \\Delta degrees)`</div> </div> <div class="slide"> <div>`KE_{rot} = \\tau_{max}\\Delta degrees`</div> </div> <div class="slide"> <div>`\\tau_{max} = I \\alpha`</div> <div>`KE_{rot} = I \\ \\alpha \\ \\Delta degrees`</div> </div> </div>

The jQuery hide() changes the display property to 'none'. jQuery hide()将显示属性更改为“无”。 The fadeOut does the same thing when it finishes.当它完成时, fadeOut做同样的事情。 This causes the element to be removed from the layout entirely, causing the next one to shift upward.这会导致元素从布局中完全移除,从而导致下一个向上移动。

There are a couple of approaches you could take to fix this.您可以采用几种方法来解决此问题。 One would be to animate the opacity property directly instead of using the fadeOut shortcut.一种方法是直接为 opacity 属性设置动画,而不是使用fadeOut快捷方式。 For example, .animate({opacity: 0}) .例如, .animate({opacity: 0})

Another possible way of handling this, possibly more aesthetically pleasing, would be to create a wrapper div the height of one equation, then insert the equations into that div with overflow: hidden and animate the scroll position to show each equation in turn.另一种可能更美观的处理方法是创建一个等式高度的包装 div,然后将等式插入到带有overflow: hidden div 中,并为滚动位置设置动画以依次显示每个等式。 (You would want to set the height of every equation div to be equal in that case.) (在这种情况下,您可能希望将每个方程 div 的高度设置为相等。)

Here's an example of just cycling through the list and updating the html in place.这是一个循环遍历列表并更新 html 的示例。 Not sure why my fades or math stuffs aren't working in the fiddle, but this should be a good start.不知道为什么我的淡入淡出或数学东西在小提琴中不起作用,但这应该是一个好的开始。

<div id="equation">
  <h2 id="start"></h2>
</div>


var strings = [
    `KE_{rot} = \frac1 2 I \omega^2`,
  `\omega =sqrt(2\alpha \Delta degrees)`,
  `KE_{rot} = \frac1 2 I sqrt(2\alpha \Delta degrees)`,
  `\alpha = frac\{tau_{max}} {I}`,
  `KE_{rot} = \frac1 2 I \sqrt{(2 (\frac{\tau_{max}} {I}) \Delta degrees)}^2`,
  `KE_{rot} = \frac1 2 I \(2 (\frac{\tau_{max}} {I}) \Delta degrees)`,
  `KE_{rot} = \tau_{max}\Delta degrees`,
  `\tau_{max} = I \alpha`,
  `KE_{rot} = I \ \alpha \  \Delta   degrees`
];

var i = 0;

var eq = function(){
    if(i <= strings.length) {
    $('#equation > h2').html(strings[i]);
    i++;  
  } else {
    clearInterval(interval);
  }
}

var interval = setInterval(eq, 1000);

https://jsfiddle.net/adjavaherian/6yg28as4/ https://jsfiddle.net/adjavaherian/6yg28as4/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM