Heim  >  Artikel  >  Web-Frontend  >  js如何实现动画

js如何实现动画

一个新手
一个新手Original
2017-09-11 10:01:153177Durchsuche

1.css的transition。

语法:

transition: property duration timing-function delay;
property:填写需要变化的css属性如:width,line-height,font-size,color等;
duration:完成过渡效果需要的时间(2s 或者2000ms)
timing-function:完成效果的速度曲线(linear,ease,ease-in,ease-out等等)
描述
linear 匀速(等于 cubic-bezier(0,0,1,1))。
ease 从慢到快再到慢(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 慢慢变快(等于 cubic-bezier(0.42,0,1,1))。
ease-out 慢慢变慢(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 先变快再到慢(等于 cubic-bezier(0.42,0,0.58,1))。渐显渐隐效果
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
timing-delay:动画效果的延迟触发时间(2s 或者2000ms)。默认值分别为:all 0 ease 0

   transition抓住了所设置变化属性的起始态和完成态,通过设定的速度曲线来完成动画。可以涉及到各种变化的css属性,默认为all,则所有变化的属性都会在出发时,以动画的形式展现出来。

这种动画方式是css3的,因此ie9以下是不支持的,其他的浏览器需要加前缀,并且只有两态,不支持自定义中间的状态。

例子:



1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18


cd640827c78f2ad49f941d05bfe6da16

p

{

width:100px;

height:100px;

background:red;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

  

p:hover

{

width:300px;

}

531ac245ce3e4fe3d50054a55f265927

e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

tips:transform是一种变化属性,该属性允许我们对元素进行旋转、缩放、移动或倾斜。可以作为transition中需要变化的属性。

   前缀:

      transform:rotate(9deg);
      -ms-transform:rotate(9deg); /* Internet Explorer */
      -moz-transform:rotate(9deg); /* Firefox */
      -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
      -o-transform:rotate(9deg); /* Opera */  

 2.css3的animation属性

语法:

animation: name duration timing-function delay iteration-count direction;
name:keyframe的名称,也就是定义了关键帧的动画的名称,这个名称用来区别不同的动画。
duration:完成动画所需要的时间(2s 或者 2000ms)
timing-function:完成动画的速度曲线
delay:动画开始之前的延迟iteration-count:动画播放次数
direction:是否轮流反向播放动画(normal:正常顺序播放,alternate下一次反向播放)如果把动画设置为只播放一次,则该属性没有效果。使用animation属性制作动画可以更加灵活的设置动画帧,通过不同keyframe(动画帧)的设置,实现很多优雅的效果,keyframe中的百分数是动画完成总时间的比例。
animation是设置总的动画效果,而keyframe中设置上相应的动画名字,然后在keyframe中设置具体的动画效果。当然由于是css3的属性,仍然需要注意它的兼容性,加上必须的前缀。例子:



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


c9ccee2e6ea535a969eb3f532ad9fe89

p

{

    width:100px;

    height:100px;

    background:red;

    position:relative;

    animation:mymove 5s infinite;

    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

}

 

@keyframes mymove

{

    1% {left:0px;}

    20%{left:200px;}

    50% {left:300px;}

    100%{left:200px;}

}

 

@-webkit-keyframes mymove /*Safari and Chrome*/

{

    1% {left:0px;}

    20%{left:200px;}

    50% {left:300px;}

    100%{left:200px;}

}

531ac245ce3e4fe3d50054a55f265927

 

e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

3.Jquery的animate函数

语法:

$(selector).animate(styles,options)

styles:产生动画的css样式和值;
options={
   speed:动画的速度(可选参数:slow,normal,fase)
   easing:动画的速度函数(可选参数:swing,linear)
   callback:动画完成之后要执行的函数;
   queue:是否放置在效果队列中,是布尔值,为false则立即开始
   specialEasing:styles参数的一个或多个属性映射及对应的easing函数。}


1

2

3

4

5

6

7

8

9


$(myElement).animate({

       left500,

       top200

}, {0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a    duration:'3000',

       specialEasing: {

            left'swing',

            top'linear'

        }

});

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。

只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。

可以使用的属性有:(使用比如 "fontSize"来设置,而非 CSS 名称(比如 "font-size"))

backgroundPosition,borderWidth,borderBottomWidth,borderLeftWidth

borderRightWidth,borderTopWidth,borderSpacing

margin,marginBottom,marginLeft,marginRight,marginTop

outlineWidth

padding,paddingBottom,paddingLeft,paddingRight,paddingTop

height,width

maxHeight,maxWidth,minHeight,minWidth

font,fontSize

bottom,left,right,top

letterSpacing,wordSpacing,lineHeight,textIndent

可见通过jquery的animation生成动画的过程中可同时使用多个属性,也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=,如(height:'+=150px'),还可以使用队列机制进行步骤式的动画如:


1

2

3

4

p.animate({height:'300px',opacity:'0.4'},"slow");
p.animate({width:'3
00px',opacity:'0.8'},"slow");
p.animate({height:'100px',opacity:'0.4'},"slow");

p.animate({width:'100px',opacity:'0.8'},"slow");

 动画就会按照顺序一步一步实现,并且不用考虑兼容性,因为几乎都兼容。 

 但是,animate函数只能够实现一些数值属性,能够实现的变化非常有限制,而且使用这个函数时还要配合stop来使用,在达到某条件时终止动画,设置比较复杂。

4.原生js动画 

 原生js动画利用js代码,将动画一步以函数的方式写出来,可以实现多种动画样式,而且可以自己做兼容性处理,自己设立每一步的动画效果,并且能够完成比较复杂的效果,但是代码量很大。如下面的例子:需要自己定义所有的动态函数,并进行计算、判断和处理



<p
 id="op" class="op">
     <p
 id="sp" class="sp">
     </p>
</p>
 
<script
 language="javascript">
window.onload
 = function(){
     var
 op = document.getElementById(&#39;op&#39;);
     op.onmouseover
 = function(){
      startMover(0);
 }
 op.onmouseout
 = function(){
      startMover(-200);
 }
}
var
 timer = null;
function
 startMover(a){//速度和目标值
     clearInterval(timer);//执行当前动画同时清除之前的动画
     var
 op = document.getElementById(&#39;op&#39;);
 timer
 = setInterval(function(){
     var speed = (a-op.offsetLeft)/10;//缓冲动画的速度参数变化值
 //如果速度是大于0,说明是向右走,那么就向上取整
     speed
 = speed>0?Math.ceil(speed):Math.floor(speed);
 //Math.floor();向下取整
     if(op.offsetLeft
 == a){
      clearInterval(timer);
     }
 else{
      op.style.left =
 op.offsetLeft+speed+&#39;px&#39;;
  }
 },30);
}
</script>

5.插件

网上可以搜到很多封装好的动画插件,这些插件可以直接引入到页面中,通过初试话和配置的方式进行设定,直接在页面中展示动画。

如:waves,textillate.js等等。

 6.使用canvas制作动画

我们还可以使用canvas在浏览器上画图,并且利用其api,制作动画。canvas使用的地方非常多,尤其是在制作h5小游戏上。

同样都是使用编码的方式由前端开发工程师完成动画效果,canvas要比原生js效率高的多,流畅的多。通过画笔的方式,能够轻松的实现更多的动画效果。

至于canvas如何使用,请看我博客中正在连载的教程--html5 canvas常用api总结。

 7.引用gif图片

如果在需求特别紧急,而且动画又特别复杂的情况下,自己没有把握按时实现效果,或者代价太大,真的,别犹豫,上gif图片吧,不要在技术上纠结了,虽然在工程师的角度上这样做很low,但是,用户的体验是没有影响的~所以,别纠结,就是要快!完成最重要了!

Das obige ist der detaillierte Inhalt vonjs如何实现动画. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn