tweenjs

lishihuan小于 1 分钟

tweenjs

https://github.com/tweenjs/tween.jsopen in new window

demo

<script>
    init()
    animate()

    function init() {
        var output = document.createElement('div')
        output.style.cssText = 'position: absolute; left: 50px; top: 300px; font-size: 100px'
        document.body.appendChild(output)

        var tween = new TWEEN.Tween({x: 50, y: 0})
        .to({x: 400}, 2000)
        .easing(TWEEN.Easing.Elastic.InOut)
        .onUpdate(function (object) {
            output.innerHTML = 'x == ' + Math.round(object.x)
            var transform = 'translateX(' + object.x + 'px)'
            output.style.webkitTransform = transform
            output.style.transform = transform
        })
        .start()
        }

    function animate(time) {
        requestAnimationFrame(animate)
        TWEEN.update(time)
    }
</script>