Tween.js’s GitHub description of the content method is really unsatisfactory, with only an English guide and a simple function description, But luckily, the guide was translated into Chinese so that it was easier to learn. There are some official examples in the tween.js package but it’s not intuitive for me as a beginner, Here, I have integrated the official example and method, and written a dynamic case of vue + three.js + tween.js for your reference 😄

  • What is tween.js?

    Tween. Js is a js animation library that can generate smooth animation effects. All you need to do is tell Tween what value you want to change, what the final value of the animation will be at the end of the animation, how long the animation will take, etc. The Tween engine can calculate the value between the beginning of the animation and the end of the animation. Tween. js can be used not only in HTML pages but also directly in the mesh of Three. js to control the animation effect of the model

  • Create a simple animation example in startup VUE

npm i @tweenjs/tween.js@^18 / / download tween. Js
Copy the code
const TWEEN = require('@tweenjs/tween.js') Define a TWEEN constant in vue
Copy the code
.addTweenEsa(mesh) { // The core code mesh is a mesh model created using three.js
	this.EsaTween = new TWEEN.Tween(mesh.position)
	.to({x: 30.y: 0.z: 30}, 2000) // Change the position of the current model
	.delay(1000) // Start delay
	.yoyo(true) // Whether to enable the yoYO loop
	.easing(TWEEN.Easing.Elastic.InOut) // The motion curve
	.repeat(Infinity) // Number of repetitions
	 this.EsaTween.start() // Start animation},...Copy the code

  • Tween function method

    • Start starts the TWEEN animation. New tween.tween ().start(time). The start method takes a time parameter

    • Stop closes the TWEEN animation new tween.tween ().stop() closes the TWEEN animation that is being executed

    • Repeat controls the number of TWEEN repeats new tween.tween ().repeat(), which takes an argument describing how many repeats are required after the first TWEEN is completed

    • Yoyo controls the pattern of TWEEN repetition, new tween.tween ().yoyo(). This function is only effective if you use repeat. The row of the TWEEN will move back and forth like a yo-yo rather than start over

    • Delay Controls the delay before the TWEEN starts new tween.tween ().delay(), the delay before the TWEEN starts takes a parameter used to control the body time

    • New tween.tween ().pause(), pauses the current TWEEN motion

    • Resume Resumes the TWEEN animation new tween.tween ().resume(), which resumes the paused TWEEN motion

    • To controls the motion form and direction of the TWEEN. New tween.tween ().to(). When TWEEN is started, tween.js will read the current property value and apply relative value to find the new final value

  • Tween operation method

    • Update to update the curation TWEEN animation. The update (), dynamic update for movement between general cooperate window. RequestAnimationFrame use

    • GetAll Gets all TWEEN groups tween.getall ()

    • RemoveAll Removes all TWEEN groups tween.removeall ()

    • Var TWEEN =new TWEEN. TWEEN () var TWEEN =new TWEEN.

    • Remove remove TWEEN. Remove (TWEEN) (TWEEN) remove a specific TWEEN var TWEEN =new TWEEN. TWEEN ()

    • Var Group= tween.group (), new tween.tween ({x: Update () and tween.removeall () will not affect the configured TWEEN

  • Tween callback function

    • OnStart () new tween.tween ().onstart ((obj)=>{}), the TWEEN is executed when the TWEEN is started, but only once. The TWEEN is not repeated when repeat() is used. OnStart ((obj)=>{}) the obj tween object is passed as the first argument

    • OnStop () new tween.tween ().onstop ((obj)=>{}) But on normal completion and before stopping any possible chain tween ‘,onStop((obj)=>{}) obj tween object is passed in as the first argument

    • OnUpdate () new tween.tween ().onupdate ((obj)=>{}) onUpdate((obj)=>{}) obj TWEEN object as the first argument

    • OnComplete () new tween.tween ().oncomplete ((obj)=>{}), executed when the TWEEN completes normally (i.e. does not stop), onComplete((obj)=>{}) obj TWEEN object passed as the first argument

  • Easing function: tween.easing

    Tween.js provides some ready-made easing functions, such as linear, quadratic, cubic, quartic, quintic, sine, exponential, circular, elastic, fall and bounce, and then the corresponding easing types: In (slow then fast) Out (fast then slow) and InOut (speed up In the first half and slow down In the second half), here I sorted these slow functions into dynamic instances and put them In my GitHub. There are also instance paths In the official package: Tween.js-master \examples\03_graphs. HTML describes all the easing functions here, of course my graphs are also made according to the official provided 😋

  • conclusion

This article is just a simple introduction to the use of the tween tool, more in-depth use of such as later free to make examples in the slowly introduced 😄

GitHub Example address Tween. js Chinese Usage Guide Tween. js GitHub address tween.js Animation effect article

  • conclusion

Now feel do front-end is really difficult, VUe3, Vite all kinds of things keep coming out, don’t learn to keep up with The Times, learn to consider the reconstruction of the previous code, think of a headache, but there is no way after all behind will be beaten, we can only keep moving forward 😂, this article is just a summary of the commonly used functions and methods, I have what insufficient place also please forgive.