动画剪辑:rect 属性?
Posted
技术标签:
【中文标题】动画剪辑:rect 属性?【英文标题】:Animate the clip: rect property? 【发布时间】:2012-08-04 12:45:12 【问题描述】:我想使用 jQuery 的 .animate()
为 css 属性 clip: rect
设置动画,但无法找到这是否可行。试过了:
$(".img1").animate(
clip: "rect(1px, 945px, 499px, 1px)"
,300);
没有任何运气。有人知道吗?
谢谢
【问题讨论】:
【参考方案1】:一切皆有可能,但可能有更简单的方法可以不使用clip
来做你想做的事,但如果你使用jQuery animate 的fx.step 函数,你可以为任何东西设置动画,但你需要做一些计算才能弄清楚价值和东西,但它是这样的:
$(".img1").animate(
fontSize: 100 //some unimportant CSS to animate so we get some values
,
step: function(now, fx) //now is the animated value from initial css value
$(this).css('clip', 'rect(0px, '+now+'px, '+now+'px, 0px)')
, 10000);
FIDDLE
【讨论】:
很遗憾你不得不滥用一些无辜的 CSS 属性,但确实是一个很好的解决方案!谢谢 但是如何控制动画速度呢?更改持续时间值没有帮助。 Ähm,您不需要为伪属性设置动画。您可以使用对象来传递参数:$(to:0).animate(to:100, step: function() )
@yckart- 你能为此设置一个 Fiddle,看看它是如何工作的会很有趣吗?
$( val: 0 ).animate( val: 100 , step: function (now) console.log(now); );
【参考方案2】:
由于这是一个受欢迎的问题,并且当我今天查找此问题时它是 Google 搜索结果的顶部,所以这里有一个 jQuery 插件,它可以与 clip:
属性和 .animate()
原生配合使用。
信用:http://zduck.com/2013/jquery-css-clip-animation-plugin/
/*
* jquery.animate.clip.js
*
* jQuery css clip animation support -- Joshua Poehls
* version 0.1.4
* forked from Jim Palmer's plugin http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/
* idea spawned from jquery.color.js by John Resig
* Released under the MIT license.
*/
(function (jQuery)
function getStyle(elem, name)
return (elem.currentStyle && elem.currentStyle[name]) || elem.style[name];
function getClip(elem)
var cssClip = $(elem).css('clip') || '';
if (!cssClip)
// Try to get the clip rect another way for IE8.
// This is a workaround for jQuery's css('clip') returning undefined
// when the clip is defined in an external stylesheet in IE8. -JPOEHLS
var pieces =
top: getStyle(elem, 'clipTop'),
right: getStyle(elem, 'clipRight'),
bottom: getStyle(elem, 'clipBottom'),
left: getStyle(elem, 'clipLeft')
;
if (pieces.top && pieces.right && pieces.bottom && pieces.left)
cssClip = 'rect(' + pieces.top + ' ' + pieces.right + ' ' + pieces.bottom + ' ' + pieces.left + ')';
// Strip commas and return.
return cssClip.replace(/,/g, ' ');
jQuery.fx.step.clip = function (fx)
if (fx.pos === 0)
var cRE = /rect\(([0-9\.]1,)(px|em)[,]?\s+([0-9\.]1,)(px|em)[,]?\s+([0-9\.]1,)(px|em)[,]?\s+([0-9\.]1,)(px|em)\)/;
fx.start = cRE.exec(getClip(fx.elem));
if (typeof fx.end === 'string')
fx.end = cRE.exec(fx.end.replace(/,/g, ' '));
if (fx.start && fx.end)
var sarr = new Array(), earr = new Array(), spos = fx.start.length, epos = fx.end.length,
emOffset = fx.start[ss + 1] == 'em' ? (parseInt($(fx.elem).css('fontSize')) * 1.333 * parseInt(fx.start[ss])) : 1;
for (var ss = 1; ss < spos; ss += 2) sarr.push(parseInt(emOffset * fx.start[ss]));
for (var es = 1; es < epos; es += 2) earr.push(parseInt(emOffset * fx.end[es]));
fx.elem.style.clip = 'rect(' +
parseInt((fx.pos * (earr[0] - sarr[0])) + sarr[0]) + 'px ' +
parseInt((fx.pos * (earr[1] - sarr[1])) + sarr[1]) + 'px ' +
parseInt((fx.pos * (earr[2] - sarr[2])) + sarr[2]) + 'px ' +
parseInt((fx.pos * (earr[3] - sarr[3])) + sarr[3]) + 'px)';
)(jQuery);
【讨论】:
【参考方案3】:@Shivan 猛禽
要控制持续时间,请在 step 属性之前添加 duration: 3000,。因此,代码将声明:
$('#A').on('click', function()
$(".img1").animate(
fontSize: 1
,
duration:3000,
step: function(now, fx)
$(this).css('clip', 'rect(0px, '+(now+30)+'px, '+(now+30)+'px, 0px)')
, 1000);
);
您必须完全按照您希望动画的运行方式进行调整,但这应该会有所帮助。
【讨论】:
以上是关于动画剪辑:rect 属性?的主要内容,如果未能解决你的问题,请参考以下文章
是否可以使用 jQuery 为 css 剪辑路径属性设置动画?
短视频运营短视频剪辑 ⑤ ( 视频素材使用 | 设置插入后的视频素材属性 | 设置画面 | 设置音频 | 设置变速 | 设置动画 | 设置调节 )