动画的封装

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="js/tool.js" type="text/javascript">
 7
 8         </script>
 9     </head>
10     <body>
11
12
13         <div>
14
15         </div>
16     </body>
17 </html>
18 /*
19  var m = new Move();
20 //让谁动?
21 m.ele = box;
22 m.start = XX; //开始位置
23 m.target =XXX; 结束值
24 m.direction = "top"; //左右动无需给参数,上下给top
25 m.animation();  启动动画。
26  * */
27 function Move() {
28     this.ele = null;
29     this.start = 0;
30     this.target = 100;
31     this.speed = 10;
32     this.direction = "left";
33     this.offset = "offsetLeft";
34     this.animation = function() {
35         var o = this;
36         if(o.direction == "top") {
37             o.offset = "offsetTop"
38         }
39
40         var step,
41             i = o.start,
42             timer,
43             current;
44
45         function t() {
46             current = o.ele[o.offset];
47             step = (o.target - current) / o.speed
48             step = Math.ceil(step);
49             i += step;
50             if(Math.abs(i - o.target) < 5) {
51                 i = o.target;
52                 clearInterval(timer)
53             }
54             o.ele.style[o.direction] = i + "px";
55         }
56         timer = setInterval(t, 20);
57     }
58
59 }
时间: 2024-12-24 21:56:26

动画的封装的相关文章

animate动画方法封装:原生JS实现

1 /** 2 * Created by guoyongfeng on 2014/7/7. 3 * @Author guoyongfeng 4 * @Date 2014-07-07 5 * @Version 1.0.0 6 * @update 2014-07-07 7 * @described tween动画库函数封装 8 * 9 */ 10 define('animate/0.0.1', function(){ 11 /** 12 * 13 */ 14 return function(ele,

js--定时器的学习和对动画的封装(定时器)

1.定时器:在js里面,定时器主要有两种,setInterval(function, time) 和 setTimeout(function,time), setInterval:每个time秒执行一次函数function setTimeout:time秒后执行函数,仅且只执行一次 对于定时器的定义主要有三种 setInterval(function(){//第一种 alert("定时器"); },20); setInterval(fn,20);//第二种 setInterval(&q

iOS开发UI篇—核心动画(UIView封装动画)(转摘)

iOS开发UI篇—核心动画(UIView封装动画) 一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画支持 执行动画所需要的工作由UIView类自动完成,但仍要在希望执行动画时通知视图,为此需要将改变属性的代码放在[UIViewbeginAnimations:nil context:nil]和[UIView commitAnimations]之间 常见方法解析: + (void)setAnimati

变速动画函数封装增加任意一个属性

//计算后的样式属性---- 一个元素的任意的一个样式属性值function getStyle(element,attr) { //判断这个浏览器是否支持这个方法 return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];}//匀速动画function animate(element,attr,target) { //element--元素 attr-

iOS开发UI篇—核心动画(UIView封装动画)

一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画支持 执行动画所需要的工作由UIView类自动完成,但仍要在希望执行动画时通知视图,为此需要将改变属性的代码放在[UIView beginAnimations:nil context:nil]和[UIView commitAnimations]之间 常见方法解析: + (void)setAnimationDelegate:(id)delegate  

核心动画(UIView封装动画)

一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画支持 执行动画所需要的工作由UIView类自动完成,但仍要在希望执行动画时通知视图,为此需要将改变属性的代码放在[UIView beginAnimations:nil context:nil]和[UIView commitAnimations]之间 常见方法解析: + (void)setAnimationDelegate:(id)delegate  

Block 对过度动画的封装

参数1. 要改变的view 参数2. 动画的时长 参数3 动画类型 参数4.    [UIView transitionWithView:self.changeView duration:2 options:UIViewAnimationOptionTransitionFlipFromBottom animations:^{        //要改变的属性        self.changeView.backgroundColor = [UIColor purpleColor];      

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

前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样式,但使用getComputedStyle来获取transform时我们获取到的是一个矩阵值,而且是无法通过设置矩阵值反向设置transform的效果的.如下: body.style.WebkitTransform = 'translateY(50px)' getComputedStyle(body

变速动画函数封装增加任意多个属性、透明度和层级

//计算后的样式属性---- 一个元素的任意的一个样式属性值function getStyle(element,attr) { //判断这个浏览器是否支持这个方法 return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];}//匀速动画function animate(element,json,fn) { //element--元素 attr--属性名