thwen 缓动框架
描述
目前提供一个方法
ele 元素对象
obj 操作
duration 时间
effect 缓动选择
thwenMove(option)
框架支持以下缓动策略
-指数衰减的正弦曲线缓动
-圆形曲线的缓动
-超过范围的三次方缓动
-指数衰减的反弹缓动
-正弦曲线的缓动
-5次方的缓动
-四次方的缓动
-三次方的缓动
-二次方的缓动
-当前时间*变化量/持续时间+初始值
示例
window.thwenMove({
ele: document.querySelector(".v1"),
obj: {"left": 450, "opacity": 1},
duration: 300 * 1.5,<br>
effect: [ 'Quint', 'easeInOut' ]
});
它会向右easeInOut的速度移动

https://github.com/Mrxdh
喜欢的话可以帮忙点击Follower
thwen 缓动框架的更多相关文章
- JS特效@缓动框架封装及应用
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.变量CSS样式属性获取/赋值方法 给属性赋值:(既能获取又能赋值) 1)div.style.width 单个赋值:点语法,这个方法比较固定 ...
- JS——缓动框架的问题
1.opacity问题:IE678支持filter: alpha(opacity=50)取值1-100:小数位容易精度丢失,所i有统一json字符串设置为百进制,赋值时除以100 2.zIndex问题 ...
- JS-特效 ~ 05. 缓动框架兼容封装/回掉函数/兼容透明度/层级、旋转轮播图、正则表达式、验证表单注册账号、
缓动函数中opcity 写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...
- [Cocos2d-x For WP8]EaseActions缓动动作
我们用Silverlight框架开发WP8的应用程序的时,编写动画可以使用缓动效果来实现缓动动画对吧,那么在Cocos2d-x框架里面我们一样是可以缓动动作(缓动动画),其实技术的东西都是想通的,如果 ...
- HTML5手机开发——滚动和惯性缓动
1. 滚动 以下是三种实现方式: 1) 利用原生的css属性 overflow: scroll div id= parent style = overflow:scroll; divid='conte ...
- jQuery-1.9.1源码分析系列(十五) 动画处理——缓动动画核心Tween
在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...
- 背水一战 Windows 10 (15) - 动画: 缓动动画
[源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...
- canvas缓动3
这次缓动的是旋转旋转,写完之后才知道原来rotate是绕原点旋转,而且还带着rect本身的X与Y一起,所以我采用了translate达到位移效果,以免旋转到画布外面去,画完之后效果惨不忍睹,原来是忘记 ...
- javascript的缓动效果
这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...
随机推荐
- java操作hdfs实例
环境:window7+eclipse+vmware虚拟机+搭建好的hadoop环境(master.slave01.slave02) 内容:主要是在windows环境下,利用eclipse如何来操作hd ...
- jni调试3(线程调试env变量问题)
jni层调试线程死机原因 一,导致死机原因: jni层中 线程函数中 只要添加调用env 的函数 ,,就会死机 二,解决方法 第一我们应该理解: ①(独立性) JNIEnv 是一个与线 ...
- Merge k Sorted Lists
1. Merge Two Sorted Lists 我们先来看这个 问题: Merge two sorted linked lists and return it as a new list. The ...
- sql 入门经典(第五版) Ryan Stephens 学习笔记 后续——存储引擎
一.引擎基础 1 查看系统支持的存储引擎 show engines; 2 查看表使用的存储引擎两种方法: a.show table status from database_name where na ...
- Hibernate中的一对一关联
Hibernate提供了两种一对一映射关联关系的方式: 1)按照外键映射 2)按照主键映射 下面以员工账号表和员工档案表(员工账号和档案表之间是一对一的关系)为例,介绍这两种映射关系,并使用这两种 映 ...
- Winform窗体的基本控件
一.窗体的事件 每一个窗体都有一个事件,这个窗体加载完成之后执行哪一段代码 位置:(1)右键属性→事件→load 双击进入.(2)双击窗体任意一个位置进入 public partial class F ...
- jquery工具方法swap
swap : css交换(内部) 详细内容请点击 -> 当元素的样式为display:none时获取他的宽高
- ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
- JavaScript从数组中删除指定值元素的方法
本文实例讲述了JavaScript从数组中删除指定值元素的方法.分享给大家供大家参考.具体分析如下: 下面的代码使用了两种方式删除数组的元素,第一种定义一个单独的函数,第二种为Array对象定义了一个 ...
- Swift学习(一):自定义运算符 operator
自定义运算符仅能包含这些字符: / = - + * % < >!& | ^.~ 运算符位置: 前置运算符 prefix 中间运算符 infix 后置运算符 postfix 运算符其 ...