请看看这个小提琴:http://jsfiddle.net/dhcyA/
尝试点击一个块.我想要的是,当其他元素消失时,所选择的块将动画/轻松到他的给定位置,而不是像现在一样跳跃.然后,当再次单击该框时,相同的动画会重复,然后再返回到位置.
也许要记住:
我正在使用一个reponsive设计,这意味着在缩放窗口后这些块可以是垂直和水平的.
任何关于小提琴或建议的修改都会很棒!
我正在使用可滚动元素创建一个图像库。我正在使用 CSS 的scroll-snap功能,它允许我捕捉到滚动条中的元素(图像)。
通过绑定到元素的scroll事件,我在用户滚动元素时应用各种操作(例如预加载、隐藏界面元素等)。其中之一取决于滚动事件,并且需要在滚动完成的确切时刻停止。但是滚动快照给我带来了一种无法预见但尚未处理的情况;
我无法准确确定快速滚动操作是否完成。
我可以在每个滚动上设置一个setTimeout,它会自行取消并重新设置 - 有效地消除抖动 - 如果不重置,最后会被调用。但是设置此值时使用的超时可能意味着在确定滚动完成时“为时已晚”。
底线:如何检查滚动是否完成,因为:
scroll-snap-type已设置)我正在使用Robert的jQuery easing插件(http://gsgd.co.uk/sandbox/jquery/easing/),我需要强调或拖出缓动效果.
基本上,我希望缓和效果非常快,但在缓出期间会大大减慢.
我相信我可以使用jQuery.easing.easeOutCubic( null, current_time, start_value, end_value, total_time)但我无法弄清楚如何正确使用它.
怎么能实现这一目标?
我想使用自定义功能的自定义应用animationAndroid view(按钮)上的翻译interpolator:
public static float easeOut(float t,float b , float c, float d) {
if ((t/=d) < (1/2.75f)) {
return c*(7.5625f*t*t) + b;
} else if (t < (2/2.75f)) {
return c*(7.5625f*(t-=(1.5f/2.75f))*t + .75f) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625f*(t-=(2.25f/2.75f))*t + .9375f) + b;
} else {
return c*(7.5625f*(t-=(2.625f/2.75f))*t + .984375f) + b;
}
}
Run Code Online (Sandbox Code Playgroud)
我有一个使用自定义插补器的示例,如下所示:
插值器是:
public class HesitateInterpolator implements Interpolator {
public HesitateInterpolator() {
}
public float getInterpolation(float …Run Code Online (Sandbox Code Playgroud) 我知道OrbitControls.js有一个阻尼功能,它可以平滑地拖动全景,也称为缓动.我想实现相同的功能,但不使用此库.原因是我需要减少使用的代码量并更严格地控制鼠标或点击事件.
我已经构建了这个Plunker来显示我用作全景视图的初始项目的演示.
https://plnkr.co/edit/eX2dwgbrfNoX9RwWaPaH?p=preview
在此演示中,鼠标坐标将转换为纬度/经度,这将调整摄像机位置.这是来自three.js网站的最基本,最小的全景示例.
当我玩弄阻尼时OrbitControls.js(见这一行)我无法得到相同的平滑行为 - 互动导致全景跳跃:
if ( scope.enableDamping === true ) {
sphericalDelta.theta *= ( 1 - scope.dampingFactor );
sphericalDelta.phi *= ( 1 - scope.dampingFactor );
panOffset.multiplyScalar( 1 - scope.dampingFactor );
}
Run Code Online (Sandbox Code Playgroud)
我不相信我可以完全理解如何将它应用于我在Plunker中的示例.
任何人都可以指导我从正确的方向申请damping我从Plunker的例子吗?
更新:
我设法通过为经度和纬度添加新的delta值来进步:查看latDelta和lonDelta 更新的Plunker.我知道它是如何工作的OrbitControls.js.您现在可以在初始页面加载时观察到理想的平滑滚动,因为lonDelta = 0.35.但是,我不确定在用户鼠标滚动期间如何操作它.至少我正朝着正确的方向前进.
是否可以使用CAKeyframeAnimation沿路径移动某些东西,同时使用某种缓动以便加速或减速?我知道有timingFunctions和keyTimes,但是我不知道如果你只是沿着一条路走它们会如何工作.
我也为现代浏览器和旧浏览器制作滑块.我使用translate3d和transition来在支持css3的现代浏览器中制作动画.我为旧浏览器使用2d top,left和easing函数.我从这里使用css3缓动:
http://matthewlein.com/ceaser/
我想将它转换为javascript函数,以便在旧浏览器上使用.我知道那里有很多缓动功能,但我只是想知道如何转换.可能吗?
我正试图在jquery ui show效果上应用缓动.理想情况下,api看起来像这样:
$(this).show('scale', {
duration: 1000,
easing: 'easeOutBounce',
});
Run Code Online (Sandbox Code Playgroud)
目前元素显示为:none.我需要用缩放效果来显示它并且有一个缓和.
我是否必须将命令分开,或者是否有类似的东西可以使用?
谢谢.
我正在尝试在TChromeTabs中实现标签的流畅运动.我可以在这里看到缓动公式,但我不是数学家,也不知道如何将其转换为代码.到目前为止,我的尝试让我无处可去.
是否有可用的Easing功能的Delphi实现?
我一直在努力使用补间来使 Python 中的鼠标移动平滑,我目前正在尝试自动化一些重复性任务。
我尝试使用补间去除一些在没有应用平滑的情况下发生的粗糙度,但是这样做我失去了明显的准确性,因为我的dy和dx值被number我最终得到了余数。这可能会因获得可以解决greatest common factor在我的两个值(因为两者dx并dy需要由同一分number)不幸的是这导致了过小的GCD的。
由于鼠标无法移动屏幕上像素的其余部分,因此我最终会明显降低精度。
问题:如何对鼠标移动应用补间,而不会失去准确性?
import pytweening
import win32api
import win32con
from time import sleep
dy = [50, 46, 42, 38, 33, 29, 24, 20, 15, 10, 10]
dx = [-35, 6, -55, -43, 0, 17, 29, 38, 42, 42, 38]
while True:
count = 0
values = [(pytweening.getPointOnLine(0, 0, x, y, 0.20)) for x, y in zip(dx, dy)]
while win32api.GetAsyncKeyState(win32con.VK_RBUTTON) and win32api.GetAsyncKeyState(win32con.VK_LBUTTON): …Run Code Online (Sandbox Code Playgroud)