【repost】JavaScript运动框架之速度时间版本

一、JavaScript运动框架之速度版

1.1 运动框架的实现思路


运动，其实就是在一段时间内改变 left 、 right 、 width 、 height 、 opactiy 的值，到达目的地之后停止

  • 位移 top,left
  • 折叠 width,height
  • 淡入淡出 opacity
  • 时间有关系
    • setInterval
    • setTimeout
  • 用javascript直接获取行间样式很容易，但如果要获取非行间样式那我们只能借助函数了。我这里编写了一个名为getStyle的函数，专门处理取非行间的样式

1

2

3


function getStyle(obj,attr){

return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];

}

1.2 一些案例演示

1.2.1 运动之速

1
<div id="box"></div>

1

2

3

4

5

6

7


#box {

width: 100px;

height: 100px;

background: red;

position: relative;

left: 0;

}


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27


var box = document.getElementById("box");

var speed = 0; //步长

var target = 600;

var timer = null;

timer = setInterval(function(){

var curr = parseInt(getStyle(box,"left")); //去除getStyle(box,"left")的单位

if(curr == target){

clearInterval(timer);

speed = 0;

alert("运动结束");

}else{

speed +=10;

box.style.left = speed + "px";

}

},1000/30);

//监控left的值的变化 怎么样拿到left的值

//alert(getComputedStyle(box)["width"]);

//alert(box.currentStyle["left"]);

// currentStyle --IE

// getComputedStyle -- 非IE

function getStyle(obj,attr){

return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];

}

在线演示

1.2.2 运动速度之封装1

1
<div id="ball"></div>

1

2

3

4

5


#ball {

width: 100px;

height: 100px;

background: blue;

}


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35


var ball = document.getElementById("ball");

ball.onmouseover = function(){

//同时变换 用的最多

//move(this,"width",500,10);

//move(this,"height",500,10);

move(ball,{"width":400,"height":300},10);

}

ball.onmouseout = function(){

//move(this,"width",100,-10);

//move(this,"height",100,-10);

move(ball,{"width":100,"height":100},-10);

}

function move(obj,json,speed){

clearInterval(obj.timer);

var mark = true;

obj.timer = setInterval(function(){

for(var attr in json){

var curr = parseInt(getStyle(obj,attr));

var target = json[attr];

if(curr != target){

obj.style[attr] = curr+speed+"px";

mark = false;

}

}

if(mark){

clearInterval(obj.timer);

}

},1000/30);

}

function getStyle(obj,attr){

return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];

}

  • 需要注意的地方

    • 当需要两个动画的时候，会执行后面一个，解决办法如下，回调函数
    • 当需要两个以上的时候，需要考虑是否可写一行代码变换多个属性
    • 变换不一致的时候，定时器被提前清除

在线演示

1.2.3 运动速度之封装2–增加opacity

1
<div id="ball"></div>

1

2

3

4

5

6

7

8

9


#ball {

position: relative;

left: 0;

top: 0;

width: 100px;

height: 100px;

background: blue;

opacity: 1;

}


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43


var ball = document.getElementById("ball");

ball.onmouseover = function(){

move(ball,{"width":300,"height":300,"opacity":0.3});

}

// ball.onmouseout = function(){

// move(ball,{"width":100,"height":100},-10);

// }

function move(obj,json){

clearInterval(obj.timer);

var mark = true;

obj.timer = setInterval(function(){

for(var attr in json){

var curr = null;

var target = json[attr];

var speed = null;

if(attr == "opacity"){

curr = getStyle(obj,attr)*100;

speed = (target*100-curr)*0.15;

}else {

curr = parseInt(getStyle(obj,attr));

speed = (target - curr)*0.15;

}

speed = speed>0 ? Math.ceil(speed):Math.floor(speed);

if(curr != target){

if(attr == "opacity"){

obj.style[attr] = (curr+speed)/100;

}else {

obj.style[attr] = curr+speed+"px";

}

mark = false;

}

}

if(mark){

clearInterval(obj.timer);

}

},1000/30);

}

