草庐IT

缩放动画

全部标签

javascript - 如何使用 JavaScript/jQuery 获得更流畅的滑动内容动画?

我有一些内容在这里滑动。http://www.smallsharptools.com/downloads/jQuery/Slider/slider.htmlHTML结构简单。有一个固定高度和宽度的外框,溢出设置为隐藏。然后是一个内部容器,其宽度设置为内部内容的全宽,它是一系列标有Item类的div元素。为了左右滑动内容器,我改变了左边距。向左走我减少变成负数的值,向右走我把它归零。但是我看到了锯齿状的动画,即使在我希望性能更好的Chrome中也是如此。我的问题是,如果我使用不同的技术来回移动它会更平滑吗?绝对定位会更顺畅还是我应该考虑其他事情?是否有任何我还不知道的制作流畅动画的秘诀?

javascript - 在 fabric js 中缩放时保持 strokeWidth

注意:我已经引用了SOquestion,但它对我的情况没有用,因为1)我试图保持以前的边界,但截至目前它在缩放时重新计算边界。我添加了下面的代码以在缩放对象时停止自动增加边框。现在的问题是我已经为对象添加了一个5px的边框,但是在缩放对象时它没有保持我之前添加的边框。canvas.on('object:scaling',(e)=>{varo=e.target;if(!o.strokeWidthUnscaled&&o.strokeWidth){o.strokeWidthUnscaled=o.strokeWidth;}if(o.strokeWidthUnscaled){o.strokeWi

javascript - 具有可变样式的angular2动画

使用Typescript和Angular2.0.0-rc.4如何从模板中指定样式属性值以便我可以重复使用按钮?例如,如果我想根据模板绑定(bind)的某些属性为每个按钮指定不同的背景颜色。见下文假设有以下组件:import{Component,OnInit,OnDestroy,Input,style,state,animate,transition,trigger}from'@angular/core';@Component({selector:'my-toggle-button',template:`{{bgColor}}`,animations:[trigger('state',[

javascript - iPad 上的 Webkit 动画性能

基于webkit的转换/动画会影响iPad上的JS性能吗?是否有单独的图形处理器来处理webkit的东西?基本上,我正在开发一个包含一些简单的webkit动画的程序,但其中有很多,我认为我必须取消动画,因为它会使Ipad变慢。 最佳答案 您可以查看ThomasFuchs的文章:MakinganiPadHTML5App&makingitreallyfast他提出的一些观点是图像极大地减慢了速度——摆脱它们避免文字阴影和框阴影避免不透明(干扰硬件加速渲染)使用translate3d,而不是translate(后者并不总是硬加速的)确保使

javascript - 在 react 路由器中的路由之间设置动画/转换的正确方法是什么

我试图找到有关在react-router中的路由之间设置动画的文档。我看到以下issue对此有一些讨论。在评论接近尾声时,我看到lulridge给出了一个很好的example所以...这个例子是在react路由器中的路由之间设置动画的正确/推荐的方式吗?无论路由中显示什么内容,图像,文本,这是否会导致路由之间的转换?注意:它似乎有点对我有用,但转换的平滑度似乎取决于每条路线之间加载的数据量。JS//thekeypartinyourtoplevelroute/componente.g.Layout.js//whereyouwraptheRouteHandlerintheTransitio

javascript - 设置数据后 Highcharts 加载动画

我正在使用Highcharts图表,我正在使用.setData更新图表中的数据。一切正常,但我想使用每次重置数据时触发的加载动画(折线图从左到右绘制)。有没有办法调用这个动画? 最佳答案 您可以删除实际系列,并添加新系列。初始动画不同于所有其他动画(剪辑路径是动画的,而不是系列本身)。参见示例:http://jsfiddle.net/UTC6e/2/chart.series[0].remove();chart.addSeries({data:[229.2,144.0,176.0,135.6,148.5,216.4,194.1,95.

javascript - jQuery 动画与 GreenSock TweenMax

我遇到一个问题,使用jquery.animate()和GreenSockTweenMax动画引擎的优缺点。所以也许有人知道。网上没有足够的信息,性能如何。我尝试同时使用jquery.animate()和tweenMax,但在某些情况下我更喜欢使用jQuery引擎,在其他GreenSock。我正在努力决定哪个更好,而不是从一个跳到另一个。感谢future,知道使用哪个真的很有趣。引擎:http://jquery.comhttps://www.greensock.com/gsap-js/ 最佳答案 jQuery的fadeIn()和fad

javascript - 属性更改时 react 动画元素?

如何在属性更改时淡入元素?我希望statusMessage()函数返回的元素在每次this.props.statusMessage更改时淡入。目前没有应用任何动画。似乎也没有添加任何类名。classSelectPlayerextendsReact.Component{constructor(props){super(props);this.handleClick=this.handleClick.bind(this);}handleClick(){selectedId=this.props.selectedId;selectedPlayerName=this.props.selecte

javascript - 缩放多边形使边匹配

我正在使用JavaScriptCanvas处理一个项目,需要能够将光标捕捉到距多边形一定距离的位置。我已经可以捕捉到多边形本身,但我需要将光标移得更远。据我所知,最好的方法是缩放多边形并捕捉到它,但是当我缩放多边形时,旧多边形的边缘和新多边形的边缘之间的距离不会t总是匹配。这里是问题的一个例子:编辑:灰色代表原始多边形,红色是我正常缩放多边形时得到的结果,绿色是我想要完成的我已经尝试过将多边形平移到原点并乘以比例因子,但似乎无法按特定距离缩放每条边。 最佳答案 我做了一个jsFiddle对于给定的多边形,计算出一个我希望能满足您要求

javascript - Safari iPad 1 : how to disable zoom/centering on double-tap, 但保持双指缩放

我想知道是否可以防止在SafariiOS(iPad1)中的特定HTML元素上双击缩放和双击居中?因为我的小型HTML5游戏会强制用户进行快速点击(或点击),这会被解释为双击,并且当它发生时-页面会更改缩放并自行居中。检测双击(就像在这个答案中-SafariiPad:preventzoomondouble-tap)闻起来很糟糕..错误答案#1:-不适合我的目的,因为它会阻止任何缩放。错误答案#2:也许会.preventDefault()仅点击事件就足够了吗?-没有任何影响。 最佳答案 除了捕获您想要阻止的事件并调用preventDef