草庐IT

滚动动画

全部标签

javascript - GIF动画在所有主流浏览器中都和javascript运行在同一个线程上是真的吗?

我展示了一个动画GIF,它在我的AJAX请求正在进行时运行,并在我的脚本处理完响应后停止。虽然这有效,但我注意到当我的脚本(其中包含一些相当大的DOM更新)处理请求的响应时,动画会卡住。我的研究使我相信这是因为GIF动画发生在运行javascript的同一线程上-浏览器是真正的单线程。这是当前所有主流浏览器(例如Chrome、Firefox、Safari、IE)的正确解释吗?其次,为什么要这样做?浏览器真的不可能将一个线程专用于GIF动画,以便在执行一段javascript时它们不会卡住吗?更新This是一个有趣的页面。它讨论了使用纯CSS3动画。他们仍然在Firefox中卡住-也许很

javascript - AngularJS 1.3.15 如何同步测试动画?

我猜我遇到了angular-animate.js从1.2版到1.3版的迁移问题。这是我的动画'usestrict';angular.module('cookbook',['ngAnimate']).animation('.slide-down',function(){varNG_HIDE_CLASS='ng-hide';return{beforeAddClass:function(element,className,done){alert('beforeadd');if(className===NG_HIDE_CLASS){element.slideUp(done);}},remove

javascript - IFrame 中 ExtJS 5 应用程序的滚动问题

你好,这是我的测试页面的样子:蓝色区域是父页面,绿色区域是运行ExtJS应用程序的IFrame(内部带有标签的简单视口(viewport))。如果网站在触摸设备(iPad、Android平板电脑等)上运行,则无法通过在IFrame(绿色区域)上“删除”来滚动页面。必须删除蓝色区域才能滚动页面。这在ExtJSv4.2.1中一直正常工作(见下面的链接)。测试站点:https://skaface.leo.uberspace.de/ScrollTest/Ext510/(未按预期工作,使用ExtJSv5.1.1)https://skaface.leo.uberspace.de/ScrollTes

javascript - 动态禁用 SVG 元素的触摸操作(过度滚动)

我在Chrome上遇到触摸屏过度滚动的问题。我有一个包含SVG元素的文档,其中包含一些形状,比如一个矩形:现在,我想使矩形可拖动,这意味着我想禁用相应上的各种触摸操作。元素,通过设置它的样式属性touch-action:none.这在除Chrome之外的所有桌面浏览器上都能正常工作。在Chrome上,当我在一个矩形上触摸并移动时,浏览器的过度滚动功能会启动。这会导致浏览器窗口笨拙地移动,以及我在矩形上设置的所有指针事件都被取消。即pointermove注册几分之一秒,然后在过度滚动开始时停止。pointerup即使在触摸被释放时也不会被调用。现在,如果我有一个HTML元素而不是SVG元

Javascript 如何创建一个无分配动画循环来避免垃圾收集器?

我正在尝试构建流畅的60fps动画浏览器javascript循环。我注意到垃圾收集器启动并向动画帧添加可变的非零时间。我首先跟踪代码中的分配,然后将循环自身隔离开来。我正在使用requestAnimationFrame并发现在所谓的“空”循环中它仍然会导致每次迭代分配并触发垃圾收集器。令人沮丧的是,这似乎也发生在其他循环机制setInterval和setTimeout中。下面我整理了一些jsfiddles和屏幕截图来演示示例“空循环”。所有样本均来自约5秒的时间线。此时,我正在寻找最小化垃圾回收的最佳解决方案。从下面的示例来看,requestAnimationFrame似乎是这方面最差

javascript - react-native-svg 中 <Rect/> 的动画宽度

我为进行了简单的动画插值元素,但是我在我的用户界面上没有看到任何变化,就好像宽度保持为0。我手动将我的最终值添加到组件中作为width={149.12}并且显示正确,因此我现在有点困惑为什么它没有从动画中获取相同的值?react-native@0.57.1​​react-native-svg@7.03针对iOS12这是完整的实现,本质上是一个包含当前值和总值的法力和健康条,即50和100应该显示矩形的一半宽度。(示例使用typescript,但如果需要,答案可以用纯js编写)import*asReactfrom'react'import{Animated}from'react-nati

javascript - 始终滚动 div 元素而不是页面本身

我有一个内部的页面布局包含页面上重要内容的元素。关于设计的重要部分是:#content{height:300px;width:500px;overflow:scroll;}现在,当包含的文本大于300像素时,我需要能够滚动它。是否可以滚动,即使鼠标没有悬停在元素上(箭头键也应该有效)?请注意,我不想禁用“全局”滚动:页面上应该有两个滚动条,全局滚动条和的滚动条|.唯一改变的是内部应该始终滚动,除非它不能再移动(在这种情况下页面应该开始滚动)。这有可能以某种方式实现吗?编辑我认为这个问题有点令人困惑,所以我将附加一个我希望它如何工作的序列。(Khez已经提供了概念验证。)第一张图片是页面

javascript - 防止滚动冒泡

如何防止滚动冒泡?以下示例无效:ScrollBubbling#menu{width:80px;height:150px;background:red;overflow:auto;}functionisScrollOnBound(scrollContainer){if($(scrollContainer).scrollTop()===0||$(scrollContainer).scrollTop()+$(scrollContainer).innerHeight()>=$(scrollContainer)[0].scrollHeight){returntrue;}else{returnfa

javascript - 将 Three.js 骨骼动画更新到新的基于混合器的系统

混音器系统是在r73中引入的,从那时起我一直在尝试将我的游戏更新到这个新系统。除了一件事,我几乎就在那里。某些具有特定几何形状的动画的淡入淡出有轻微的延迟,这在r72中是不存在的。我破解了r72的BlendCharacter和Animation函数以允许回调并且效果很好。在73中,这不是必需的,因为它通过事件触发器内置了此功能。在下面的fiddle中,一切都按预期工作(r72)。http://jsfiddle.net/titansoftime/a93w5hw0/varscene,camera,renderer,ambient,directional;varmesh,geoCache={

javascript - 如何使用CSS或JS实现这个圆点动画?

这张动图来自dribbble.我试过写一个demo使用纯CSS,这是我的部分代码:@keyframescircles{0%{transform:scale(0)rotate(150deg);}100%{transform:scale(1)rotate(0deg);}}它们不会作为一个整体旋转。gif中间的混合动画不是必须的,我只是想实现旋转效果。希望有人能帮助我。 最佳答案 这是一个复合或嵌套运动。分解是:这些点本身只是沿着一条直线向内滑动,并在移动时稍微缩放每个点的开始时间都与最后一个点略有不同,因此它们看起来是按顺序移动的,这给