function getStyle(obj,attr){

return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];

}

在线演示

  • 需要注意的地方

    • 当需要两个动画的时候，会执行后面一个，解决办法如下，回调函数
    • 当需要两个以上的时候，需要考虑是否可写一行代码变换多个属性
    • 变换不一致的时候，定时器被提前清除
    • 速度speed不要写死

1.3 运动框架之应用

1.3.1 分享按钮

1

2

3

4


<div id="ball"></div>

<div id="box1">

<div id="box2">分享到</div>

</div>


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46


var box1 = document.getElementById("box1");

var ball = document.getElementById("ball");

box1.onmouseover = function(){

move(this,"left",0,10);

}

box1.onmouseout = function(){

move(this,"left",-100,-10);

}

//问题一：当需要两个动画的时候，会执行后面一个，解决办法如下，回调函数

ball.onmouseover = function(){

//同时变换 用的最多

//move(this,"width",500,10);

//move(this,"height",500,10);

//列队在执行

move(ball,"width",500,10,function(){

move(ball,"height",500,10);

});

}

ball.onmouseout = function(){

//move(this,"width",100,-10);

//move(this,"height",100,-10);

move(ball,"width",100,-10,function(){

move(ball,"height",100,-10);

});

}

var timer = null;

function move(obj,attr,target,speed,callback){

clearInterval(timer); //obj.timer缓存到各自的obj下

timer = setInterval(function(){

var curr = parseInt(getStyle(obj,attr));

if(curr == target){

clearInterval(timer);

callback && callback();

}else {

obj.style[attr] = curr+speed+"px";

}

},1000/30);

}

function getStyle(obj,attr){

return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];

}

在线演示

1.3.2运动框架之轮播图应用
1.3.2.1 焦点轮播–左右-无缝-速度版实现

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62


<div id="box">

<ul id="imgBox">

<li>![](http://upload-images.jianshu.io/upload_images/1480597-c72819402fb928e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>

<li>![](http://upload-images.jianshu.io/upload_images/1480597-6830ca74fe1e6fcd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>

<li>![](http://upload-images.jianshu.io/upload_images/1480597-5d38376e63ffd0b0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>

<li>![](http://upload-images.jianshu.io/upload_images/1480597-2aa932ffbba4091e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>

<li>![](http://upload-images.jianshu.io/upload_images/1480597-c72819402fb928e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</li>

</ul>

<ol id="btn">

<li class="active">1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ol>

</div>

<script src="http://7xq6al.com1.z0.glb.clouddn.com/Animate.min.js"></script>

<script type="text/javascript">

var box = document.querySelector("#box");

var imgUl = document.querySelector("#imgBox");

var btns = document.querySelector("#btn").querySelectorAll("li");

var len = btns.length;

var lenImg = imgUl.querySelectorAll("li").length;

var index = 0; //控制img的索引

var cindex = 0;//控制按钮的索引

var timer = null;

for (var i=0;i<len;i++) {

(function(index){

btns[index].onmouseover = function(){

for (var j=0;j<len;j++){

btns[j].className = "";

}

cindex = index;//保持索引同步

animateSpeed(imgUl,{"left":-970*index});

this.className = "active";

}

})(i);

}

function autoPlay(){

index++;

cindex++;

cindex %=len;//限制长度

for (var j=0;j<len;j++){

btns[j].className = "";

}

animateSpeed(imgUl,{"left":-970*index},function(){

if(index == lenImg-1){

this.style.left = 0;

index = 0;

}

});

btns[cindex].className = "active";

}

timer = setInterval(autoPlay,2000);

box.onmouseover = function(){

clearInterval(timer);

}

box.onmouseout = function(){

timer = setInterval(autoPlay,2000);

}

</script>


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54


*{

padding: 0;

margin: 0;

}

body{

font-size: 14px;

font-family: "微软雅黑";

}

ul,li{

list-style: none;

}

#box {

position: relative;

width: 970px;

height: 350px;

margin: 30px auto;

overflow: hidden;

}

#imgBox {

width:1000%;/*自动计算百分比*/

position: absolute;

left: 0;

}

#imgBox li{

width: 970px;

height: 350px;

float: left;

}

#imgBox li img {

width: 970px;

height: 350px;

}

#btn {

width: 120px;

position: absolute;

right: 10px;

bottom: 10px;

}

