我需要从1到60计数,但我想要计算一个缓和,所以例如它将从1到30延迟100ms,之后我需要增加延迟,以便计数将逐渐减慢它达到60.这是我到目前为止(不多):
var i = 0;
var interval = setInterval(function(){
i += 1;
console.log(i);
if(i == 60) {
clearInterval(interval);
}
}, 100);
我正在使用 jQuery 和Easing 插件，我希望为任何持续时间的动画实现恒定的缓动时间：
Short animation (X milliseconds)
|<<<<|-------------------|>>>>|
10ms 10ms
Long animation (2X milliseconds)
|<<<<|-----------------------------------------|>>>>|
10ms 10ms
其中<<<</>>>>是缓入/缓出周期，并且---表示匀速运动。
是否有一个缓动函数/插件，或者我应该为每个动画提供一个依赖于时间的自定义函数，如果是的话，那么是什么类型的？
有没有人知道任何脚本JQuery或其他拖动和滚动与缓动？
我发现各种脚本可以通过缓动平滑滚动,或者通过缓动平滑拖动.但滚动和拖动所有脚本似乎不包括缓动.这里有些例子:
Utterscroll
https://github.com/debiki/utterscroll
DragOn
http://dragon.deparadox.com/
DragScrollable
http://hitconsultants.com/dragscroll_scrollsync/scrollpane.html
http://hitconsultants.com/dragscroll_scrollsync/scrollsync.js
http://hitconsultants.com/dragscroll_scrollsync/dragscrollable.js
如果有人知道带有缓动的拖动滚动脚本,请告诉我.或者,我们可能需要将缓动集成到上面的一个脚本中,但这些脚本非常复杂.谢谢.
我已经写了jquery动画一个div,如果我没有提到任何缓和效果,或者如果我提到'线性',但我想在这里放松效果,我想要'easInOutBack',并且无法理解出了什么问题.
希望有人告诉我在哪里我错过了什么.
如果可能的话,请用简单的语言提供解决方案,因为我是jQuery的新手.:):|
$(document).ready(function (e) {
$('div.button').on('click', function () {
$('div.box').animate({
marginLeft: 200
}, {
duration: 2000,
easing: 'easeOutBack'
});
});
});
不适合我.
我在解决这个简单的数学问题时遇到了麻烦。我花了两个多小时阅读 SO 和 Google 上的各种相关答案，但似乎我的高中数学知识已经消失了。
在页面上我有一个元素，一旦它通过阈值，就会缩小，它越接近包含元素的边缘。现在，它以线性方式扩展。我计算到容器边缘的距离，将其与阈值（比例为 100%）进行比较，并从中计算一个百分比，用于实际缩放元素（通过 CSS 转换）。
我想要的是，缩放在前 60-80% 时缓慢开始，然后显着增加。
对我来说，我似乎需要某种反指数或对数函数来做到这一点，但我无法确切地弄清楚如何实现这一点。理想情况下，该函数将返回0.0forx = threshold和1.0for x = 0（其中 x 将是元素的当前位置/百分比）。
任何帮助表示赞赏。我认为这可能是微不足道的，但我无法理解它。
我在这里有一个计数代码:
HTML:
<div id="value">700</div>
<div id="value2">1000</div>
JavaScript的:
function animateValue(id, start, end, duration) {
var start= 0 ;
var end = parseInt(document.getElementById(id).textContent, 10);
var duration = 10000;
var range = end - start;
var current = start;
var increment = end > start? 1 : -1;
var stepTime = Math.abs(Math.floor(duration / range));
var obj = document.getElementById(id);
var timer = setInterval(function() {
current += increment;
obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
animateValue("value2",0,0,0);
animateValue("value",0,0,0);
在此代码中,从0开始到结束,持续时间为10000毫秒.当接近结束时,如何将此持续时间设置为慢于此？
例如: …
这是我到目前为止的代码:
$('.my_button').click(function() {
$.scrollTo( '#my_anchor', 1200, {easing:'easeInOutExpo'}, function() {
// function not working here
});
});
回调函数以前工作,但由于我改为使用缓动的scrollTo方法,它不再了!
为了说清楚我只需要知道如何让我的回调函数再次运行,其他一切都很好.
我一直试图让一个函数只在所有元素的.animate()功能完成后触发,包括延迟和缓和.
我尝试了几种不同的方法,没有运气,任何想法？
$("#inner_work").on("mouseenter", ".activeBox", function(){
var thisBox = $(this).attr('id');
$("#inner_work [class^='workBox_']").each(function(){
if($(this).attr('id') != thisBox){
$(this).stop().delay(randomEasing(200,800)).animate({
opacity:0
}, randomEasing(200,700));
} else {
$(this).stop().animate({
opacity:1
}, 'fast');
}
});
});
所有动画完成后如何触发事件？
randomEasing 只是这个函数让它随机交错
function randomEasing(from,to)
{
return Math.floor(Math.random()*(to-from+1)+from);
}
我创建了一个简单的函数,它根据当前滚动位置设置动画值.
function scrollTransition(startValue, endValue, initScroll, distance, scrollTop) {
var
min = Math.min,
max = Math.max,
sum;
if(startValue > endValue) {
sum = min(max((endValue - startValue) / distance * (scrollTop - initScroll) + startValue, endValue), startValue);
} else {
sum = min(max((endValue - startValue) / distance * (scrollTop - initScroll) + startValue, startValue), endValue);
}
return sum;
}
您所要做的就是设置起始值和结束值,初始滚动位置,转换开始时和距离(以px为单位).因此,如果"initScroll"为500且距离为200,则转换结束于700px(scrollTop)."问题"是,它只是一个线性动画.我想要做的是在函数中添加第五个参数("缓动"),就像在jQuery .animation()函数中一样.
这些是我正在讨论的缓动函数(https://github.com/danro/jquery-easing/blob/master/jquery.easing.js),但我不确定,如何将它们添加到此函数中,所以我可以使用类似的东西
// in window scroll function
$el.css({
"margin-top" : scrollTransition(-300, 500, 500, 1000, "easeOutBack")
});
这样的事情是可能的还是我必须坚持线性过渡？
在此先感谢您的帮助和时间.