博客

目录

• 
  
  1.
  
  css3的
  
transition

  属性
  
  

• 
  
  2.
  
  css3的
  
transform

  属性
  
  

• 
  
  3.
  
  css3的
  
animation

  属性
  
  

• 
  
  4.
  
  Jquery的
  
animate

  函数
  
  

• 
  
  5.
  
  使用插件
  
  

• 
  
  6.
  
  原生JS动画
  
  

• 
  
  7.
  
  使用
  
canvas

  绘制动画
  
  

• 
  
  8.
  
  使用
  
gif

  图片
  
  

• 
  
  9.
  
  CSS动画和JS动画的优缺点
  
  

1. css3的

transition



transition

属性： 用来设置样式的属性值是如何从一种状态平滑过渡到另外一种状态



语法：

transition: property duration timing-function delay;


transition

是一种简写属性,它可以拆分为四个过渡属性：

即，你可以

transition: 值1，值2，值3，值4

这样写；

也可以：

transition-property: 值1


transition-duration:值2


transition-timing-function:值2


transition-delay:值4

这样写；

演示代码：

<div></div>

div{
	width:50px;
	height: 50px;
	background-color: pink;
}
div:hover{
	width:200px;
}

效果图：




由上图可看出：鼠标移入移出时,

width

状态的变化是瞬间完成的。

添加

transition: 1s;

后

div{
	width:50px;
	height: 50px;
	background-color: pink;
	transition: 1s;
}
div:hover{
	width:200px;
}

效果图：





transition: 1s;

设置了

width

属性状态变化的过渡时间为1秒。


transition

属性默认为：

transition: all 0 ease 0;



transition:1s;

等价于

transition: all 1s ease 0;


第三个参数

transition-timing-function

速度曲线的值可以为以下：

• 
ease

  (默认值) 逐渐变慢
• 
linear

  匀速
• 
ease-in

  加速
• 
ease-out

  减速
• 
ease-in-out

  先加速后减速
• 
cubic-bezier(x1,y1,x2,y2)

  贝塞尔曲线

对不同的样式做不同的变化，该怎么写？



用逗号

,

隔开即可；



演示代码：

<div></div>

div{
	width:50px;
	height: 50px;
	background-color: pink;
	transition: width 1s,height 2s,background-color 3s;
}
div:hover{
	width:200px;
	height:100px;
	background-color: black;
}

效果图：

2. css3的

transform



transform

属性：应用于元素的2D或3D转换，可以用来设置元素的形状改变，

如：


rotate

（旋转）、

scale

（缩放）、

skew

（扭曲）、

translate

（移动）和

matrix

（矩阵变形）


语法：

transform: none | transform-functions;


none

表示不做变化；


transform-functions

表示一个或多个变化函数


W3C transform属性

演示代码：

<div class="container">
	<div class="item item1">rotate(30deg)</div>
	<div class="item item2">scale(2)</div>
	<div class="item item3">rotate(30deg)</div>
	<div class="item item4">skew(30deg,10deg)</div>
</div>

.container{
	width:200px;
	margin:0 auto;
	background: #ccc;
}
.item{
	width:60px;
	height: 60px;
	background-color: pink;
	margin-bottom:60px;
	font-size:12px;
}

效果图：





添加样式：

.item1{
	transform: rotate(30deg); /*顺时针旋转30度*/
}
.item2{
	transform: scale(2); /*放大为2倍*/
}
.item3{
	transform: translate(50px,50px);/*水平垂直移动50px*/
}
.item4{
	transform: skew(30deg,10deg); /*水平扭曲30度，垂直扭曲10度*/
}

效果图：





通常

transform

变化 和

transition

过渡 是组合使用的。



演示代码：

 <div></div>

div{
	width:100px;
	height:100px;
	background-color: pink;
	margin: 100px;
	transition: all 1s;
}
div:hover{
	transform: scale(2) rotate(360deg);
}

效果图：






transform-origin

基点

• 根据上图可以看出元素是根据中心点旋转放大的。
• 这个中心点就是当前设置的基点
• 所有的变形都是基于基点，默认基点为元素中心。
• 可以通过
  
transform-origin: (x, y)

  来设置基点；
  
  其中
  
x

  和
  
y

  的值可以是百分比、
  
rem

  或者是
  
px

  等等，也可以用表示位置的单词来表示例如：
  
x

  可以用
  
left、center、right

  ；
  
y

  可以用
  
top、center、bottom

  ；

演示代码：

<div></div>

div{
	width:100px;
	height:100px;
	background-color: pink;
	margin: 100px;
	transition: all 1s;
}
div:hover{
	transform: scale(2) rotate(360deg);
	transform-origin:right bottom;
}

效果图：

3. css3的

animation



animation

属性：比较类似于 flash 中的逐帧动画。

学习过

flash

的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画


在

CSS3

中是由属性

keyframes

来完成逐帧动画的


animation

属性与

transition

属性的区别：

• 
  
transition

  只需指定动画的开始和结束状态，整个动画的过程是由特定的函数控制,你不用管它。
  
• 
  
animation

  可以对动画过程中的各个关键帧进行设置
  

演示代码：

<div></div>

div{
	width:50px;
	height:50px;
	background-color: pink;
}
div:hover{
	animation: change1 5s;
}
@keyframes change1{
	25%  {width:130px;background-color: red;}
	50%  {width:170px;background-color: blue;}
	75%  {width:210px;background-color: green;}
	100% {width:250px;background-color: yellow;}
}

效果图：

4. Jquery的

animate()

方法

• 
animate()

  方法执行
  
CSS

  属性集的自定义动画。
• 该方法通过 CSS 样式将元素从一个状态改变为另一个状态。
• CSS属性值是逐渐改变的，这样就可以创建动画效果。
• 只有数字值可创建动画（比如 “
  
margin:30px

  ”）。字符串值无法创建动画（比如 “
  
background-color:red

  ”）。
  
  
  W3C jQuery animate() 方法
  

代码演示：

<button id="btn1">使用动画放大高度</button>
<button id="btn2">重置高度</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#box").animate({height:"300px"});
    });
    $("#btn2").click(function(){
        $("#box").animate({height:"100px"});
    });
});

效果图：

5. 使用插件

• GSAP
  
  github：
  
  https://github.com/greensock/GSAP
  
• Anime.js
  
  官网：
  
  https://www.animejs.cn/
  
• Wicked CSS
  
  
  https://www.bypeople.com/wicked-css-animation-library/
  
• Animate CSS
  
  
  https://daneden.github.io/animate.css/
  
• CSShake
  
  
  https://github.com/elrumordelaluz/csshake
  
• Mo.js
  
  
  https://github.com/mojs/mojs
  
• Animate Plus
  
  
  https://github.com/bendc/animateplus
  
• Bounce.js
  
  
  https://github.com/tictail/bounce.js/
  
• Magic
  
  
  https://github.com/miniMAC/magic
  
• AniJS
  
  
  https://github.com/anijs/anijs
  

很多很多。。。

6. 原生

JS

动画

这里给出我用JS写的小游戏：

• 
  JS版小黄脸大战(DOM (html+css+js))
  
• 
  JS贪吃蛇小游戏(DOM (html+css+js))
  
• 
  JS扫雷小游戏(DOM (html+css+js))
  

7. 使用

canvas

绘制动画

这里给出我用canvas写的小游戏：

• 
  JS打砖块小游戏 canvas绘制
  
• 
  JS五彩连珠小游戏(Canvas绘制)
  

8. 使用

gif

图片

技术角度很low,用户体验没影响。

๑乛◡乛๑看着来吧。。。

9. CSS动画和JS动画的优缺点

CSS动画

• 
  优点：
  

  • 浏览器可以对动画进行优化
  • 代码相对简单,性能调优方向固定
  • 对于帧速表现不好的低版本浏览器，
    
CSS3

    可以做到自然降级，而
    
JS

    则需要撰写额外代码

• 
  缺点：
  

  • 运行过程控制较弱,无法附加事件绑定回调函数
  • 代码冗长，想用
    
CSS

    实现稍微复杂一点动画,最后
    
CSS

    代码都会变得非常笨重

JS动画

• 
  优点：
  

  • 控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
  • 动画效果比
    
css3

    动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有
    
js

    动画才能完成
  • 
CSS3

    有兼容性问题，而
    
JS

    大多时候没有兼容性问题

• 
  缺点：
  

  • 代码的复杂度高于
    
CSS

    动画
  • 
JavaScript

    在浏览器的主线程中运行，而主线程中还有其它需要运行的
    
JavaScript

    脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况

总结：

• 
  代码复杂度方面
  
  
  简单动画：
  
css

  代码实现会简单一些，
  
js

  复杂一些。
  
  复杂动画的话：
  
css

  代码就会变得冗长，
  
js

  实现起来更优。
• 
  动画运行时，对动画的控制程度上
  
  
  
js

  比较灵活，能控制动画暂停，取消，终止等
  
  
css

  动画不能添加事件，只能设置固定节点进行什么样的过渡动画。
• 
  兼容方面
  
  
  
css

  有浏览器兼容问题
  
  
js

  大多情况下是没有的。
• 
  性能方面
  
  
  
css

  动画相对于优一些，
  
css

  动画通过
  
GUI

  解析
  
  
js

  动画需要经过
  
js

  引擎代码解析，然后再进行
  
GUI

  解析渲染。

css动画是黑盒的，你只按它的使用要求告诉他从哪个状态到哪个状态要产生动画

js动画是白盒的，你需要去编写代码去描述 状态-时间，比如代码“每隔10毫秒，某

dom

元素

left

加

1px

，直到

1000ms

停止”