草庐IT

缩放动画

全部标签

javascript - 使用 css3 和 jquery 分别动画缩放和旋转

更新和澄清我需要执行一些在图标上立即旋转(使用css3transform)的jquery。然后一旦图标旋转,我想设置动画并缩放到200%的大小。但是,由于缩放和旋转都是一个CSS3属性(转换),我看到这两个转换都作为0.5秒的动画发生。(在JQUERY代码中,我还更新了位置(顶部、左侧),但由于它不在transition:标记中,因此它会根据需要立即发生。我想要的是立即发生旋转,并在2秒内发生缩放。有什么想法吗?CSS:transition:transform0.5s;-webkit-transition:-webkit-transform0.5s;JQUERY:self.pick=f

javascript - 如何在 HTML5 Canvas 上缩放图像时保持宽高比?

在我的项目中,我使用HTML5Canvas和FabricJS。我有维持放置在Canvas中的图像对象的纵横比的方案。在调整Angular或缩放图像时,我必须更新宽度或高度以保持图像的纵横比。上图将清楚地显示我的问题。我需要一种算法或公式来保持图像的纵横比。图片应满足以下条件,如果我通过根据实际尺寸调整图片的宽度或高度来进行缩小,它会裁剪并以相同的纵横比显示图片。如果我确实通过调整图像的实际尺寸的宽度或高度来进行扩展,它将分别扩展图像的高度或宽度,并针对视口(viewport)高度和宽度进行裁剪以保持宽高比。隐藏的部分被平移和查看。请给我一些解决方案,谢谢。

javascript - 如何检测 Tween.js 动画完成?

我正在使用此代码使用tween.js为场景中的相机设置动画是否存在任何已完成或已完成的事件?tween:function(target){varposition=camera.position;vartween=newTWEEN.Tween(position).to(target,1800);tween.onUpdate(function(){camera.position.x=position.x;camera.position.y=position.y;camera.position.z=position.z;if(android){camera.lookAt(android.po

javascript - D3 缩放时保持线宽相同

下面创建两条粗细为8的线:vara=[23,50]for(b=0;b我有以下缩放功能functionzoomed(){vis.selectAll("line.route,line.stripe,line.stripep").attr("transform","translate("+zoom.translate()+")scale("+zoom.scale()+")")vis.selectAll("line.stripep").attr("stroke-width",8/(zoom.scale()))但是线宽没有变化,这是什么问题。我也试过:vis.selectAll("line.st

javascript - D3 V4 设置初始缩放级别

我刚开始使用D3V4,但我无法使用平移和缩放功能。问题是我希望初始比例值大于1,所以我使用zoom.scaleTo(svg,2);但是,一旦我平移或缩放,比例就会重置回1。这是JSFiddle上这种行为的示例,我做错了什么?JSFiddle 最佳答案 问题是:varsvg=d3.select("body").append("svg").attr("width",600).attr("height",600).call(zoom).append("g");您正在将group元素而不是svg元素分配给变量svg。zoom已正确应用于sv

javascript - 新呈现元素的动画,但不在页面加载时

我订阅了一个Firebase实时数据库,这样当我向它提交内容时,它会立即呈现在View中,而不需要任何jQuery或ajax。我想为这些元素的渲染设置动画,这样当一个新元素被添加到DOM时,它的div的background-color是绿色的,慢慢消失。我不希望此类的所有div在加载时执行此动画。我知道怎么做前者:@keyframesgreen-fade{0%{background:rgb(173,235,173);}100%{background:none;}}.post-div{animation:green-fade5sease-in1;}但是这个动画当然会在这个类的任何时候呈现

javascript - 什么是最好的 jQuery 产品缩放插件?

按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭11年前。我不是前端人员,只是学习jQuery,因此非常感谢任何帮助。什么是最简单、最稳定的jQuery缩放插件?我有一张常规尺寸的产品图片和一张详细图片。我需要能够以某种方式放大。你会推荐哪个?

javascript - 检测属性是否可以通过 CSS3 转换设置动画?

可以使用CSS3转换动画的属性列表在浏览器之间并不一致,并且可能会随着新浏览器版本的变化而变化。例如,-moz-transform在FF3.6中不能与-moz-transition一起设置动画,但在FF4中可以。那么,有没有一种方法可以在JavaScript中检测特定属性是否可以设置动画?我不想使用用户代理嗅探,因为它不可靠。提前致谢! 最佳答案 是的,有办法。下面是演示,下面是解释。其中涉及一些非常重要的注意事项,因此请务必继续阅读。以下代码将测试浏览器是否可以在两个值之间设置动画。代码jsFiddledemo./*@paramp

javascript - 当我的动画完成时,transitionend 事件不会触发

我正在尝试使用jQuery在css动画完成时触发一个事件并且它基本上可以正常工作,但由于某种原因,直到我将鼠标移开时才会调用transitionend事件有问题的对象。方法如下:functionreplaceWithSearch(){varsearchWrapper=constructSearchBox("");$(this).addClass("animatedfadeOut");//cssanimation$(this).on('webkitTransitionEndotransitionendoTransitionEndmsTransitionEndtransitionend',

javascript - three.js - 如何限制缩放以使对象不会因相机而损坏

我正在创建three.js应用程序。我已经加载了我的STL对象。我使用过“OrbitControls”。当我开始使用鼠标的中间滚动按钮缩放我的对象时,它会在某个点中断。我的相机和控制代码如下:camera=newTHREE.PerspectiveCamera(55,window.innerWidth/window.innerHeight,1,15);//camera.position.set(3,0.15,3);//positionandpointthecameratothecenterofthescenecamera.position.x=-3;camera.position.y=4