前端制作动画的几种方式(css3,js)


Posted in HTML / CSS onDecember 12, 2016

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

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,但是,用户的体验是没有影响的~所以,别纠结,就是要快!完成最重要了!

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

HTML / CSS 相关文章推荐
纯CSS3实现图片无间断轮播效果
Aug 25 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
AmazeUI中模态框的实现
Aug 19 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
CSS3 三维变形实现立体方块特效源码
Dec 15 #HTML / CSS
css3学习之2D转换功能详解
Dec 23 #HTML / CSS
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 #HTML / CSS
学做Bootstrap的第一个页面
May 15 #HTML / CSS
css3实现背景模糊的三种方式
HTML5如何适配 iPhone IOS 底部黑条
CSS3画一个阴阳八卦图
You might like
附件名前加网站名
2008/03/23 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
12个非常有用的JavaScript技巧
2017/05/17 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
python读取xlsx的方法
2018/12/25 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
Django如何实现防止XSS攻击
2020/10/13 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
html5录音功能实战示例
2019/03/25 HTML / CSS
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
党员民主评议个人总结
2014/10/20 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
惊天动地观后感
2015/06/10 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle