草庐IT

缩放动画

全部标签

javascript - 如何防止视网膜 iPad 上的 javascript 中的@2x 图像缩放?

我正在使用html开发网页游戏和javascript。游戏还必须在iPad上运行,最好是视网膜和非视网膜显示器。在这个游戏中,我使用了spritesheetpng。此spritesheet宽3500像素,高3700像素。在我的游戏逻辑中,我使用Canvas的context.drawImage()捕获Sprite并将它们绘制到我的Canvas中。在桌面浏览器中,这工作得很好,一切都很好。在RetinaiPad上,图像加载时只有它大小的四分之一,这使得我的很多drawImage()调用失败,认为他们试图抓取加载图像边界之外的像素。(如果我在位置1200、1400抓取一个Sprite,而iP

javascript - CSS3动画如何移动到某个关键帧?

假设我们有这样的动画:http://jsfiddle.net/utterstep/JPDwC/布局:backforward以及对应的CSS:@keyframessomeanimation{0%{width:100px;}50%{width:200px;}100%{width:100px;}}.animating{width:200px;height:200px;background-color:red;animation:someanimation5sinfinite;}我想在按后退或前进时转到下一个或上一个动画状态。可以有多个对象,我想同时切换它们的动画状态。是否可以通过CSS或CS

javascript - 为什么 fadeIn()、fadeOut()、show(400)、hide(400) 动画在我的情况下不起作用?

我有一个显示用户收到的通知的div,问题是我想分别在用户收到通知并单击通知时以淡入和淡出效果显示它们。这是HTML:Username0每个列表项代表用户的一个friend。divid="messages_notifications_$id$"...包含来自用户特定friend的通知数量,用户尚未阅读的通知数量。$id$是用户friend的唯一标识(因此0表示包含来自id=1的用户friend的所有通知的div,依此类推)。我恢复了使用长轮询对服务器进行异步调用的通知数量,该服务器返回一个json,其中包含来自特定friend的所有消息给用户。然后我使用JQuery使用friend的id

javascript - 是否可以通过 Javascript 访问 %-width 元素的当前缩放因子而不会导致回流?

我试图在缓慢的UI中修复一些性能缓慢的javascript,我已经将主要原因缩小到jQuery.width()用于查看width:100%的实际像素大小的调用响应式布局中的元素,在一个需要经常响应用户操作的过程中。我添加了基于时间戳的测量,它们表明仅它就占了大约33%的延迟时间,这使得UI感觉清晰和UI感觉迟钝之间存在差异。删除这一行,用户界面感觉很快-但是,它把东西放在了错误的地方......好像wellestablishedthat.width()isrelativelyslowinjQuery>1.8主要有两个原因:Itforcesreflowwhilecalculatingth

javascript - 将 CSS3 动画转换为纯 JavaScript

我想将一个简单的CSS3动画转换为纯JavaScript(不是在jQuery中,因为我认为为这么简单的事情加载整个库有点过分了)。这是关于动画bounceInUp来自http://daneden.me/animate/.示例演示:http://jsfiddle.net/ELDf7/@keyframesbounceInUp{0%{opacity:0;transform:translateY(2000px);}60%{opacity:1;transform:translateY(-30px);}80%{transform:translateY(10px);}100%{transform:t

javascript - 摇摇欲坠的比例动画

我正在做小马赛克(如果我可以这样称呼的话)。我正在根据位置鼠标和图片/div的中心更改比例和不透明度。我正在通过vektors计算距离functioncalculateDistance(elem,mouseX,mouseY){returnMath.floor(Math.sqrt(Math.pow(mouseX-(elem.offsetLeft+(elem.offsetWidth/2)),2)+Math.pow(mouseY-(elem.offsetTop+(elem.offsetHeight/2)),2)));}我循环遍历div/图片,如果距离小于100,它会计算其不透明度/比例。但我

javascript - 使用 Dagre d3 缩放后重新渲染 HTML

编辑我找到了一个涉及使用稍旧版本的dagre-d3库(4.11)的解决方案。如果有人能找到最新版本的问题,那也会有所帮助。谢谢我正在使用Dagred3绘制一些图表。当我最初渲染我的图表时,我会这样做g=newdagreD3.graphlib.Graph().setGraph({}).setDefaultEdgeLabel(function(){return{};});varsvg=d3.select("svg"),inner=svg.select("g");svgGroup=svg.append("g");varrender=newdagreD3.render();render(d3.

javascript - CSS动画宽度从右到左,高度从下到上

我正在尝试解决从右到左扩展div的宽度以及从下到上扩展不同容器的高度的问题。我正在尝试创建将在正方形中旋转并模仿此处边界的CSS动画是指向我的CodePen的链接https://codepen.io/Archezi/pen/xReqvq?editors=0100如果有帮助的话。这是我的HTML.container是一个主要的包装器.circle是一个动画line1-line4是我要制作动画的方形边框。这是我的CSSbody{margin:0auto;}.container{position:relative;margin:50pxauto;width:800px;height:800p

javascript - 如何绑定(bind)CSS动画持续时间滚动

我想制作类似这样的网站,您可以在其中向下滚动,滚动时会跟随一些动画,如果您向上滚动,它会反转。我看到了一些像this这样的库但我想看看是否可以用更简单的方法来完成?谢谢$(document).ready(function(){varlastScrollTop=0;$(document).scroll(function(event){varst=$(this).scrollTop();if(st>lastScrollTop){$('div').removeClass('scrollUp').addClass('scrollDown');}else{$('div').removeClass

javascript - 隐藏 div 是否会停止动画(CSS 或 JS)?

将任何基于CSS的加载器动画作为引用。通常,当某些回调函数执行成功时,div会被隐藏,以表明结果已经到达。我的问题是,隐藏div实际上会停止动画吗?或者它们是否仍在继续耗尽CPU周期?非CSS动画呢? 最佳答案 长话短说Myquestionis,doeshidingthedivactuallystoptheanimation?OrdothosestillcontinuetouseupCPUcycles?不确定动画状态是如何在内部定义的,但它一旦隐藏就不会使用CPU周期。Whataboutnon-CSSanimations?CPU周期