前端动画库Tween

[复制链接]
查看: 178   回复: 0

296

主题

296

帖子

1633

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1633
2024-6-20 22:44:21   显示全部楼层   阅读模式  

独家整理tween.js文档.png


独家整理得在线版本Tween.js文档
https://xiefansq.cn/threejsP/2024/6/21-1/

1.png


npm 安装口令
npm install @tweenjs/tween.js
引入口令
import * as TWEEN from '@tweenjs/tween.js'
示例代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>

<div id="box"></div>

<style>
        #box {
                background-color: deeppink;
                width: 100px;
                height: 100px;
        }
</style>

<script>
        const box = document.getElementById('box') // 获取我们想要设置动画的元素。

        const coords = {x: 0, y: 0} // 从 (0, 0) 开始

        const tween = new TWEEN.Tween(coords, false) // 创建一个修改“坐标”的新 tween。
                .to({x: 300, y: 200}, 1000) // 在 1 秒内移动到 (300, 200)。
                .easing(TWEEN.Easing.Quadratic.InOut) // 使用缓动函数使动画流畅。
                .onUpdate(() => {
                        // 在 tween.js 更新“坐标”后调用。
                        // 使用 CSS transform 将 'box' 移动到 'coords' 描述的位置。
                        box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)')
                })
                .start() // 立即开始 tween。

        // 设置动画循环。
        function animate(time) {
                tween.update(time)
                requestAnimationFrame(animate)
        }
        requestAnimationFrame(animate)
</script>

回复

使用道具 举报

您需要登录后才可以回帖   登录 立即注册

高级模式

南通谢凡软件科技有限公司