我的想法是把一个图像分解成小的部分,当它们飞走的时候,它们会按比例缩小。
我已经设法用几个CSS动画- scale
+ translate3d
-(结果不是很好,但这是一个开始)。
现在,问题是我希望翻译是随机的。据我所知,有一种简单的方法涉及JS/Jquery/GSAP,还有一种更复杂的方法涉及SCSS/Sass…
他们我都不熟悉。
我发现了一个代码,使用javascript随机轮换,我已经适应了我的翻译。
代码贴在这里作为答案。
// search the CSSOM for a specific -webkit-keyframe rule
function findKeyframesRule(rule)
{
// gather all stylesheets into an array
var ss = document.styleSheets;
// loop through the stylesheets
for (var i = 0; i < ss.length; ++i) {
// loop through all the rules
for (var j = 0; j < ss[i].cssRules.length; ++j) {
// find the -webkit-keyframe rule whose name matches our passed over parameter and return that rule
if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule)
return ss[i].cssRules[j];
}
}
// rule not found
return null;
}
// remove old keyframes and add new ones
function change(anim)
{
// find our -webkit-keyframe rule
var keyframes = findKeyframesRule(anim);
// remove the existing 38% and 39% rules
keyframes.deleteRule("38%");
keyframes.deleteRule("39%");
// create new 38% and 39% rules with random numbers
keyframes.insertRule("38% { -webkit-transform: translate3d("+randomFromTo(-100,100)+"vw,"+randomFromTo(-100,100)+"vw,0vw); }");
keyframes.insertRule("39% { -webkit-transform: translate3d("+randomFromTo(-100,100)+"vw,"+randomFromTo(-100,100)+"vw,0vw); }");
// assign the animation to our element (which will cause the animation to run)
document.getElementById('onet').style.webkitAnimationName = anim;
}
// begin the new animation process
function startChange()
{
// remove the old animation from our object
document.getElementById('onet').style.webkitAnimationName = "none";
// call the change method, which will update the keyframe animation
setTimeout(function(){change("translate3d");}, 0);
}
// get a random number integer between two low/high extremes
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
最后是这部分
$(function() {
$('#update-box').bind('click',function(e) {
e.preventDefault();
startChange();
});
});
我不确定,但我猜它的功能是触发功能startChange
。
。在我的例子中,我想要一个自动触发的函数,因为动画必须继续播放,它必须无限循环。
你知道怎么做吗?我想我可以用onAnimationEnd
..
内置JavaScript函数setTimeout(functionName, time)
在time
毫秒后调用名为functionName
的函数。删除$('#update-box').bind...
部分,并替换为每1000ms左右调用一次的函数。例如:
$(function() {
function callStartChange() {
startChange();
setTimeout(callStartChange, 1000);
}
// And now start the process:
setTimeout(callStartChange, 1000);
});
这将每秒(1000ms)调用startChange
。