#btn li {

width: 20px;

height: 20px;

line-height: 20px;

border-radius: 50%;

text-align: center;

cursor: pointer;

background: #fff;

margin: 0 2px;

float: left;

}

#btn li.active {

background: #F17A5C;

color: #fff;

}


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

//速度版本

(function(win){

function move(obj,json,callback){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var mark = true;

for(var attr in json){

var cur = null;

if(attr == "opacity"){

cur = getStyle(obj,attr)*100;

}else{

//如果没写 默认填充成0

cur = parseInt(getStyle(obj,attr))||0;

}

var target = json[attr];

var speed = (target - cur)*0.2;

speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(cur != target){

if(attr == "opacity"){

//IE opacity兼容问题

obj.style.filter = "alpha(opacity="+(cur+speed)+")";

obj.style[attr] = (cur + speed)/100;

}else{

obj.style[attr] = cur + speed + "px";

}

mark = false;

};

}

if(mark){

clearInterval(obj.timer);

callback && callback.call(obj);

}

},1000/30);

}

win.animateSpeed = move;

})(window);

function getStyle(obj,attr){

return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];

}

function getId(id){

return document.getElementById(id);

}

二、JavaScript运动框架之时间版

2.1 关于运动

  • 速度的运动 通过速度来控制元素的 位移 / 折叠 / 淡入淡出
  • 时间的运动 通过时间来控制元素的 位移 / 折叠 / 淡入淡出(jQuery)
  • 时间的运动 基于一些数学公式 匀速运动 在路程的每一个点 速度都一样
2.2 一些案例演示

2.3 运动框架之时间版本-借助animate一些函数实现–综合完整版


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43


<div id="box2"></div>

<div id="box3"></div>

<div id="box4"></div>

<div id="box5"></div>

<script type="text/javascript">

//时间版本

getId("box2").onclick = function(){

animateTime(getId("box2"),{

"left":500,

"opacity":100

},1000,"elasticOut",function(){

this.innerHTML = "我是时间版本";

});

}

getId("box3").onclick = function(){

animateTime(getId("box3"),{

"left":500,

"opacity":100

},1000,"backIn",function(){

this.innerHTML = "我是时间版本";

});

}

getId("box4").onclick = function(){

animateTime(getId("box4"),{

"left":500,

"opacity":100

},1000,"bounceIn",function(){

this.innerHTML = "我是时间版本";

});

}

getId("box5").onclick = function(){

animateTime(getId("box5"),{

"left":500,

"opacity":100

},1000,"bounceBoth",function(){

this.innerHTML = "我是时间版本";

});

}

</script>


1

2

3

4

5

6

7

8

9

10

11

12

13

14


#box1,#box2,#box3,#box4,#box5 {

position: relative;

width: 100px;

height: 100px;

line-height: 100px;

text-align: center;

background: red;

color: #fff;

font-size: 12px;

opacity: 0.5;

filter:alpha(opcity=20);/**兼容IE*/

margin: 10px;

}


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

/*t b c d

t current time :nTime-sTime

b begining time :curr

c chang in value :变化量end-curr

d duration :持续时间 time */

/**

*

* @param {Object} obj 元素对象

* @param {Object} json 多个属性

* @param {Object} time 变化时间

* @param {Object} prop 运动函数

* @param {Object} callback 回调函数

*/

