Tween.js动画函数使用demo

news2024/11/6 3:17:15

案例:

  • 小球的运动
  • 数字的自增
    在这里插入图片描述

demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>
    <style>
      .circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: orange;
        position: absolute;
      }
      #box {
        background-color: deeppink;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="circle" style="top: 0px; left: 0px"></div>
    <div id="box"></div>
    <script>
      const position = { x: 0 }; // position 对应初始位置 也就是left 是0px
      const div = document.querySelector(".circle"); // 获取dom元素
      const tweenA = new TWEEN.Tween(position) // new TWEEN.Tween里面放置初始位置,也就是left 是0px
        .to({ x: 500 }, 1000) // to函数第一个参数里面放置要到哪里 也就是left:500px的地方
        // to函数第二个参数是要花多少时间,也就是1000毫秒
        .onUpdate(function () {
          // onUpdate函数放置这段时间我们做什么,也就是div的left值不断变化,
          div.style.left = position.x + "px"; // position.x就是上面说的不断变化的left值,
        });
      tweenA.start(); // 启动这个动画
      tweenA.yoyo(true)
      tweenA.repeat(3)

      const box = document.getElementById("box"); // Get the element we want to animate.
      const coords = { x: 0, y: 0 }; // Start at (0, 0)
      const tweenB = new TWEEN.Tween(coords, false) // Create a new tween that modifies 'coords'.
        .to({ x: 300, y: 200 }, 1000) // Move to (300, 200) in 1 second.
        // .easing(TWEEN.Easing.Quadratic.InOut) // Use an easing function to make the animation smooth.
        .onUpdate((object) => {
          // console.log(object.x)
          // Called after tween.js updates 'coords'.
          // Move 'box' to the position described by 'coords' with a CSS translation.
          box.style.setProperty(
            "transform",
            "translate(" + coords.x + "px, " + coords.y + "px)"
          );
        })
        .start(); // Start the tween immediately.

      let data = { num: 100 };
      const tweenC = new TWEEN.Tween(data)
        .to({ num: 230 }, 1000).easing(TWEEN.Easing.Quadratic.InOut)
        .onUpdate((a) => {
          num = Math.floor(data.num);
          console.log(num);
          box.innerText = num
        })
        .start()

      function animate() {
        requestAnimationFrame(animate); // requestAnimationFrame可以看成setTimeout(animate, 17)
        tweenA.update(); // 每隔一段时间,update方法会调用上面的onUpdate函数,这样让left变化,小球位置也变化
        tweenB.update();
        tweenC.update();
        // tweenA.chain(tweenB)
        // tweenB.chain(tweenA)
      }
      animate();
    </script>
  </body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/905421.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AI 绘画Stable Diffusion 研究(十三)SD数字人制作工具SadTlaker使用教程

免责声明: 本案例所用安装包免费提供&#xff0c;无任何盈利目的。 大家好&#xff0c;我是风雨无阻。 想必大家经常看到&#xff0c;无论是在产品营销还是品牌推广时&#xff0c;很多人经常以数字人的方式来为自己创造财富。而市面上的数字人收费都比较昂贵&#xff0c;少则几…

spring事件监听event(默认的mq)

文章目录 前言一、event是什么&#xff1f;二、使用步骤1.事件2.事件监听3.发布事件 三、测试结果总结 前言 项目中的业务难免是相互关联的,但是代码中我们应该尽量做到低耦合,常见的做法就是引入mq来作为松耦合的一种手段; 其实最常见的解耦和就是接口了,MVC直接通过接口(约定…

反弹shell bash -i命令

目录 0x01 什么是反弹shell&#xff1f;   0x02 命令拆分详解   0x03 文件描述符   0x04 shell 输入/输出重定向   0x05 输入输出结合获得shell 什么是反弹shell&#xff1f; 假设有两台主机 A(控制端) B(被控端) 正向shell&#xff0c;就是ssh、Telnet的连接&#xf…

YOLOv5源码中的参数超详细解析(4)— 推理部分detect.py

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。YOLOv5是一种先进的目标检测算法&#xff0c;它可以实现快速和准确的目标检测。detect.py是YOLOv5项目目录结构中的一个重要的脚本文件&#xff0c;它用于执行目标检测任务&#xff0c;可以通过命令行参数指定要检测的图像…

【三维重建】Factor Fields: 超越神经场的统一框架

论文&#xff1a;Factor Fields: A Unified Framework for Neural Fields and Beyond 文章&#xff1a;https://arxiv.org/abs/2302.01226 项目&#xff1a;https://apchenstu.github.io/FactorFields/ 文章目录 摘要一、前言二、Factor Fields2.1.字典场&#xff08;DiF&#…

二级MySQL(三)——数据库的增删改查

创建一个新的数据库&#xff1a; CREATE DATABASE db_school DEFAULT CHARACTER SET GB2312 DEFAULT COLLATE GB2312_chinese_ci&#xff1b; 查找创建的数据库&#xff08;全部&#xff09;&#xff1a; 其他的是SQL自带的数据库 查阅我们自己创建的字符集以及对应的字符集…

