Explain in detail what tween.js is (graphic tutorial)
The following is the content about tween.js that I have compiled for you. Interested students can check it out.
First post the basic knowledge, and then explain how to use Tween.js:
1.第三方动画 tween.js 2.实现:缓动公式(效果:控制物体在某个时间段内的运动速度)
Easing function:
1.linear 匀速 2.Quad 二次方缓动效果 3.Cubic 三次方缓动效果 4.Quart 四次方缓动效果 5.Quint 五次方缓动效果 6.Sine 正弦缓动效果 7.Expo 指数缓动效果 8.Circ 圆形缓动函数 9.Elastic 指数衰减正弦曲线缓动函数 10.Back 超过范围的三次方的缓动函数 11.Bounce 指数衰减的反弹曲线缓动函数
Each easing function Both have three effects:
1.easeIn 加速 2.easeOut 减速 3.easeInOut 先加速后减速
Note: linear has only one effect, uniform
Each function has four parameters:
1.t====> current time:当前时间.解释为:开始的步数(一般从0开始),预示着一段动画的开始. 2.b====>beginning value 初始值.解释为:开始量(开始的属性值) 3.c====>change in value 变化量.解释为属性值的改变量:结束位置的属性值 - 开始位置的属性值 4.d====>duration 持续时间.解释为:结束的步数(运动的总时间)
Note: When the number of starting steps increases When the number of steps is equal to the end step, the entire movement ends. Note: The movement will only end when t increases to be equal to d; if not, the movement will not stop.
Use of tween.js 1 . Download 2. Import 3. Use tween.js syntax
Tween. Easing function name. Easing effect name (t, b, c, d);
If you see the above If you already understand it, you can skip the following part. The following is an explanation of Tween.js. Next, we will introduce how to use this Tween. First, the three parameters b, c, and d (i.e. initial value, change amount, duration) are slowed down. Before starting the action, it needs to be determined. First, introduce a concept of tweening animation. Flash uses the Tween class when doing animations. It can be used to create many animation effects, such as easing, spring, etc. tween.js can be interpreted as tweening animation in Flash. So the question is, what is tweening animation?
相信学过Flash的都知道补间动画是flash主要的非常重要的表现手段之一.补间动画有动作补间动画与形状补间动画两种,但是在js中却不需要了解这么多. 好了,废话不多说,先看看百度百科关于补间动画给出的定义: 补间动画：做flash动画时，在两个关键帧中间需要做“补间动画”，才能实现图画的运动； 插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的
那么什么是关键帧呢? 举个栗子: 先科普一下,平常所看的电影,动画都是24帧的,24帧为一秒.在人眼可以捕捉的范围内.可以想象两个点之间有有22个点,形成一条直线或者曲线.而每一个点就代表一帧,帧——就是动画中最小单位的单幅影像画面,而单幅影像画面就可以看做是一个对象(一切皆对象,除去值类型)了.而这条线就代表对象的运动轨迹.
重点来了:
t:代表第一个点,也就是第一帧,也就是一个动画开始的地方. b:代表初始值,也就是开始量,我们看电影或者动画一般都不会看序幕把,那么跳过开头部分,选择第一帧和最后一帧之间你要开始看位置,而此位置就是初始值. c:代表的就是最后一帧减去初始值就是变化量, d:代表最后一帧,1s的结束,也是动画的结束
或者这样理解：
t:当前步数 b:初始位置 c:总距离(变化量) d:总步数
上面是我整理给大家的有关tween.js内容，希望今后会对大家有帮助。
相关文章：
The above is the detailed content of Explain in detail what tween.js is (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1672
14
1428
52
1332
25
1277
29
1256
24
What kind of process is ccsvchst.exe?
Feb 19, 2024 pm 11:33 PM
ccsvchst.exe is a common process file that is part of the Symantec Endpoint Protection (SEP) software, and SEP is an endpoint protection solution developed by the well-known network security company Symantec. As part of the software, ccsvchst.exe is responsible for managing and monitoring SEP-related processes. First, let’s take a look at SymantecEndpointProtection(
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
How to use JavaScript and WebSocket to implement a real-time online ordering system
Dec 17, 2023 pm 12:09 PM
Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order
How to implement an online reservation system using WebSocket and JavaScript
Dec 17, 2023 am 09:39 AM
How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.
What is a dual-core browser?
Feb 20, 2024 am 08:22 AM
Dual-core browser is a browser software that integrates two different browser cores. The kernel is the core part of the browser, responsible for rendering web content and executing web scripts and other functions. Traditional browsers generally use only a single kernel, such as IE browser using Trident kernel, Chrome browser using WebKit/Blink kernel, Firefox browser using Gecko kernel, etc. The dual-core browser integrates two different cores into one browser, and users can freely switch between them as needed. The emergence of dual-core browsers
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
