Comments (5)
Will the page jump?
let initTween=()=>{
if(tween&&tween.isPlaying()){
tween.stop();
}
// 计算基于当前方向的目标角度
const targetAngle = direction === 1 ? 360 : 0;
// 如果当前角度接近360并且方向为1,或者当前角度接近0并且方向为-1,重置角度以避免跳跃
if (direction === 1) {
rotation.angle = 0
}
else{
rotation.angle = 360
}
console.log(rotation)
// 根据当前角度和目标角度重新初始化Tween
tween = new TWEEN.Tween(rotation)
.to({ angle: targetAngle }, props.rotateTime)
.onUpdate((item,t) => {
if (divRotate.value) {
time=t
divRotate.value.style.transform = `rotateY(${item.angle}deg)`;
}
})
.repeat(Infinity) // 无限重复
.easing(TWEEN.Easing.Linear.None) // 线性缓动
.start(props.rotateTime -(time*props.rotateTime)); // 使用当前角度计算动画开始时间
}
from tween.js.
I see you solved your first problem. Now I'm not sure what your second question is. It is better if you post a working example, and describe what it is not doing, and what you want it to do.
from tween.js.
I see you solved your first problem. Now I'm not sure what your second question is. It is better if you post a working example, and describe what it is not doing, and what you want it to do.
My current problem is that I want to rotate in a loop from 0 to 360 degrees. When I click on it, I change the direction of rotation from 360 degrees to 0 degrees. If I change the jump, it will jump
from tween.js.
You might be better off not using Tween for that specific goal.
let angle = 0
let lastTime = performance.now()
requestAnimationFrame(function loop(time) {
const delta = time - last time
lastTime = time
angle = angle + delta / props.rotateTime * 360 * direction
divRotate.value?.style.transform = `rotateY(${angle}deg)`
requestAnimationFrame(loop)
})
I recommend that approach for this use case, much simpler!
Closing, but feel to ask any more questions. :)
from tween.js.
You might be better off not using Tween for that specific goal.
let angle = 0 let lastTime = performance.now() requestAnimationFrame(function loop(time) { const delta = time - last time lastTime = time angle = angle + delta / props.rotateTime * 360 * direction divRotate.value?.style.transform = `rotateY(${angle}deg)` requestAnimationFrame(loop) })I recommend that approach for this use case, much simpler!
Closing, but feel to ask any more questions. :)
Thank you, I think it's complicated. Sorry.
from tween.js.
Related Issues (20)
- Make sure GitHub Pages is synced so that docs stay up to date. HOT 1
- `Timeline` feature HOT 1
- CJS entry point can't be loaded in Node.js HOT 4
- How to update .to value onRepeat? HOT 1
- Tween can't be restarted from onComplete callback. HOT 1
- [vite] Internal server error: Failed to resolve import "@tweenjs/tween.js/dist" from "src\index.ts". Does the file exist? HOT 3
- Simplify Tween, remove some stuff, make it easier to maintain. HOT 9
- Repeating value is incorrect over time HOT 1
- Proposal : Fix runs-on label - Directly specify Ubuntu 22.04 HOT 3
- Pausing a tween from a Group removes that tween from the Group's array. HOT 5
- [bug] calling tween.stop() does not cause tween.update() to return false
- CJS import broken HOT 2
- when time is negative, the result is bad HOT 4
- chain doesn't work HOT 3
- link to understanding-tweenjs not working :( HOT 1
- Types are not included with ModuleResolution `Node16` or `Bundler` options HOT 1
- [bug] yoyo has wrong value HOT 4
- Will the value not be automatically updated? HOT 1
- ThreeJS Object3D flickers when tweening with yoyo turned on. HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tween.js.