前端实现动画的方法总结
目录
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这样写；
| 值 | 描述 |
|---|---|
| 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属性：应用于元素的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停止”
前端实现动画的方法总结相关推荐
- 前端Lottie动画实现方法
记录下 json文件导出方式: https://zhuanlan.zhihu.com/p/68623762 如何在vue中使用: https://juejin.cn/post/698367006229 ...
- java mp4视频转换成h5_前端canvas动画如何转成mp4视频的方法
用户通过上传合适尺寸的图片,选着渲染动画的效果和音乐,可以预览类似幻灯片的效果,最后点击确认生成视频,可以放到头条或者抖音播放. 生成视频可能的方案 纯前端的视频编码转换(例如WebM Encoder ...
- 前端之Html+Css实现动画的方法
在不使用JS.Canvas.gif等其他方式的情况下,前端实现动画的方式有Css3的transform属性.transition属性和animation属性三种方式. 1.transform属性 可以 ...
- 前端实现动画的6种方式详解
前端实现动画的6种方式详解 一.总结 一句话总结:一般是css样式改变加setInterval 二.[前端动画]实现动画的6种方式 通常在前端中,实现动画的方案主要有6种: javascript直接实 ...
- ae制h5文字动画_绝对干货！H5动画制作方法全揭秘
原标题:绝对干货!H5动画制作方法全揭秘 近年来,H5页面火爆整个移动互联网,这些页面的炫酷展现,都离不开动效设计和制作,而动效设计和制作早已成为一名合格设计师必需掌握的技能. 目前,设计师制作H5页 ...
- 前端canvas动画如何转成mp4视频
本文原创:huanghaijin 项目背景 用户通过上传合适尺寸的图片,选着渲染动画的效果和音乐,可以预览类似幻灯片的效果,最后点击确认生成视频,可以放到头条或者抖音播放. 生成视频可能的方案 纯前端 ...
- 前端css动画_很棒的前端资源和CSS动画课程
前端css动画 This is the editorial from our latest HTML/CSS Channel newsletter, you can subscribe here. 这 ...
- 前端实现动画效果的几种方式（有实例）
现在对于前端的要求变大了很多,随着时代进步,人们的审美越来越挑剔,对于用户交互的体验成为了公司竞争的一大助力.而动画效果,可以说是最有效的提高用户体验的方式了.但是对于前端来说,实现动画的方法也有很多 ...
- html显示数据库图片django,django将图片上传数据库后在前端显式的方法
1.使用ImageField先安装pillow模块 pip install pillow 2.在app的models中设置 class Image(models.Model): pic_name=mo ...
- “计算机之子”winter：我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...
最新文章
- 子网掩码的计算与划分详解
- 纯css写单选框和复选框的样式和功能
- 【 C 】结构的自引用
- C++大师Lippman：我对中国程序员的忠告
- 全国大学生数学建模如何轻松获得一等奖，我想你需要知道这样知识
- KDD Cup 2021：时间序列异常检测问题开源方案
- 【JavaWeb】石家庄地铁搭乘系统——第一版（功能尚未完善）
- 《Hive编程指南》14.3 投影变换的实践出错原因分析
- 深入理解Linux守护进程
- LINQ to Tree - A Generic Technique for Querying Tree-like Structures，包含遍历WPF VisualTree
- 第 2-4 课：克隆和序列化 + 面试题
- 最小费用最大流背诵用模板
- 70个具有商业实战性的精品Android源码
- led点阵c语言程序,LED点阵C语言程序
- 周期性行业是什么意思_周期性股票是什么意思 周期性股票的特征有哪些
- 戴尔-卡耐基:《人性的弱点 How to Win Friends And Influence People》总结
- 补鞋匠（cobbler）的修仙之旅
- 飞塔防火墙添加删除用户配置
- 最后防线：字节跳动HIDS分析
- ETL示例解决方案 —— Sakila下载和基本配置 （笔记一）