css3动画和js动画

css3动画

animation 是个简写属性，用于设置六个动画属性。

animation-name 规定需要绑定到选择器的keyframe名称
animation-duration 规定完成动画的所需要花费的时间
animation-timimg-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的的延时
animation-iteration-count 规定动画应该播放的次数
animation-direction 规定是否应该轮流反向播放动画

注意必须规定animation-duration属性，否则时长为0

animation-timing-function规定动画速度曲线

liner 动画从头到尾速度相同
ease 默认速度以低速，然后加快，在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束

animation-direction 规定是否应该轮流反向播放动画

noramal 默认值。动画应该正常播放
alternate 动画应该轮流反向

http://js.jirengu.com/hupecativa/2/edit

transtion 过度属性

默认 all 0 ease 0

transition-property 规定设置过度效果的css属性的名称 none没有效果 all所有属性都获得过度效果 property定义应用过度效果的css属性名称列表
transition-duration 规定过度效果需要多少秒或者毫秒 time所花费的时间
transition-timing-function 规定速度效果的速度曲线
transition-delay 定义过度效果何时开始

transition-timing-function 切换效果的速度

cubic-bezier(n,n,n,n)定义函数自己的值

https://jsbin.com/fejofoqeca/edit?html,output

js动画

知识点

1.相对位置偏移

一个元素在页面中实现移动，即在一段时间持续改变自己相对页面的位置便能显示动画

关于偏移量

该元素设置position 属性
top,left属性可以设置偏移量
offsetLeft,offsetTop属性可以设置偏移量

2.obj.offsetwidth与obj.style.width的区别

obj.offsetwidth是只读属性，不可复制，结果是一个纯数字
obj,offsetwidth使用前提元素标签内联的style样式且width属性存在的情况。可读可赋值

3.requestAnimationFrame（推荐）

window.requestAnimationFrame(callback) 接受回调函数。更加流畅

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <style>
 9   #ball{
10     position:absolute;
11     left:0;
12     width:30px;
13     height:30px;
14     background:red;
15     border-radius:50%;
16   }
17 </style>
18 <body>
19     <div id="ball"></div>
20 </body>
21   <script>
22     var offsetX = 300;//移动距离
23 var moveOffset = 0;//当前已经移动距离
24 var step = 5;//每次移动的距离
25 
26 function move(){
27     if(moveOffset<offsetX){
28       console.log(ball.style.left)
29         ball.style.left = parseInt(getComputedStyle(ball).left) + step + 'px'
30         moveOffset += step
31         requestAnimationFrame(move,5)
32     }
33 }
34 move()
35   </script>
36 </html>

使用setTimeout实现（不推荐）断断续续

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <style>
 9   #ball{
10     position:absolute;
11     left:0;
12     width:30px;
13     height:30px;
14     background:red;
15     border-radius:50%;
16   }
17 </style>
18 <body>
19     <div id="ball"></div>
20 </body>
21   <script>
22 var offsetX = 300;//移动距离
23 var moveOffset = 0;//当前已经移动距离
24 var step = 5;//每次移动的距离
25 
26 function move(){
27     if(moveOffset<offsetX){
28       console.log(ball.style.left)
29         ball.style.left = parseInt(getComputedStyle(ball).left) + step + 'px'
30         moveOffset += step
31         setTimeout(move,5)
32     }
33 }
34 move()
35   </script>
36 </html>

猜你喜欢