两千人站长交流群:462137404 / VIP用户交流群:462197261 收藏本站哈站网 zhan.ha.cn 精品建站资源第一站,让建站变得更加容易!
业务咨询:78895949 联系电话:13402647354
  • 当前位置:
  • 前端制作动画的几种方式(css3,js)

    DIV+CSS教程2018年05月30日关键词:

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式。

    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以下是不支持的,其他的浏览器需要加前缀,并且只有两态,不支持自定义中间的状态。

    例子:

    <style type="text/css"> div{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 */}div:hover{width:300px;}</style><div></div> 

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

    前缀:

    1. transform:rotate(9deg);
    2. -ms-transform:rotate(9deg); /* Internet Explorer */
    3. -moz-transform:rotate(9deg); /* Firefox */
    4. -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
    5. -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的属性,仍然需要注意它的兼容性,加上必须的前缀。

    例子:

    <style> div{ 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;}}</style> <div></div> 

    3.Jquery的animate函数

    语法:

    $(selector).animate(styles,options)

    styles:产生动画的css样式和值;

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

    $(myElement).animate({ left: 500, top: 200}, {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’),还可以使用队列机制进行步骤式的动画如:

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

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

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

    4.原生js动画

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

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

    5.插件

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

    如:waves,textillate.js等等。

    6.使用canvas制作动画

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

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

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

     7.引用gif图片

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

     以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    其他网友正在看:
    CSS实现页面两列布局与三列布局的方法示例

    1. 使用BFC的原理实现BFC的规则之一,就是BFC区域,不会与float box重叠,因此我们可以利用这一点来实现3列布局。html代码如下XML/HTML Code复制内容到剪贴板<div class="left"></div>  <div class="right">&···

    2018-05-30关键词:

    纯CSS3代码实现switch滑动开关按钮效果

    html结构XML/HTML Code复制内容到剪贴板<div class="container">          <div class="bg_con">           &n···

    2018-05-30关键词:

    css解决display:inline-block;产生的缝隙(间隙)的方法

    今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是需要设置父元素的宽度才能实现水平左右滚动,这样又增加了代码量,因为卡片的个数不固···

    2018-05-30关键词:

    CSS中的指定值、初始值和计算值学习教程

    CSS 中的声明,由 CSS 的特性和值,中间以 ":" 隔开组成。我们可以使用 CSS 选择器,为选中的元素设置需要的样式。在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 — 应该将包含错误值,不符合句法的值的声明直接忽略。然而有些浏览器却···

    2018-05-30关键词:

    css小技巧汇总

    1、去除input记住密码后自动填充表单的黄色背景input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }//其中#fff是背景颜色值2、IE8不支持opacity:0属性,可以加上下面属性:filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);3、IE···

    2018-05-30关键词:

    CSS实现鼠标滑过鼠标点击代码写法

    鼠标滑过元素,使得元素的样式发生改变我们定义一个按钮标签复制代码代码如下:<button class=”px-button”>BUTTON</button>我们首先设置按钮的背景颜色为灰色:复制代码代码如下:.px-button{background-color: grey;}我们要使得鼠标滑过···

    2018-05-30关键词: