首先此函数是基于大家都知道的Tween动画算法的,在此基础上使用了三中讲到的兼容版动画贞,可以使动画变得更流畅。

1. 首先要记得引入Tween.js

2. 引入mTween.js

3. 调用

* mTwee.js文件如下: (这里的m意为mobile)

(function(){
window.requestAnimationFrame = window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame;
window.cancelAnimationFrame = window.cancelAnimationFrame|| window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame||window.cancelRequestAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame;
if(!requestAnimationFrame){
var lastTime = Date.now();
window.requestAnimationFrame = function(callback){
var id;
var nowTime = Date.now();
var delay = Math.max(16.7-(nowTime-lastTime),0);
id = setTimeout(callback,delay);
lastTime = nowTime + delay;
return id;
};
}
if(!cancelAnimationFrame){
window.cancelAnimationFrame = function(index){
clearTimeout(index);
};
}
})(); function transform(el,attr,val){
if(!el.transform){
el.transform = {
};
}
if(val === undefined){
return el.transform[attr];
}
el.transform[attr] = val;
var str = "";
for(var s in el.transform){
switch(s){
case "rotate":
case "rotateX":
case "rotateY":
case "rotateZ":
case "skewX":
case "skewY":
str += s +"("+el.transform[s]+"deg) ";
break;
case "scale":
case "scaleX":
case "scaleY":
str += s +"("+el.transform[s]+") ";
break;
case "translateX":
case "translateY":
case "translateZ":
str += s +"("+el.transform[s]+"px) ";
break;
}
}
el.style.WebkitTransform = el.style.transform = str;
} function css(el,attr,val){
var transformAttr = ["rotate","rotateX","rotateY","rotateZ","skewX","skewY","scale","scaleX","scaleY","translateX","translateY","translateZ"];
for(var i = 0; i < transformAttr.length; i++){
if(attr == transformAttr[i]){
return transform(el,attr,val);
}
}
if(val === undefined){
val = getComputedStyle(el)[attr];
console.log(val);
val = parseFloat(val);
return val;
}
if(attr == "opacity"){
el.style[attr] = val;
} else {
el.style[attr] = val + "px";
}
} function startMove(init){
var t = 0;
var b = {};
var c = {};
var d = Math.ceil(init.time/16.7);
cancelAnimationFrame(init.el.timer);
for(var s in init.target) {
b[s] = css(init.el,s);
c[s] = init.target[s] - b[s];
}
init.el.timer = requestAnimationFrame(move);
function move(){
if(t > d){
cancelAnimationFrame(init.el.timer);
init.callBack&&init.callBack.call(init.el);
} else {
t++;
for(var s in init.target){
var val = Tween[init.type](t,b[s],c[s],d);
css(init.el,s,val);
}
init.callIn&&init.callIn.call(init.el);
init.el.timer = requestAnimationFrame(move);
}
}
}

调用方法:

var box = document.querySelector('#box');
css(box,"translateX",0);
css(box,"translateY",0);
startMove({
el: box,
type: "elasticIn",
time: 1000,
target: {
translateX: 200,
translateY: 400
},
callBack: function(){
console.log("动画执行完了");
},
callIn: function(){
console.log("动画执行中");
}
});

移动端滑屏全应用【四】移动端动画贞动画函数mTween封装的更多相关文章

  1. 移动端滑屏全应用【一】cssHandler操作基础动画函数封装

    前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样 ...

  2. 移动端滑屏全应用【三】requestAnimationFrame的兼容与使用

    首先,传统做动画的方式有以下几种: 1. css的transition过度动画 2. css的animation动画 3. 使用setTimeout或setInterval模拟动画贞(js执行机制决定 ...

  3. H5案例分享:移动端滑屏 touch事件

    移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...

  4. JS移动端滑屏事件

    来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...

  5. javascript移动端滑屏事件

    来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...

  6. 利用轮播原理结合hammer.js实现简洁的滑屏功能

    最近有个任务,做一个非常小的h5的应用,只有2屏,需要做横向的全屏滑动切换和一些简单的动画效果,之前做这种东西用的是fullpage.js和jquery,性能不是很好,于是就想自己动手弄一个简单的东西 ...

  7. H5案例分享:移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  8. H5-移动端实现滑屏翻页-原生js/jquery

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

    最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...

随机推荐

  1. Confluence 6 升级自定义的站点和空间获得你的自定义布局

    我们建议你在对站点进行布局修改的时候,你需要为你修改的 Confluence 站点或空间布局保留所有的修改记录. 如果没有的话,你应该可以通过下面的办法找到你的自定义修改.这个方法将会把你对全部网站和 ...

  2. 洛谷P2014 选课

    首先分析题目,这是一道树形dp的题目,是树形背包类的问题,以为每门课的先修课只有一门,所以这一定可以 构成一个森林结构,于是我们可以设计一个虚拟的根节点作为森林的根. 状态转移方程如下 dp[v][k ...

  3. 最短路径之Floyd-warshall算法

    哇咔咔,最喜欢这种算法了,算法简单,暴力解决: 可惜数据大点就解决不了问题了: 输入的数据是 第一行第一个数是city的数量n,第二个是路径数t, 接下来n行为a至b的距离 4 81 2 2 1 3 ...

  4. 【python】json中字典key不可为数值型

    遇到了一个很诡异的错误.写一个字典,存入json文件.之后读出判断是否存在key.结果惊奇的发现,同一个key居然存在两次. 原因:json会将数值key转换为unicode 结论:使用json时字典 ...

  5. MySQL数据查询子查询语句

  6. C++11新特性--decltype (转)

    返回值 decltype(表达式) [返回值的类型是表达式参数的类型] 这个可也用来决定表达式的类型,就像Bjarne暗示的一样,如果我们需要去初始化某种类型的变量,auto是最简单的选择,但是如果我 ...

  7. file按钮美化成图片(纯HTML+CSS)

    效果图: 代码实现: html: <div> <h2>上传头像</h2> <p class="fs18">(请上传200X200px ...

  8. Oracle数据库查看表空间是否为自增的

    表空间是有数据文件组成的,所以看表空间是否自增即看数据文件,如下查自增的表空间: select tablespace_name,file_name,autoextensible from dba_da ...

  9. 交换机的vlan文章

    https://blog.csdn.net/standmyground/article/details/3933364 大家知道,交换机会把广播报文(目的mac地址全1的报文)和未知单播报文从所有端口 ...

  10. C++ 定位new运算符

    这里说的定位new运算符,是一种相对于普通的new运算符,可以指定内存地址的运算符,程序直接使用我们提供的地址,不管它是否已经被使用,而且可以看到新值直接覆盖在旧值上面. 定位new运算符直接使用传递 ...