描述

目前提供一个方法

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 缓动框架的更多相关文章

  1. JS特效@缓动框架封装及应用

    | 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.变量CSS样式属性获取/赋值方法 给属性赋值:(既能获取又能赋值) 1)div.style.width 单个赋值:点语法,这个方法比较固定 ...

  2. JS——缓动框架的问题

    1.opacity问题:IE678支持filter: alpha(opacity=50)取值1-100:小数位容易精度丢失,所i有统一json字符串设置为百进制,赋值时除以100 2.zIndex问题 ...

  3. JS-特效 ~ 05. 缓动框架兼容封装/回掉函数/兼容透明度/层级、旋转轮播图、正则表达式、验证表单注册账号、

    缓动函数中opcity  写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...

  4. [Cocos2d-x For WP8]EaseActions缓动动作

    我们用Silverlight框架开发WP8的应用程序的时,编写动画可以使用缓动效果来实现缓动动画对吧,那么在Cocos2d-x框架里面我们一样是可以缓动动作(缓动动画),其实技术的东西都是想通的,如果 ...

  5. HTML5手机开发——滚动和惯性缓动

    1. 滚动 以下是三种实现方式: 1) 利用原生的css属性 overflow: scroll div id= parent style = overflow:scroll; divid='conte ...

  6. jQuery-1.9.1源码分析系列(十五) 动画处理——缓动动画核心Tween

    在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...

  7. 背水一战 Windows 10 (15) - 动画: 缓动动画

    [源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...

  8. canvas缓动3

    这次缓动的是旋转旋转,写完之后才知道原来rotate是绕原点旋转,而且还带着rect本身的X与Y一起,所以我采用了translate达到位移效果,以免旋转到画布外面去,画完之后效果惨不忍睹,原来是忘记 ...

  9. javascript的缓动效果

    这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...

随机推荐

  1. git cherry-pick合并某个commit

    1.使用方法及其作用 git cherry-pick可以选择某一个分支中的一个或几个commit(s)来进行操作(操作的对象是commit).例如,假设我们有个稳定版本的分支,叫v2.0,另外还有个开 ...

  2. ASP.NET全局错误处理和异常日志记录以及IIS配置自定义错误页面

    应用场景和使用目的 很多时候,我们在访问页面的时候,由于程序异常.系统崩溃会导致出现黄页.在通常的情况下,黄页对于我们来说,帮助是极大的,因为它可以帮助我们知道问题根源,甚至是哪一行代码出现了错误.但 ...

  3. nginx简易入门(转)

    相信很多人都听过nginx,这个小巧的东西慢慢地在吞食apache和IIS的份额.那究竟它有什么作用呢?可能很多人未必了解. 说到反向代理,可能很多人都听说,但具体什么是反向代理,很多人估计就不清楚了 ...

  4. maven核心,pom.xml详解(转)

    什么是pom?    pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的u ...

  5. POJ2115 C Looooops[扩展欧几里得]

    C Looooops Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 24355   Accepted: 6788 Descr ...

  6. 嵌入式Linux驱动学习之路(二十)USB设备驱动

    USB在接入系统的时候,以0的设备ID和主机通信,然后由主机为其分配新的ID. 在主机端,D+和D-都是下拉接地的.而设备端的D-接上拉时,表明此设备为高速设备:12M/s. D+接上拉时则是全速设备 ...

  7. Smokeping -- 监控网络质量

    1.下载fping.echoping.smokeping 链接:http://pan.baidu.com/s/1pL4HLYb 密码:fxe2 2.安装依赖包 yum install -y perl ...

  8. 适配iOS10的哪些事 ---- 学习笔记八

    一. 上传了一个版本,为什么没有构建版本? 解:info.plist中的Bundle version 与上一个版本一致或少于上一个版本,上线新版本时,Bundle version和Bundle ... ...

  9. WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable

    http://dl.bintray.com/sequenceiq/sequenceiq-bin/ http://www.secdoctor.com/html/yyjs/31101.html

  10. Nmap参数详解

    转自:http://blog.csdn.net/huangwwu11/article/details/20230795 Nmap--networkmapper,网络探测工具和安全/端口扫描器 nmap ...