在动画中使用 Step 函数来变换旋转元素
Posted
技术标签:
【中文标题】在动画中使用 Step 函数来变换旋转元素【英文标题】:Using Step function in animate to transform-rotate an element 【发布时间】:2012-03-07 14:19:20 【问题描述】:全部,
我正在尝试使用 jquery animate 和 css 转换属性创建一个“来回”动画。
我参考了this SO post on using step function in animate,但是,我没有取得太大的成功。请查看和建议。
Jsfiddle.net demo
HTML:
<ul id="a">
<li class="cAccessories" id="AccButtons"><span>blah blah..</span></li>
<li class="cAccessories" id="AccRibbons"><span>blah blah..</span></li>
<li class="cAccessories" id="AccLaces"><span>blah blah..</span></li>
<li class="cAccessories" id="AccEmbroider"><span>blah blah..</span></li>
</ul>
CSS:
#a
position: absolute;
top: 25px;
left: 25px;
width: 150px;
height: 150px;
padding: 0;
margin: 0;
list-style: none;
background-color: blue;
JAVASCRIPT:
$("#a").animate ("margin-left": "+=10px", step: function (now, fx)
$("#a").css ("-moz-transform", "rotate('5deg')");
$("#a").css ("-webkit-transform", "rotate ('5deg')");
$("#a").css ("-ms-transform", "rotate ('5deg')");
$("#a").css ("-o-transform", "rotate ('5deg')");
, duration: "slow", "linear", function ()
$("#a").animate (left: "+=0px", step: function (now, fx)
$("#a").css ("-webkit-transform", "rotate ('-5deg')");
$("#a").css ("-moz-transform", "rotate ('-5deg')");
$("#a").css ("-ms-transform", "rotate ('-5deg')");
$("#a").css ("-o-transform", "rotate ('-5deg')");
, duration: "slow", "linear" ); );
以下是原始代码,我不喜欢变换动画(即使它完美地为“顶部”值设置动画)。
iTemplateNo = $(this).attr("id").substr (-1, 1);
eCurHanger = document.getElementById("hanger0" + iTemplateNo);
$(eCurHanger).attr("src", "Img/V2/Hanger.png");
$(eCurHanger).css ("width": "45px", "height": "35px");
$(eCurHanger).animate (top: "+=10px", step: function (angle, fx)
$(eCurHanger).css ("-webkit-transform": "rotate ("+angle+"deg)",
"-moz-transform": "rotate ("+angle+"deg)",
"-ms-transform": "rotate ("+angle+"deg)",
"-o-transform": "rotate ("+angle+"deg)");
, duration: 1000, "linear", function ()
$(eCurHanger).animate (left: "+=10px", step: function (angle, fx)
$(this).css ("-webkit-transform": "rotate("+angle+"deg)",
"-moz-transform": "rotate("+angle+"deg)",
"-ms-transform": "rotate("+angle+"deg)",
"-o-transform": "rotate("+angle+"deg)")
, duration: 1000, "linear" ) );
【问题讨论】:
很抱歉,我已经更改了代码并且忘记了删除这一点。 注意从 jQuery cssHooks 转换 @micha,请您详细说明一下。我已经弄清楚了问题所在(即“旋转”和括号之间不应该有任何间距)。但是,我似乎无法在最后附加回调函数。 cssHooks transform。step: function(), complete:function()alert("success!")
@micha,谢谢。如果我能提供帮助,我不想走插件路线。但是,如果我能弄清楚,您接下来的建议正是我所需要的。我需要使用完整的参数来间隔运行一个函数。请您将此作为您的答案发布,以便我投票。
【参考方案1】:
我不知道eCurHanger
是什么,但是看这里http://jsfiddle.net/8tP9D/
var angle = 0;
$("#a").animate ("margin-left": "+=200px", step: function (now, fx)
angle += 1;
$(this).css ("-moz-transform":"rotate("+angle+"deg)",
"-webkit-transform":"rotate("+angle+"deg)",
"-ms-transform":"rotate("+angle+"deg)",
"-o-transform":"rotate("+angle+"deg)");
, duration: 5000, "linear");
您可以使用now
变量来代替全局angle
。 http://jsfiddle.net/39pe6/
$("#a").animate ("margin-left": "+=200px", step: function (angle, fx)
$(this).css ("-moz-transform":"rotate("+angle+"deg)",
"-webkit-transform":"rotate("+angle+"deg)",
"-ms-transform":"rotate("+angle+"deg)",
"-o-transform":"rotate("+angle+"deg)");
, duration: 5000, "linear");
【讨论】:
谢谢。我似乎仍然无法让它工作。我不知道我做错了什么。我已经用我的原始代码更新了原始帖子。将不胜感激有关我哪里出错(包括回调函数)的反馈。 你的回调函数有什么好运气吗? @Kayote micha 在 cmets 给你答案【参考方案2】:研究了一下。存在某些语法错误。这是你需要的输出我认为Click Here!。
与我合作的代码在这里:
$("#a").animate( textIndent: 5 ,
step: function(now,fx)
$(this).css(
'-webkit-transform':'rotate('+now+'deg)',
'transform':'rotate('+now+'deg)',
'-ms-transform':'rotate('+now+'deg)');
,duration:1000,
complete:function()
$("#a").animate( textIndent: -5 ,
step: function(now,fx)
$(this).css(
'-webkit-transform':'rotate('+now+'deg)',
'transform':'rotate('+now+'deg)',
'-ms-transform':'rotate('+now+'deg)');
,duration:1000
);
);
【讨论】:
以上是关于在动画中使用 Step 函数来变换旋转元素的主要内容,如果未能解决你的问题,请参考以下文章
动画 SVG 组对象 - 使用样式组件进行变换旋转不会围绕圆原点旋转
shader编程-二维空间中使用矩阵实现物体的旋转缩放平移变换(WebGL-Shader开发基础03)
shader编程-二维空间中使用矩阵实现物体的旋转缩放平移变换(WebGL-Shader开发基础03)
Silverlight & Blend动画设计系列十二:三角函数(Trigonometry)动画之自由旋转(Free-form rotation)