补间动画tween.js
一、理解tween.js
如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b、c、d三个参数(即初始值,变化量,持续时间)在缓动开始前,是需要先确定好的。 首先引入一个概念就补间动画 Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动、弹簧等等。 tween.js在Flash中可以解释为补间动画. 那么问题来了,什么是补间动画呢?
相信学过Flash的都知道补间动画是flash主要的非常重要的表现手段之一.补间动画有动作补间动画与形状补间动画两种,但是在js中却不需要了解这么多. 好了,废话不多说,先看看百度百科关于补间动画给出的定义: 补间动画:做flash动画时,在两个关键帧中间需要做“补间动画”,才能实现图画的运动; 插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的
那么什么是关键帧呢? 举个栗子: 先科普一下,平常所看的电影,动画都是24帧的,24帧为一秒.在人眼可以捕捉的范围内.可以想象两个点之间有有22个点,形成一条直线或者曲线.而每一个点就代表一帧,帧——就是动画中最小单位的单幅影像画面,而单幅影像画面就可以看做是一个对象(一切皆对象,除去值类型)了.而这条线就代表对象的运动轨迹.
二、四个参数
- 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相等时才会结束运动;如果不等,运动不会停止.
三、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;
四、举个栗子
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="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 id="app" class="out"><div class="inner" id="ball"></div><button id="start" @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实现效果是依据算法,不是某种语言的语法,因此可以运用的地方很广泛,一次学习终身受益。
六、欢迎交流指正,关注我,一起学习
补间动画tween.js相关推荐
- Android 补间动画(Tween Animation)
Tween Animation(补间动画): Tween动画,通过对View的内容进行一系列的图形变换 (包括平移.缩放.旋转.改变透明度)来实现动画效果.动画效果的定义可以采用XML来做也可以采用编 ...
- Godot4补间动画Tween
目录 基础补间 并行补间 后缀属性 基础补间 本补间动画在 2d 层面执行,使用 godot4 版本 新建一个 sprite2d 作为我们的基础角色,创建过程不再赘述 为刚创建的 sprite 挂载如 ...
- 补间动画 http://www.sunnyos.com/
版权声明:本文为博主原创文章,未经博主允许不得转载. http://www.360doc.com/content/16/0322/07/31855033_544211806.shtml Tween动画 ...
- android 补间动画有停顿,Android动画原理分析(一)----补间动画
1.基本特点 补间动画(Tween动画),是android最早的动画框架,从Android1.0开始就有. 功能:可以实现移动.旋转.缩放.渐变四种效果以及这四种效果的组合形式. 实现形式:xml和代 ...
- 属性动画、帧动画、补间动画的介绍使用及对比
属性动画.帧动画.补间动画的介绍使用及对比 版权声明:转载必须注明本文转自南轩的博客: http://blog.csdn.net/nanxuan521 在android开发中经常会碰到一些动画需求,其 ...
- 属性动画、帧动画、补间动画
补间动画(Tween Animation) 1.补间动画的特性: a.渐变动画支持四种类型:平移(Translate).旋转(Rotate).缩放(Scale).不透明度 b. 只是显示的位置变动,V ...
- 帧动画和补间动画看这篇足够了
帧动画和补间动画看这篇足够了 本文原创,转载请注明出处. 欢迎关注我的 简书 ,关注我的专题 Android Class 我会长期坚持为大家收录简书上高质量的 Android 相关博文. 写在前面: ...
- android 帧动画张数限制,Android帧动画和补间动画看这篇足够了
原标题:Android帧动画和补间动画看这篇足够了 写在前面 为了使用户的交互更加流畅自然,动画也就成为了一个应用中必不可少的元素之一.在 Android 中常用的动画分类无外乎三种,最早的帧动画.补 ...
- 详解TWEEN.JS 补间动画
tweenJS是一个简单的javascript补间动画库,支持数字,对象属性,CSS样式等的动态效果过渡,允许平滑的修改元素的属性值.告诉它需要改变的元素的开始值和结束值,并设置好过渡时间,补间动画将 ...
- Andriod anim 补间(Tween)动画与Interpolator以及setCustomAnimations方法
补间(Tween)动画 Android 使用Animation代抽象的动画类,它包括如下几个子类. AlphaAnimation:透明度改变的动画.创建该动画时要指定动画开始时的透明度.结束时的透明度 ...
最新文章
- Developerkit Link Develop Demo 环境配置指南
- jQuery操作Dom、jQuery事件机制、jQuery补充部分
- php curl处理get和post请求
- scrapy爬虫系列之三--爬取图片保存到本地
- 构建一个文本搜索系统
- gitmaven命令
- pip升级python包命令_python安装扩展库常用的是什么工具
- catalog英文翻译_“目录”的英文翻译是“catalogquot;还是quot;contentsquot;
- 【生活资讯】5款好用的生活学习类APP
- 编程语言-jul2014
- 手机里tencent文件夹能删吗_手机内存卡里的tencent这个文件夹可以删吗?
- 【DB2】NULLS LAST与NULLS FIRST
- 转 windows查看端口占用命令
- 关于web开发的一点理解
- SQL Server 2008,三年等待物有所值
- Unity中使用VideoPlayer控制播放暂停进度条
- 如何识别Android渠道安装来源追踪?
- UVa 1586 Molar mass(模拟)
- java中检测鼠标_java – 在屏幕上检测鼠标移动
- 安装程序向硬盘复制文件是遇到错误:[Errno 5] Input/out error ;U盘安装Ubuntu18.04.1遇到错误
热门文章
- java在退出前释放资源_【java】手动释放资源问题
- 用浏览器控制台获取一些网页资源
- 作为一名31岁的软件测试员,工作3年,月薪不到2W,担心被应届生取代
- 计算机内存外存的区别
- phpcms下载页直接显示下载真实地址方法
- HTML-CSS前端大作业一站式教育机构响应式前端网页网站模板
- 视频目标检测入门介绍
- ios降级鸿蒙,ios14更新正式版能降级到ios13.7吗 苹果ios14怎么降级方法教程
- java魂斗罗zip_魂斗罗rom
- 5g多卡聚合路由器/5g多卡汇聚路由器,多网融合,弱网通信,多卡聚合路由器,5G多卡聚合路由,工业路由器,移动物联,商用路由, 视频直播, 融合通讯, 多链路聚合,5G多卡聚合,5G多链路聚合