目录
-
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
属性: 用来设置样式的属性值是如何从一种状态平滑过渡到另外一种状态
语法:
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
这样写;
值 | 描述 |
---|---|
transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
transition-timing-function | 规定速度效果的速度曲线。 |
transition-delay | 定义过渡效果何时开始。 |
演示代码:
<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
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
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()
方法
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写的小游戏:
7. 使用
canvas
绘制动画
canvas
绘制动画
这里给出我用canvas写的小游戏:
8. 使用
gif
图片
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
停止”