//时间版本

(function(win){

function move(obj,json,time,prop,callback){

//一般定时器结束后最好清除

clearInterval(obj.timer);

var curr = {};

var end = {};

//通过for in 在上车前把所有东西装到包里

for(var attr in json){

if(attr == "opacity"){//opacity特殊东西特殊对待

curr[attr] = getStyle(obj,attr)*100;//化为整数好计算

}else{

curr[attr] = parseInt(getStyle(obj,attr))||0;

}

end[attr] = json[attr];

}

//如果没写默认值 默认就是0 不然在IE出问题

//var curr = parseInt(getStyle(obj,attr))||0;

//var end = target;

var sTime = new Date();//开始时间T0

//开始变换了

obj.timer = setInterval(function(){

var nTime = new Date();//当前时间Tt

var t = nTime -sTime;

var d = time;

//St = (Tt-T0)/Time*(S-S0)+S0

//(nTime-sTime)/time 比例最多为1

/*var prop = (nTime-sTime)/time; */

if(t >=d){

t = d;

clearInterval(obj.timer);

callback && callback.call(obj);

}

for(var attr in json){

var b = curr[attr];

var c = end[attr] - b;

if(attr == "opacity"){

//var s = prop*(end[attr]-curr[attr])+curr[attr];

var s = Tween[prop](t,b,c,d);

obj.style[attr] = s/100;

obj.style.filter = "alpha(opacity="+s+")";

}else{

//var s = prop*(end[attr]-curr[attr])+curr[attr];

var s = Tween[prop](t,b,c,d);

obj.style[attr] = s+"px";

}

}

},13);

var Tween = {

linear: function (t, b, c, d){ //匀速

return c*t/d + b; // t/d = prop;

},

easeIn: function(t, b, c, d){ //加速曲线

return c*(t/=d)*t + b;

},

easeOut: function(t, b, c, d){ //减速曲线

return -c *(t/=d)*(t-2) + b;

},

easeBoth: function(t, b, c, d){ //加速减速曲线

if ((t/=d/2) < 1) {

return c/2*t*t + b;

}

return -c/2 * ((--t)*(t-2) - 1) + b;

},

easeInStrong: function(t, b, c, d){ //加加速曲线

return c*(t/=d)*t*t*t + b;

},

easeOutStrong: function(t, b, c, d){ //减减速曲线

return -c * ((t=t/d-1)*t*t*t - 1) + b;

},

easeBothStrong: function(t, b, c, d){ //加加速减减速曲线

if ((t/=d/2) < 1) {

return c/2*t*t*t*t + b;

}

return -c/2 * ((t-=2)*t*t*t - 2) + b;

},

elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入）

if (t === 0) {

return b;

}

if ( (t /= d) == 1 ) {

return b+c;

}

if (!p) {

p=d*0.3;

}

if (!a || a < Math.abs(c)) {

a = c;

var s = p/4;

} else {

var s = p/(2*Math.PI) * Math.asin (c/a);

}

return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

},

elasticOut: function(t, b, c, d, a, p){ //正弦增强曲线（弹动渐出）

if (t === 0) {

return b;

}

if ( (t /= d) == 1 ) {

return b+c;

}

if (!p) {

p=d*0.3;

}

if (!a || a < Math.abs(c)) {

a = c;

var s = p / 4;

} else {

var s = p/(2*Math.PI) * Math.asin (c/a);

}

return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;

},

elasticBoth: function(t, b, c, d, a, p){

if (t === 0) {

return b;

}

if ( (t /= d/2) == 2 ) {

return b+c;

}

if (!p) {

p = d*(0.3*1.5);

}

if ( !a || a < Math.abs(c) ) {

a = c;

var s = p/4;

}

else {

var s = p/(2*Math.PI) * Math.asin (c/a);

}

if (t < 1) {

return - 0.5*(a*Math.pow(2,10*(t-=1)) *

Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

}

return a*Math.pow(2,-10*(t-=1)) *

Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;

},

backIn: function(t, b, c, d, s){ //回退加速（回退渐入）

if (typeof s == ‘undefined‘) {

s = 1.70158;

}

return c*(t/=d)*t*((s+1)*t - s) + b;

},

backOut: function(t, b, c, d, s){

if (typeof s == ‘undefined‘) {

s = 3.70158; //回缩的距离

}

return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

},

backBoth: function(t, b, c, d, s){

if (typeof s == ‘undefined‘) {

s = 1.70158;

}

if ((t /= d/2 ) < 1) {

return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;

}

return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;

},

bounceIn: function(t, b, c, d){ //弹球减振（弹球渐出）

return c - Tween[‘bounceOut‘](d-t, 0, c, d) + b;

},

bounceOut: function(t, b, c, d){

if ((t/=d) < (1/2.75)) {

return c*(7.5625*t*t) + b;

} else if (t < (2/2.75)) {

return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;

} else if (t < (2.5/2.75)) {

return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;

}

return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;

},

bounceBoth: function(t, b, c, d){

if (t < d/2) {

return Tween[‘bounceIn‘](t*2, 0, c, d) * 0.5 + b;

}

return Tween[‘bounceOut‘](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;

}

};

}

win.animateTime = move;

})(window);

在线演示

三、运动框架之时间速度版完整封装


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247


/*t b c d

t current time :nTime-sTime

b begining time :curr

c chang in value :变化量end-curr

d duration :持续时间 time */

/**

*

* @param {Object} obj 元素对象

* @param {Object} json 多个属性

* @param {Object} time 变化时间

* @param {Object} prop 运动函数

* @param {Object} callback 回调函数

*/

//时间版本

(function(win){

function move(obj,json,time,prop,callback){

//一般定时器结束后最好清除

clearInterval(obj.timer);

var curr = {};

var end = {};

//通过for in 在上车前把所有东西装到包里

for(var attr in json){

if(attr == "opacity"){//opacity特殊东西特殊对待

curr[attr] = getStyle(obj,attr)*100;//化为整数好计算

}else{

curr[attr] = parseInt(getStyle(obj,attr))||0;

}

end[attr] = json[attr];

}

//如果没写默认值 默认就是0 不然在IE出问题

//var curr = parseInt(getStyle(obj,attr))||0;

//var end = target;

var sTime = new Date();//开始时间T0

//开始变换了

obj.timer = setInterval(function(){

var nTime = new Date();//当前时间Tt

var t = nTime -sTime;

var d = time;

//St = (Tt-T0)/Time*(S-S0)+S0

//(nTime-sTime)/time 比例最多为1

/*var prop = (nTime-sTime)/time; */

if(t >=d){

t = d;

clearInterval(obj.timer);

callback && callback.call(obj);

}

for(var attr in json){

var b = curr[attr];

var c = end[attr] - b;

if(attr == "opacity"){

//var s = prop*(end[attr]-curr[attr])+curr[attr];

var s = Tween[prop](t,b,c,d);

obj.style[attr] = s/100;

obj.style.filter = "alpha(opacity="+s+")";

}else{

//var s = prop*(end[attr]-curr[attr])+curr[attr];

var s = Tween[prop](t,b,c,d);

obj.style[attr] = s+"px";

}

}

},13);

var Tween = {

linear: function (t, b, c, d){ //匀速

return c*t/d + b; // t/d = prop;

},

easeIn: function(t, b, c, d){ //加速曲线

return c*(t/=d)*t + b;

},

easeOut: function(t, b, c, d){ //减速曲线

return -c *(t/=d)*(t-2) + b;

},

easeBoth: function(t, b, c, d){ //加速减速曲线

if ((t/=d/2) < 1) {

return c/2*t*t + b;

}

return -c/2 * ((--t)*(t-2) - 1) + b;

},

easeInStrong: function(t, b, c, d){ //加加速曲线

return c*(t/=d)*t*t*t + b;

},

easeOutStrong: function(t, b, c, d){ //减减速曲线

return -c * ((t=t/d-1)*t*t*t - 1) + b;

},

easeBothStrong: function(t, b, c, d){ //加加速减减速曲线

if ((t/=d/2) < 1) {

return c/2*t*t*t*t + b;

}

return -c/2 * ((t-=2)*t*t*t - 2) + b;

},

elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入）

if (t === 0) {

return b;

}

if ( (t /= d) == 1 ) {

return b+c;

}

if (!p) {

p=d*0.3;

}

if (!a || a < Math.abs(c)) {

a = c;

var s = p/4;

} else {

var s = p/(2*Math.PI) * Math.asin (c/a);

}

return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

},

elasticOut: function(t, b, c, d, a, p){ //正弦增强曲线（弹动渐出）

if (t === 0) {

return b;

}

if ( (t /= d) == 1 ) {

return b+c;

}

if (!p) {

p=d*0.3;

}

if (!a || a < Math.abs(c)) {

a = c;

var s = p / 4;

} else {

var s = p/(2*Math.PI) * Math.asin (c/a);

}

return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;

},

elasticBoth: function(t, b, c, d, a, p){

if (t === 0) {

return b;

}

if ( (t /= d/2) == 2 ) {

return b+c;

}

if (!p) {

p = d*(0.3*1.5);

}

if ( !a || a < Math.abs(c) ) {

a = c;

var s = p/4;

}

else {

var s = p/(2*Math.PI) * Math.asin (c/a);

}

if (t < 1) {

return - 0.5*(a*Math.pow(2,10*(t-=1)) *

Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

}

return a*Math.pow(2,-10*(t-=1)) *

Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;

},

backIn: function(t, b, c, d, s){ //回退加速（回退渐入）

if (typeof s == ‘undefined‘) {

s = 1.70158;

}

return c*(t/=d)*t*((s+1)*t - s) + b;

},

backOut: function(t, b, c, d, s){

if (typeof s == ‘undefined‘) {

s = 3.70158; //回缩的距离

}

return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

},

backBoth: function(t, b, c, d, s){

if (typeof s == ‘undefined‘) {

s = 1.70158;

}

if ((t /= d/2 ) < 1) {

return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;

}

return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;

},

bounceIn: function(t, b, c, d){ //弹球减振（弹球渐出）

return c - Tween[‘bounceOut‘](d-t, 0, c, d) + b;

},

bounceOut: function(t, b, c, d){

if ((t/=d) < (1/2.75)) {

return c*(7.5625*t*t) + b;

} else if (t < (2/2.75)) {

return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;

} else if (t < (2.5/2.75)) {

return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;

}

return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;

},

bounceBoth: function(t, b, c, d){

if (t < d/2) {

return Tween[‘bounceIn‘](t*2, 0, c, d) * 0.5 + b;

}

return Tween[‘bounceOut‘](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;

}

};

}

win.animateTime = move;

})(window);

//速度版本

(function(win){

function move(obj,json,callback){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var mark = true;

for(var attr in json){

var cur = null;

if(attr == "opacity"){

cur = getStyle(obj,attr)*100;

}else{

//如果没写 默认填充成0

cur = parseInt(getStyle(obj,attr))||0;

}

var target = json[attr];

var speed = (target - cur)*0.2;

speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(cur != target){

if(attr == "opacity"){

//IE opacity兼容问题

obj.style.filter = "alpha(opacity="+(cur+speed)+")";

obj.style[attr] = (cur + speed)/100;

}else{

obj.style[attr] = cur + speed + "px";

}

mark = false;

};

}

if(mark){

clearInterval(obj.timer);

callback && callback.call(obj);

}

},1000/30);

}

win.animateSpeed = move;

})(window);

