<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://www.jb51.net/Tween/tween.js"></script> <style> *{margin: 0;padding: 0;} .out{width: 800px;height: 500px;background: #e5e5e5;position: relative;padding: 20px;text-align: center;} .inner{width: 50px;height: 50px;border-radius: 50%;background: #FF0000; position: absolute;left: 50px;top: 50px;} </style> </head> <body> <div> <div></div> <button @click="start()">start</button> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { t: 0, b: 50, c: 500, d: 1500, }, methods:{ start(){ var t = this.t; const b = this.b; const c = this.c; const d = this.d; const setInt = setInterval(()=>{ t++; console.log(t) if(t==300){clearInterval(setInt)} console.log(t); const ballLeft = Tween.Linear(t,b,c,d)+"px"; ball.style.left = ballLeft; },20) } } }) </script> </html>
五、个人体会
tween的优势在于tween实现效果是依据算法，不是某种语言的语法，因此可以运用的地方很广泛，一次学习终身受益。