草庐IT

绘图与动画

全部标签

javascript - jQuery 动画设置回调抛出错误

我想实现一个jQuery动画回调方法progress或者step,但无论哪种情况,我都会收到以下错误:NS_ERROR_IN_PROGRESS:Componentreturnedfailurecode:0x804b000f(NS_ERROR_IN_PROGRESS)[nsICacheEntry.dataSize]我搜索了很多但无法在上下文中找到任何内容,我有点卡在这里,请提出可能导致此错误的原因?在fiddle中,我尝试了step和progress及其在那里的工作,但无法在我的代码中工作,我只是在看,有人在jquery动画中遇到过这种错误吗?示例代码为:this.taskHandle.

javascript - 如何在 Angular Material 动画之后执行代码

我正在使用AngularMaterial在一个网站上。作为响应式框架,它处理不同窗口大小的渲染。改变窗口大小时,添加一些布局变化和控件移动的动画示例:https://material.angularjs.org/latest/demo/gridList(打开链接并调整窗口大小)我在示例中显示的图block上有一些WebGLCanvas,需要在动画完成后重新绘制(并且容器具有最终尺寸)。如何获得一些回调或promise以完成UI动画? 最佳答案 此问题的解决方案是将属性md-on-layout添加到md-grid-list(docs)

javascript - Angular 4 使用 Angular 动画为任何高度/位置变化设置动画

我希望这是一个非常直截了当的问题。有没有办法使用Angular动画语法为元素上的任何高度或位置变化设置动画?例如,如果删除一个DOM元素导致另一个元素向上移动,是否可以在不设置状态变量的情况下为向上移动设置动画?或者类似的没有状态的东西。提前致谢。 最佳答案 您可以为所有可能被动态删除/添加的子元素添加一个折叠动画。如果子高度是动画的,那么容器大小也是动画的。trigger('fold',[transition(':enter',[style({height:0,overflow:'hidden'}),animate('.3seas

javascript - 使用内联动画关键帧定义?

我们有这种在css文件中定义关键帧的语法:@-webkit-keyframesfade{from{opacity:1;}to{opacity:0.25;}}我们像这样引用它:.foo{-webkit-animation:fade1slinearinfinite;}有没有办法直接内联它,比如:.foo{-webkit-animation:(from{opacity:1;}to{opacity:0.25;})1slinearinfinite;}有没有办法做到这一点,或者在运行时将“@-webkit-keyframes”元素注入(inject)我的样式表?谢谢 最

javascript - 谷歌地图容器在动画后无法正确调整大小

我有一个谷歌地图容器,假设高度为600像素。我有一个按钮,调整(jQuery)map周围的div容器:$('#add').click(function(){$("#container-map").animate({height:'50%',minHeight:'50%'},1500);google.maps.event.trigger(map,'resize');});现在容器和map的高度是300像素,但googlemapsapi认为它仍然是600像素,所以map的中心仍然是300像素,尽管它应该是150像素(300/2)。http://woisteinebank.de/dev2.h

javascript - Javascript 中的 HTML DOM 绘图事务?

有没有办法在一个事务中封装多个DOM操作命令,这样内容就不会“忽悠”?像这样:window.stopDrawing();//starttransaction$("#news").append("anewnewsitem");//...dosomethingmore$("#news").css("top","-150px");window.startDrawing();//stoptransaction 最佳答案 每次您必须更新大量元素时,只需设置一个包含所有操作的函数,调用mozRequestAnimationFrame(或webk

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 - 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(),将停在动画中的当前位置,但稍后无法