{"action":"opened","issue":{"url":"https://api.github.com/repos/icewaters/icewaters.github.io/issues/38","labels_url":"https://api.github.com/repos/icewaters/icewaters.github.io/issues/38/labels{/name}","comments_url":"https://api.github.com/repos/icewaters/icewaters.github.io/issues/38/comments","events_url":"https://api.github.com/repos/icewaters/icewaters.github.io/issues/38/events","html_url":"https://github.com/icewaters/icewaters.github.io/issues/38","id":59198922,"number":38,"title":"html5 用requestAnimationFrame来代替timeout","user":{"login":"icewaters","id":2446601,"avatar_url":"https://avatars.githubusercontent.com/u/2446601?v=3","gravatar_id":"","url":"https://api.github.com/users/icewaters","html_url":"https://github.com/icewaters","followers_url":"https://api.github.com/users/icewaters/followers","following_url":"https://api.github.com/users/icewaters/following{/other_user}","gists_url":"https://api.github.com/users/icewaters/gists{/gist_id}","starred_url":"https://api.github.com/users/icewaters/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/icewaters/subscriptions","organizations_url":"https://api.github.com/users/icewaters/orgs","repos_url":"https://api.github.com/users/icewaters/repos","events_url":"https://api.github.com/users/icewaters/events{/privacy}","received_events_url":"https://api.github.com/users/icewaters/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-02-27T07:08:39Z","updated_at":"2015-02-27T07:08:39Z","closed_at":null,"body":"旧的动画实现方式\r\n```js\r\nfunction animate(element, name, from, to, time) {\r\n    time = time || 800; //默认0.8秒\r\n\r\n    var style = element.style,\r\n        latency = 60, // 每60ms一次变化\r\n        count = time / latency, //变化的次数\r\n        step = Math.round((to - from) / count), //每一步的变化量\r\n        now = from;\r\n\r\n    function go() {\r\n        count--;\r\n        now = count ? now + step : to;\r\n        style[name] = now + 'px';\r\n\r\n        if (count) {\r\n            setTimeout(go, latency);\r\n        }\r\n    }\r\n\r\n    style[name] = from + 'px';\r\n    setTimeout(go, latency);\r\n｝\r\n```\r\n新的动画实现现方式\r\n```js\r\nfunction animate(element, name, from, to, time) {\r\n    time = time || 800; // 默认0.8秒\r\n    var style = element.style,\r\n        startTime = new Date;\r\n\r\n    function go(timestamp) {\r\n        var progress = timestamp - startTime;\r\n        if (progress >= time) {\r\n            style[name] = to + 'px';\r\n            return;\r\n        }\r\n\r\n        var now = (to - from) * (progress / time);\r\n        style[name] = now.toFixed() + 'px';\r\n        requestAnimationFrame(go);\r\n    }\r\n\r\n    style[name] = from + 'px';\r\n\r\n    requestAnimationFrame(go);\r\n}\r\n```\r\n\r\n\r\n\r\n\r\n"}}