前端实现动画的7种方式

1.css3的transition属性

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

2.css3的animation属性

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

3.原生JS动画

通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果

4.使用canvas绘制动画

Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。

5.SVG动画

SVG是一种基于XML的图像格式，非常类似于HTML的工作方式。它为许多熟悉的几何形状定义了不同的元素，这些元素可以在标记中组合以产生二维图形; 同样高清的质地，矢量图不畏惧放大，体积小。

6.Jquery的animate函数

animate() 方法执行 CSS 属性集的自定义动画；该方法通过 CSS 样式将元素从一个状态改变为另一个状态。

7.使用gif图片

图形交换格式

总结：

代码复杂度方面简单动画：css代码实现会简单一些，js复杂一些。复杂动画的话：css代码就会变得冗长，js实现起来更优。
动画运行时，对动画的控制程度上 js 比较灵活，能控制动画暂停，取消，终止等css动画不能添加事件，只能设置固定节点进行什么样的过渡动画。
兼容方面 css 有浏览器兼容问题js大多情况下是没有的。
性能方面 css动画相对于优一些，css 动画通过GUI解析js动画需要经过js引擎代码解析，然后再进行 GUI 解析渲染。

前端实现动画的7种方式相关推荐

前端实现动画的6种方式详解
前端实现动画的6种方式详解一.总结一句话总结:一般是css样式改变加setInterval 二.[前端动画]实现动画的6种方式通常在前端中,实现动画的方案主要有6种: javascript直接实 ...
前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
HTML设置页面动画效果有几种,前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
Github项目解析（九）--实现Activity跳转动画的五种方式
2019独角兽企业重金招聘Python工程师标准>>> 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请标明出处:一片枫叶的专栏上一篇文章中我们讲解了在Activity ...
前端代码深浅拷贝四种方式
今天公司的实习生有问我代码怎么深拷贝下面我就给大家整理四种前端代码深拷贝的四种方式前端数据分为基本数据类型和引用数据类型,当我们拷贝引用数据类型的时候,我们希望改变新数组(对象)不改变原本的数组( ...
全网最全！！Qt实现图片旋转及图片旋转动画的几种方式
实现图片旋转的两种方式第一种方案使用 QPixmap 的 transformed 函数来实现旋转,这个函数默认是以图片中心为旋转点,不能设置旋转的中心点,使用如下: QMatrix matrix; ...
前端下载文件的几种方式
前端下载文件的几种方式前言 1. window.open 2. window.location.href 3. a标签 4. iframe 5. blob 前言总结下载文件的几种方式,文件都是通过 ...
Android -- 基础篇 -- Activity跳转动画的五种方式（下）
上一篇文章中我们讲解了在Activity启动过程中获取组件宽高的五种方式.在Activity的启动过程中如果我们直接在生命周期方法中通过view.getWidth()或者是view.getHeight ...
android动画变黑,Activity添加进入和退出动画的两种方式，解决黑色区域问题
Activity添加进入和退出动画的两种方式,解决黑色区域问题给Activity添加进入和退出动画的操作,大家一定不会陌生.常见的有两种方式,一种是通过style文件给Activity设置Theme ...
lua cocos 创建动画的几种方式
lua cocos 创建动画有如下几种方式可供大家选择: 第一种方式: 在cocos studio 中拖进去一个Armature,在Armature的特性一栏导入美术或者自己做好的动画(导入文件). ...