Qt 实现 360 安全卫士

作者&#xff1a; 一去、二三里 个人微信号&#xff1a; iwaleon 微信公众号&#xff1a; 高效程序员 回想起来&#xff0c;这也算是一个有故事的代码。虽然时间比较久远&#xff0c;但还是记忆犹新。 那就简单说说吧&#xff0c;也不枉费当年的一片心血&#xff01; 说说我的…

java可变字符串

一、常用方法 以StringBuilder为例 1、append(String str) 添加 StringBuilder str new StringBuilder("hello"); System.out.println(str);//在源字符串后添加world StringBuilder add str.append("world"); System.out.println(add);//结果helloworl…

Platypus:Quick,Cheap,and Powerful Refinement of LLMs

Platypus:Quick,Cheap,and Powerful Refinement of LLMs IntroductionMethod2.1 Curating Open- PlatypusRemoving similar&duplicate questionsContamination CheckFine-tuning & mergingResult参考Introduction 现在大模型已经取得很不错的结果,如何把大模型的能…

PL 侧驱动和fpga 重加载的方法

可以解决很多的问题 时钟稳定后加载特定fpga ip &#xff08;要不内核崩的一塌糊涂&#xff09;fpga 稳定复位软件决定fpga ip 加载的时序 dluash load /usr/local/scripts/si5512_setup.lua usleep 30 mkdir -p /lib/firmware cp -rf /usr/local/firmare/{*.bit.bin,*.dtbo} …

css 实现svg动态图标效果

效果演示&#xff1a; 实现思路&#xff1a;主要是通过css的stroke相关属性来设置实现的。 html代码: <svgt"1692441666814"class"icon"viewBox"0 0 1024 1024"version"1.1"xmlns"http://www.w3.org/2000/svg"p-id"…

jps(JVM Process Status Tool):虚拟机进程状况工具

jps&#xff08;JVM Process Status Tool&#xff09;&#xff1a;虚拟机进程状况工具 列出正在运行的虚拟机进程&#xff0c;并显示虚拟机执行主类名称&#xff08;Main Class&#xff0c;main()函数所在的类&#xff09;以及这些进程的本地虚拟机唯一ID&#xff08;LVMID&am…

VMware上搭建的虚拟机突然本地无法连接服务器

长时间没有使用VMware 虚拟机了&#xff0c;今天突然登录上去&#xff0c;启动虚拟服务器后发现本地等不了了&#xff0c; 经过排查发现是开启了&#xff1a;VirtualBox Host-Only Network 关闭之后就本机就可以直连服务器了

java能实现热替换而属性不丢失的原因

1.替换的是klass&#xff0c;数据在oop里面 2.这个没想通说明对java面向对象底层实现不了解。

Midjourney API 申请及使用

在人工智能绘图领域&#xff0c;想必大家听说过 Midjourney 的大名吧&#xff01; Midjourney 以其出色的绘图能力在业界独树一帜。无需过多复杂的操作&#xff0c;只要简单输入绘图指令&#xff0c;这个神奇的工具就能在瞬间为我们呈现出对应的图像。无论是任何物体还是任何风…

linux中shell脚本——shell数组、正则表达式及文件三剑客之AWK

目录 一.shell数组 1.1.数组分类 1.2.定义数组方法 二.正则表达式 2.1.元字符 2.2.表示次数 2.3.位置锚定 2.4.分组 2.5.扩展正则表达式 三.文本三剑客之AWK 3.1.awk介绍及使用格式 3.2.处理动作 3.3.awk选项 3.4.awk处理模式 2.5.awk常见的内置变量 2.6.if条…

5.5.webrtc的线程管理

今天呢&#xff0c;我们来介绍一下线程的管理与绑定&#xff0c;首先我们来看一下web rtc中的线程管理类&#xff0c;也就是thread manager。对于这个类来说呢&#xff0c;其实实现非常简单&#xff0c;对吧&#xff1f; 包括了几个重要的成员&#xff0c;第一个成员呢就是ins…

2021年12月 C/C++(三级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题:我家的门牌号 我家住在一条短胡同里,这条胡同的门牌号从1开始顺序编号。 若所有的门牌号之和减去我家门牌号的两倍,恰好等于n,求我家的门牌号及总共有多少家。 数据保证有唯一解。 时间限制:1000 内存限制:65536 输入 一个正整数n。n < 100000。 输出 一行,包含…

DTC 19服务学习2

紧跟上篇 0x04 reportDTCSnapshotRecordByDTCNumber 通过DTC和快照序列来获取DTC快照记录。 适用以下假设&#xff1a; — 服务器支持存储给定 DTC 的两个 DTCSnapshot 记录的能力。 — 此示例假定是上一个示例的延续。 — 假设服务器请求服务器存储的 DTC 编号 123456 的两个…

【学会动态规划】环绕字符串中唯一的子字符串(25)

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…