草庐IT

缩放动画

全部标签

Javascript 图像平移/缩放

通过结合一些CSS和JqueryUI/可拖动,我创建了平移图像的功能,并且通过一些额外的JS,您现在可以缩放图像。我遇到的问题是,如果您放大图像,左上角是固定的,正如您所期望的那样。我想要的是图像保持居中(基于当前的平移),以便图像的中间保持在容器的中间,同时变大。我已经为此编写了一些代码但没有用,我想我的数学是错误的。谁能帮忙?我希望它像this一样工作做。当您滚动到图像时,它会根据当前平移使图像居中,而不是从Angular落缩小。HTML:Javascript:$("#_popup_creator.user_image").bind('mousewheel',function(ev

javascript - 是否可以像 Highcharts 一样在 NVD3 图表中使用缩放选项?

我最近开始使用NVD3图表并且喜欢像Highcharts这样的缩放选项。可能吗? 最佳答案 有一个使用nv.models.lineWithFocusChart()的“带View查找器的折线图”示例。这种图表类型在主图表下方有一个额外的“迷你map”,您可以使用它来缩放和平移图表:参见:LineChartwithViewFinder 关于javascript-是否可以像Highcharts一样在NVD3图表中使用缩放选项?,我们在StackOverflow上找到一个类似的问题:

javascript - 请求动画帧 : what exactly is the timestamp?

我一直认为requestAnimationFrame使用的时间戳和JavaScript中常用的时间戳是一样的,就是从1970年1月1日开始的毫秒数,今天抓取时间戳验证了一下,发现RAF时间戳大概是从1970年1月1日开始算起的页面加载的开始。时间戳的精确测量依据是什么?测试代码:vari=0;varstart=null;vartimes=[];vardur=5000;functionstep(timestamp){if(start===null)start=timestamp;times[i++]=timestamp;if(timestamp-start');}}requestAnim

用于移动捏合/缩放操作的 javascript 事件

我需要一些帮助。我正在尝试在移动网页上工作。我想要做的是在用户执行放大/缩小操作时“捕获”。也就是说,当他们将两根手指放在屏幕上并分开或合拢手指时。我看jquerymobile没看到。具体来说,我可以将javascript函数附加到移动设备中的捏/缩放事件吗?如有任何帮助,我们将不胜感激。 最佳答案 hammer.jshttps://hammerjs.github.io/是解决此类问题的最佳JavaScript库之一。 关于用于移动捏合/缩放操作的javascript事件,我们在Stac

javascript - 修改 Google map 类型的最大缩放级别

我需要将google.maps.MapTypeId.HYBRID的maxZoom级别设置为21。实际上,他设置为14(使用firebug控制台检查)。设置google.maps对象的属性'maxZoom'在这种情况下不起作用,我已经尝试修改google.maps.mapTypes对象,但没有成功。varoptions={center:newgoogle.maps.LatLng(lat_centre,lng_centre),zoom:14,maxZoom:21,mapTypeId:google.maps.MapTypeId.TERRAIN,panControl:true,zoomCont

javascript - AngularJS ngAnimate ngView 平滑淡出/淡入动画

我希望在更改ngView的内容时有一个很好的过渡。用户总是可以比动画更快地更改事件View。有没有办法始终获得平滑的淡出/淡入动画。唯一可见的方法似乎是忽略淡出/离开。PlunkerLink 最佳答案 试试这个http://plnkr.co/edit/NO0Xqh?p=preview.使用JavaScript控制的动画,它会确保当用户点击速度快于动画时,值动画会在中间停止并返回到初始状态。 关于javascript-AngularJSngAnimatengView平滑淡出/淡入动画,我们

javascript - 动画正弦波,固定起点和终点

我的Canvas中有一个正弦波,它是动画的,左右摇摆。我想要实现的是起点和终点保持固定。如何实现?这里是CodePenfunctionstart(){varcanvas=document.getElementById("canvas");varcontext=canvas.getContext("2d");context.clearRect(0,0,canvas.width,canvas.height);drawCurves(context,step);step+=5;window.requestAnimationFrame(start);}varstep=-4;functiondra

javascript - 如何暂停所有 jQuery 动画?

在某些情况下,我需要暂停页面上的所有动画以进行一些用户交互,然后在用户响应后立即恢复所有动画。例如,我可能有一个淡入超过1秒的动画,我需要暂停400毫秒。它应该在40%的不透明度停止,并保持在那里直到我恢复,此时它应该从它停止的地方开始并花费另外600毫秒完成从40%到100%的淡入。页面上可能同时有多个动画,我想全部暂停。此外,一些动画可能有更多的动画在完成后排队继续,这一切都需要工作:当我恢复时,当前动画需要完成,然后队列中的下一个动画需要开始,就好像什么都没发生一样.jQuery似乎没有任何内置的暂停动画支持;我能找到的最接近的是.stop(),将停在动画中的当前位置,但稍后无法

javascript - 请求不断调用的动画帧

尝试了解RequestAnimationFrame及其内部工作原理。浏览器有一个主线程,它是一个事件循环。事件循环可以填充各种异步事件,例如用户交互、定时器被触发、网络调用完成以及触发布局和绘制的事件,例如输入或JS。因此,当JS函数使DOM布局无效或导致重新绘制时,浏览器的主线程重新绘制需要更新的图层,合成器线程将更新后的纹理上传到GPU,最终合成发生并显示结果图像到屏幕上。因此,我的印象是浏览器仅在实际需要时才执行绘制。如果您在静态页面上捕获ChromeDevTools时间轴上的事件而没有发生任何事情,则绝对不会捕获任何事件(没有布局、没有绘制、没有触发动画帧)。说得通。然后你在控

javascript - jQuery 动画在 Firefox 中断断续续

我喜欢认为我不是傻瓜,但我无法让我的jQuery水平幻灯片流畅地制作动画,尤其是在FireFox中(在Mac上)。有人有什么建议吗?动画是这样完成的:$('#lookbook').stop().animate({left:-((lookbook-1)*825)+'px'},{duration:800,complete:cap_fade(1)});示例链接:http://mayfourteenth.com/w/lookbook?preview=1 最佳答案 我已经在Windows上的Firefox、Chrome(dev)和Safari