草庐IT

GPU动画

全部标签

javascript - 平滑停止 CSS 关键帧动画

我有以下代码:http://jsfiddle.net/odj8v0x4/.functionstopGlobe(){$('.mapfront').removeClass('mapfront-anim');$('.mapback').removeClass('mapback-anim');}functionstartGlobe(){$('.mapfront').addClass('mapfront-anim');$('.mapback').addClass('mapback-anim');}@keyframesmapfront_spin{0%{background-position:140

javascript - AngularJS 动画卡片翻转

我正在尝试使用新的AngularJS方式在页面转换之间制作动画,并希望合并卡片翻转(如http://jsfiddle.net/nicooprat/GDdtS/)body{background:#ccc;}.flip{-webkit-perspective:800;width:400px;height:200px;position:relative;margin:50pxauto;}.flip.card.flipped{-webkit-transform:rotatex(-180deg);}.flip.card{width:100%;height:100%;-webkit-transfo

javascript - 使用jQuery跳转到页面底部 - 无动画

jQuery如何跳转到页面底部?我不想要更流畅的动画,只是为了“跳跃”。我在这个网站上发现的所有其他问题似乎都涉及动画。 最佳答案 这样就可以了$('html,body').scrollTop($(document).height());scrollTop(vHeight); 关于javascript-使用jQuery跳转到页面底部-无动画,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questi

javascript - 如何为 svg 路径的渐进式绘图设置动画?

我想仅使用带有svg/canvas和jsmaximum的css为线条的渐进式绘图设置动画。可以找到我想画的线的想法hereLayer1 最佳答案 此答案中列出了三种技术:有一个全SVG解决方案,涉及逐步修改形状的stroke-dasharray以绘制越来越长的“破折号”,然后是一个巨大的间隙。演示:http://phrogz.net/svg/progressively-drawing-svg-path-via-dasharray.html相关代码:vardistancePerPoint=1;vardrawFPS=60;varorig

javascript - 基于 Angular 路线路径动画路线(v2 +)

而不是像在thisStackOverflowanswer中那样将动画附加到每个被路由到的组件上,或如firstpartoftheofficialdocumentation.一个例子:Inhero-detail.component.ts:import{Component,OnInit}from'@angular/core';import{fadeInOutAnimation}from"app/app-routing.animation";@Component({selector:'app-home',templateUrl:'./home.component.html',animatio

javascript - 指示处理器密集型 JS 函数正在运行(GIF 微调器没有动画)

显示然后隐藏动画指示器/微调器gif是向用户展示他们的操作有效并且在他们等待操作完成时正在发生某些事情的好方法-例如,如果操作需要从服务器通过AJAX。我的问题是,如果减速的原因是处理器密集型函数,gif会卡住。在大多数浏览器中,GIF在执行耗费大量处理器的函数时停止动画。对于用户来说,这看起来像是崩溃或出现故障,但实际上它在工作。JSBINexample注意:“这很慢”按钮会占用处理器一段时间-对我来说大约10秒,具体取决于PC规范。您可以使用HTML中的“data-reps”属性更改它的执行量。期望:点击时,动画运行。该过程完成后,文本会发生变化(我们通常也会隐藏指示器,但如果我们

javascript - Three.js 中的动态骨骼动画

是否可以通过使用three.js对3D模型的骨骼应用转换来创建动态动画?我尝试移动和旋转SkinnedMesh的骨骼,但网格未更新。loader=newTHREE.JSONLoader();loader.load('/JS-Projects/Virtual-Jonah/Modelos/initialPose.js',functionjsonReady(geometry){mesh=newTHREE.SkinnedMesh(geometry,newTHREE.MeshNormalMaterial({skinning:true}));mesh.scale.set(10,10,10);mes

javascript - jQuery 动画 scrollTop

我在一个div中有很多section标签,溢出设置为hidden。代码是这样的:contentcontent我这样设置是因为我希望在按下菜单中的相应链接时能够滚动浏览div中包含的sections。我有这个功能:$('#mna').click(function(){varaHref=$(this).attr("href");varsectionHeight=$('section'+aHref+'').height();$('#viewport').height(sectionHeight);});我用它来调整#viewportdiv的大小,因为sections的大小不同。当我尝试将此滚

javascript - 动画谷歌地图折线

我想在谷歌地图中绘制一条动画(测地线)折线,有点像这样:http://planefinder.net/route/SFO/我找到了许多关于如何沿多段线为符号设置动画的教程,但没有关于如何为多段线本身从源到目的地设置动画的教程。有什么提示吗?我应该从哪里开始?非常感谢任何帮助。 最佳答案 我在以下方面取得了一些成功:vardeparture=newgoogle.maps.LatLng(dept_lat,dept_lng);//Settowhateverlat/lngyouneedforyourdeparturelocationvara

javascript - 在 ng-repeat 中使用 'track by $index' 时,ng-animate 动画错误的项目

我正在尝试创建用户可以选择不同类型的block并将它们堆叠在一起以创建独特模板的应用程序。因为我希望用户能够多次将同一block添加到模板中,所以我必须使用“按$index跟踪”来完成此操作:但是,当我尝试使用ng-animate添加动画时,用于移除block的动画是在模板中的最后一个block而不是移除block上动画。我把代码放在jsfiddle里http://jsfiddle.net/FC9c7/6/.尝试通过选择布局1、2或3添加新block。当您单击“删除block”时,您将看到问题。 最佳答案 这就是我认为正在发生的事情