web前端|js教程
javascript,tween.js,详解
web前端-js教程
本文主要和大家介绍了tween.js缓动补间动画示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
微信十元抽红包源码,ubuntu 读什么软件,爬虫最佳优先遍历,php中’:’,seo不包含lzw
A、理解tween.js
歪歪头像源码软件,vscode怎么打出彩色代码,ubuntu显卡安装失败,vbs监控tomcat进程,sqlite列改名,网页设计 超链接,商城网站建设服务器,cron js插件,前端ui框架webapp,同隶爬虫,php打包下载,seo海外推广,SpringBoot2技术,asp购物网站源码,横版瀑布流网页,种植园网站模板,网页后台管理软件,phpcms 后台登陆页面,iwms网站管理系统破解,微信小程序 案例源码lzw
如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了，首先b、c、d三个参数（即初始值，变化量，持续时间）在缓动开始前，是需要先确定好的。 首先引入一个概念就补间动画 Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。 tween.js在Flash中可以解释为补间动画. 那么问题来了,什么是补间动画呢?
模板网站源码,vscode可以打开java,ubuntu 上位机,tomcat日志输出信息,爬虫例题,php QQ农场,广州网页排名seo效果,租车网站源码免费下载,php网站模板代码lzw
相信学过Flash的都知道补间动画是flash主要的非常重要的表现手段之一.补间动画有动作补间动画与形状补间动画两种,但是在js中却不需要了解这么多. 好了,废话不多说,先看看百度百科关于补间动画给出的定义: 补间动画：做flash动画时，在两个关键帧中间需要做“补间动画”，才能实现图画的运动； 插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的
那么什么是关键帧呢? 举个栗子: 先科普一下,平常所看的电影,动画都是24帧的,24帧为一秒.在人眼可以捕捉的范围内.可以想象两个点之间有有22个点,形成一条直线或者曲线.而每一个点就代表一帧,帧——就是动画中最小单位的单幅影像画面,而单幅影像画面就可以看做是一个对象(一切皆对象,除去值类型)了.而这条线就代表对象的运动轨迹.
B、四个参数
t: current time–>代表第一个点，也就是第一帧，也就是一个动画开始的地方。
b: beginning value–>代表初始值，也就是开始量，我们看电影或者动画一般都不会看序幕把，那么跳过开头部分，选择第一帧和最后一帧之间你要开始看位置，而此位置就是初始值。
c: change in value–>代表的就是最后一帧减去初始值就是变化量，
d: duration–>代表最后一帧,1s的结束,也是动画的结束。
tween.js的使用 1.下载 2.引入 3.使用tween.js语法
Tween.缓动函数名.缓动效果名(t,b,c,d);
注意:当开始步数增加到与结束步数相等时,整个运动结束. 注注意:只有当t增加到与d相等时才会结束运动;如果不等,运动不会停止.
C、tween文件代码
/* * Tween.js * t: current time（当前时间）； * b: beginning value（初始值）； * c: change in value（变化量）； * d: duration（持续时间）。*/var Tween = { Linear: function(t, b, c, d) { //匀速 return c * t / d + b; }, Quad: { //二次方缓动效果 easeIn: function(t, b, c, d) {return c * (t /= d) * t + b; }, easeOut: function(t, b, c, d) {return -c *(t /= d)*(t-2) + b; }, easeInOut: function(t, b, c, d) {if ((t /= d / 2) < 1) return c / 2 * t * t + b;return -c / 2 * ((--t) * (t-2) - 1) + b; } }, Cubic: { //三次方缓动效果 easeIn: function(t, b, c, d) {return c * (t /= d) * t * t + b; }, easeOut: function(t, b, c, d) {return c * ((t = t/d - 1) * t * t + 1) + b; }, easeInOut: function(t, b, c, d) {if ((t /= d / 2) < 1) return c / 2 * t * t*t + b;return c / 2*((t -= 2) * t * t + 2) + b; } }, Quart: { //四次方缓动效果 easeIn: function(t, b, c, d) {return c * (t /= d) * t * t*t + b; }, easeOut: function(t, b, c, d) {return -c * ((t = t/d - 1) * t * t*t - 1) + b; }, easeInOut: function(t, b, c, d) {if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;return -c / 2 * ((t -= 2) * t * t*t - 2) + b; } }, Quint: { //五次方缓动效果 easeIn: function(t, b, c, d) {return c * (t /= d) * t * t * t * t + b; }, easeOut: function(t, b, c, d) {return c * ((t = t/d - 1) * t * t * t * t + 1) + b; }, easeInOut: function(t, b, c, d) {if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;return c / 2*((t -= 2) * t * t * t * t + 2) + b; } }, Sine: { //正弦缓动效果 easeIn: function(t, b, c, d) {return -c * Math.cos(t/d * (Math.PI/2)) + c + b; }, easeOut: function(t, b, c, d) {return c * Math.sin(t/d * (Math.PI/2)) + b; }, easeInOut: function(t, b, c, d) {return -c / 2 * (Math.cos(Math.PI * t/d) - 1) + b; } }, Expo: { //指数缓动效果 easeIn: function(t, b, c, d) {return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; }, easeOut: function(t, b, c, d) {return (t==d) ? b + c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }, easeInOut: function(t, b, c, d) {if (t==0) return b;if (t==d) return b+c;if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; } }, Circ: { //圆形缓动函数 easeIn: function(t, b, c, d) {return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; }, easeOut: function(t, b, c, d) {return c * Math.sqrt(1 - (t = t/d - 1) * t) + b; }, easeInOut: function(t, b, c, d) {if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; } }, Elastic: { //指数衰减正弦曲线缓动函数 easeIn: function(t, b, c, d, a, p) { //加速var s;if (t==0) return b;if ((t /= d) == 1) return b + c;if (typeof p == "undefined") p = d * .3;if (!a || a < Math.abs(c)) { s = p / 4; a = c;} else { s = p / (2 * Math.PI) * Math.asin(c / a);}return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; }, easeOut: function(t, b, c, d, a, p) { //减速var s;if (t==0) return b;if ((t /= d) == 1) return b + c;if (typeof p == "undefined") p = d * .3;if (!a || a < Math.abs(c)) { a = c; s = p / 4;} else { s = p/(2*Math.PI) * Math.asin(c/a);}return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b); }, easeInOut: function(t, b, c, d, a, p) { //先加速后减速var s;if (t==0) return b;if ((t /= d / 2) == 2) return b+c;if (typeof p == "undefined") p = d * (.3 * 1.5);if (!a || a < Math.abs(c)) { a = c; s = p / 4;} else { s = p / (2 *Math.PI) * Math.asin(c / a);}if (t < 1) return -.5 * (a * Math.pow(2, 10* (t -=1 )) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p ) * .5 + c + b; } }, Back: { //超过范围的三次方的缓动函数 easeIn: function(t, b, c, d, s) {if (typeof s == "undefined") s = 1.70158;return c * (t /= d) * t * ((s + 1) * t - s) + b; }, easeOut: function(t, b, c, d, s) {if (typeof s == "undefined") s = 1.70158;return c * ((t = t/d - 1) * t * ((s + 1) * t + s) + 1) + b; }, easeInOut: function(t, b, c, d, s) {if (typeof s == "undefined") s = 1.70158; if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;return c / 2*((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; } }, Bounce: { //指数衰减的反弹曲线缓动函数 easeIn: function(t, b, c, d) {return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; }, easeOut: function(t, b, c, d) {if ((t /= d) < (1 / 2.75)) { return c * (7.5625 * t * t) + b;} else if (t < (2 / 2.75)) { return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;} else if (t < (2.5 / 2.75)) { return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;} else { return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;} }, easeInOut: function(t, b, c, d) {if (t < d / 2) { return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;} else { return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;} } }}Math.tween = Tween;
D、举个栗子
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) }} })
E、个人体会
tween的优势在于tween实现效果是依据算法，不是某种语言的语法，因此可以运用的地方很广泛，一次学习终身受益。
tween.js的使用实例详解
简单的动画库封装tween.js实例教学
Tween.js动画详细介绍
