javascript - 帮助这个动画循环

标签 javascript animation canvas svg

t.grow = function(parent,evt) { 
evt.target.Y = 0
var r = parent.radius, that = this
this.loop = function() {
    parent.root.suspendRedraw(10000)
    evt.target.Y = evt.target.Y - 6
    evt.target.setAttribute('transform', 
              'translate(' + 0 + ',' + evt.target.Y + ')')
    r = r + 0.1
    evt.target.setAttribute('r',r)
    parent.root.unsuspendRedrawAll()
     if(evt.target.Y < parent.timeout) {
        clearInterval(that.timer)
     }
}
that.timer = window.setInterval(this.loop,30) 
}
this.el.addEventListener("mouseover",
function(event){ 
    t.grow(parent,event)
},
true) 

我真的需要上面动画的一些帮助。

目前动画是在鼠标悬停在对象上时触发的,但我真正想要实现的不是动画是在我希望它随机触发的事件上触发的

最佳答案

function start(){
  grow()//You will need to pass in whatever element you want this to act on.
  setTimeout(function(){start()},(Math.floor(Math.random()*10)+5)*1000);
}

基本上,第二行创建一个介于 0 和 10 之间的随机数,然后它加上 5,这样您就不会连续运行两个动画。

关于javascript - 帮助这个动画循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6968491/

相关文章:

javascript - Fabricjs 平移和缩放

javascript - 将元素添加到 DOM 时要转换什么属性来对创建的空间进行动画处理?

javascript - Cordova In App Browser 事件未触发 IOS

javascript - 更新页面而不影响正在进行的过程

css - 平滑 "transition"从动画到过渡

javascript - 选择特定的 css 动画帧

css - Angular JS 移动动画不起作用

javascript - 尝试使 hmac-sha256 与适用于 Canvas API 的 Powershell 一起使用

Javascript/HTML5 使用图像填充 Canvas

php - 防止用户重复点击链接