首先此函数是基于大家都知道的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. Java的输入语句以及本周对于文件读写的研究

    日期:2018.9.20 博客期:010 星期四 ##:今天下午要考试 java(小考)!那么,我就应对相应的方法给出策略吧! 首先是 Java 里的输入语句,我一般是用Scanner类,用这个之前要 ...

  3. Linux之man命令详解及中文汉化

    使用方法 Linux man中的man就是manual的缩写,用来查看系统中自带的各种参考手册 使用方法: man command 示例: [root@VM_0_13_centos ~]# man l ...

  4. 步步為營-95-MyMVC 1.0

    說明:通過自己編寫MyMVC以便於對MVC內容實現機制有更深刻的認識 1.1:創建MyMVC項目,刪除無關引用,只保留system 和 system.web.同時該項目中以後添加一些文件后也要刪除無關 ...

  5. 使用CSS选择器定位页面元素

    摘录:http://blog.csdn.net/defectfinder/article/details/51734690 CSS选择器也是一个非常好用的定位元素的方法,甚至比Xpath强大.在自动化 ...

  6. 如果IDEA右上角的tomcat消失了,解决办法

    看了很多博客都没有找到解决办法,还是老师帮我解决的

  7. 使用python调用email模块发送邮件附件

    使用python调用email模块实现附件发送 需要模块: import datetime import time import sys import mimetypes import smtplib ...

  8. C#黎明前的黑暗

    学习编程已经很久了,然而技术还停留在远古时代,丝毫没有什么进步的痕迹,平常也就写一些小软件来处理工作上面遇到的一些很繁杂的问题,天生愚笨或许就是说的我. 黎明前的黑暗期,真的太长了,烂烂的文章就像烂烂 ...

  9. win10下右键菜单添加“打开cmd”

    早期版本的win10是可以在文件夹的左上角打开cmd的,更新后发现现在只有powershell能用了.这不方便. 通过修改注册表,可以实现这个功能. 具体做法:新建一个.reg文件win10_add_ ...

  10. [转] node.js下mongoose简单操作实例

    Mongoose API : http://mongoosejs.com/docs/api.html // mongoose 链接 var mongoose = require('mongoose') ...