function getStyle(obj,attr){

return getComputedStyle(obj)[attr]?getComputedStyle(obj)[attr]:obj.currentStyle[attr];

}

function getId(id){

return document.getElementById(id);

}

from：http://blog.poetries.top/2017/01/12/js-animate/?utm_source=tuicool&utm_medium=referral

时间： 2024-10-27 14:38:48

【repost】JavaScript运动框架之速度时间版本的相关文章

转 JavaScript 运动框架 Step by step

1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样子,就像一本书,画了几个小人,然后 一翻书,就看见小人在动.js动画也一样.不同状态的DOM,用定时器控制,就能得到动画效果. [javascript] view plain copy window.onload = function(){ var oBtn = document.getElemen

【原生JS组件】javascript 运动框架

大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,需要写很多运动的细节以及兼容. 然而,当你的BOSS不让你使用庞大的JQ框架,而且你开发的产品也需要在一些不兼容CSS3的浏览器运行的时候,你是否觉得每次都要开个定时器来琢磨运动该怎么进行,是件很费力的事情呢? 那么福利来了,笔者最近总结了两个常用的运动框架,并将其写成组件, 只要按照下面的方法调用,即可方便使用.

JavaScript 运动框架（介绍及原理）

1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样子,就像一本书,画了几个小人,然后一翻书,就看见小人在动.js动画也一样.不同状态的DOM,用定时器控制,就能得到动画效果. 1 window.onload = function(){ 2 var oBtn = document.getElementById('btn'); 3 oBtn.oncli

javascript运动框架

//运动框架//使用json传参的方式function sportFrame(obj,json,fun){    var timer;    clearInterval(obj.timer);    obj.timer=setInterval(function(){        var Stop=true;        for(var name in json){            var val=0;            //判断是不是透明度            if(name==

javascript运动框架（二）

紧接着上面写的... 给div加一个边框,border:1px solid black window.onload = function(){      var div = document.getElementById('div1'); div.onclick = function(){          setInterval(function(){               div.style.width = div.offsetWidth-1+'px'                 

适用于CSS2的各种运动的javascript运动框架

1 <script> 2 window.onload = function() { 3 //var oDiv1 = document.getElementById('box1'); 4 //var oDiv2 = document.getElementById('box2'); 5 // oDiv1.timer = null; 6 var oDiv = document.getElementsByTagName('div'); 7 8 for (var i = 0; i < oDiv.l

JavaScript的运动框架学习总结

一.目录 1. 入门案例——实现匀速运动 2. 入门案例——实现缓冲运动 3. 实现任意值的运动框架v.1 4. 改进任意值的运动框架v.2 5. 改进任意值的运动框架v.3 6. 实现链式运动框架 7. 实现完美运动框架 二.内容 1. 入门案例——实现匀速运动 ①. 要求:只要简单的实现传入的对象和运动的最终目标,便能操作该对象的left属性的大小匀速的变化到目标大小. ②. 具体代码: 1 <!DOCTYPE html> 2 <html lang="en">

如何在程序开发项目中选择合适的 JavaScript 框架，节省时间和成本的9款极佳的JavaScript框架介绍

从技术上来看,iOS,Android 和 Windows Phone 上的移动应用是使用不同的程序语言开发的,iOS 应用使用 Objective-C,Android 应用使用 Java,而 Windows Phone 应用使用 .NET. .随着 JavaScript,CSS 和 HTML 知识技能的提升,相信你也可以构建一个超赞的移动应用.在这篇博客里,我们将会介绍一些极好的 JavaScript 移动应用程序开发框架. 说到网络开发,就不得不说 JavaScript,这是一款很有前途的程序

时间版 运动框架

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>时间版运动框架</title> <style type="text/css"> *{margin: 0px;padding: 0px;} #box{ width: 100px; height: 100px; background: red; margin-left:5