這篇文章帶給大家的內容是關於js中tween.js實現動畫緩慢移動的效果(實例代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
window.requestAnimFrame = (function (callback,time) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimaitonFrame || function (callback) { window.setTimeout(callback, time); }; })();
/* * t: current time(当前时间,小于持续时间,tween返回当前时间目标的状态); * b: beginning value(初始值); * c: change in value(变化量); * d: duration(持续时间)。 */
Linear:線性勻速運動效果;
Quadratic:二次方的緩動(t^2);
Cubic:三次方的緩動( t^3);
Quartic:四次方的緩動(t^4);
Quintic:五次方的緩動(t^5);
Sinusoidal:正弦曲線的緩動(sin(t));
Exponential:指數曲線的緩動(2^t);
Circular:圓形曲線的緩動(sqrt(1-t^2));
Elastic:指數衰減的正弦曲線緩動;
Back:超過範圍的三次方緩動((s 1)t^3 – st^ 2);
Bounce:指數衰減的反彈緩動。
每個效果都分成三個緩動方式,分別是:
easeIn:從0開始加速的緩動,也就是先慢後快;
easeOut:減速到0的緩動,也就是先快後慢;
easeInOut:前半段從0開始加速,後半段減速到0的緩動。
Tween.js動畫演算法使用示意實例頁面
1.
var t = 0, b = 0, c = 100, d = 10; var step = function () { // value就是当前的位置值 // 例如我们可以设置DOM.style.left = value + 'px'实现定位 var value = Tween.Linear(t, b, c, d); t++; if (t <p>2.返回頂部/setInterval</p><pre class="brush:php;toolbar:false">backTop(){ var Tween = { Linear: function(t, b, c, d) { //匀速运动 return c * t / d + b; } } Math.tween = Tween; var t = 0; const b = document.documentElement.scrollTop; const c = 100; const d = 5; const setInt = setInterval(()=>{ t--; //console.log(t) if(document.documentElement.scrollTop == 0){clearInterval(setInt)} //console.log(t); const backTop = Tween.Linear(t,b,c,d); //console.log(backTop); document.documentElement.scrollTop = backTop; },5) },
學趣樂園,backLeft
npm install @tweenjs/tween.js
var box = document.createElement('p'); box.style.setProperty('background-color', '#008800'); box.style.setProperty('width', '100px'); box.style.setProperty('height', '100px'); document.body.appendChild(box); // 动画循环 function animate(time) { requestAnimationFrame(animate); TWEEN.update(time); } requestAnimationFrame(animate); var coords = { x: 0, y: 0 }; // 开始位置 var tween = new TWEEN.Tween(coords) // 创建一个更改目标的tween .to({ x: 300, y: 200 }, 1000) // 目的位置,1s .easing(TWEEN.Easing.Quadratic.Out) // 平滑动画 .onUpdate(function() { // 目标更新后调用 // CSS translation box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)'); }) .start();
相關推薦:
如何用tween.js實作導航條滑動_html/css_WEB-ITnose
以上是js中tween.js實現動畫緩慢移動的效果(實例程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!