[英]CSS random animation
My idea is to make an image to dismember into little parts that will scale down, while they fly away. 我的想法是使图像分解成细小的部分,当它们飞走时会缩小。
I've managed to do that with a couple of CSS animations - scale
+ translate3d
-(the results aren't great but it's a start). 我已经成功地做到这一点与一对夫妇的CSS动画-
scale
+ translate3d
- (结果是不是很大,但它是一个开始)。
Now, the problem is that I would like the translations to be random. 现在的问题是,我希望翻译是随机的。 As far as I've understood, there is a simple way involving JS/Jquery/GSAP, and a little more complicated way involving SCSS/Sass...
据我了解,有一个简单的方法涉及JS / Jquery / GSAP,而一个更复杂的方法涉及SCSS / Sass ...
I'm unfamiliar with all of them. 我不熟悉所有这些。
I've found a code that uses javascript to randomize a rotation, and I have adapted it to my translation. 我发现了一个使用javascript来随机化旋转的代码,并且已将其调整为适合我的翻译。
The code was posted here as an answer. 该代码已作为答案发布在此处 。
// 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);
}
So finally, there is this part: 所以最后,有这部分:
$(function() {
$('#update-box').bind('click',function(e) {
e.preventDefault();
startChange();
});
});
Which I'm not sure but I guess it's function is to trigger the function startChange
. 我不确定,但我想它的功能是触发功能
startChange
。
Now. 现在。 In my case, I would like a function to auto trigger and, as the animation has to continue playing, it would have to loop indefinitely..
就我而言,我想要一个自动触发的函数,并且由于动画必须继续播放,因此它必须无限循环。
Any ideas how to do that? 任何想法如何做到这一点? I guess I could use
onAnimationEnd
.. But obviously I do not know how to write it... 我想我可以使用
onAnimationEnd
..但显然我不知道如何写...
The inbuilt JavaScript function setTimeout(functionName, time)
calls the function named functionName
after time
milliseconds. 内置的JavaScript函数
setTimeout(functionName, time)
调用指定的函数functionName
后time
毫秒。 Remove the $('#update-box').bind...
part, and replace with a function that is called every 1000ms or so. 删除
$('#update-box').bind...
部分,并替换为每隔1000ms左右调用一次的函数。 For example: 例如:
$(function() {
function callStartChange() {
startChange();
setTimeout(callStartChange, 1000);
}
// And now start the process:
setTimeout(callStartChange, 1000);
});
This will call startChange
every second (1000ms). 这将每秒(1000ms)调用一次
startChange
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.