关键词:
通常在前端中,实现动画的方案主要有6种:
- CSS3 transition;
- CSS3 animation;
- javascript直接实现;
- SVG(可伸缩矢量图形);
- Canvas动画;
- requestAnimationFrame;
首先,我们来搭一个基本结构框架:
<style> div position: relative; background: #999; width: 50px; height: 50px; .animat </style> <body> <div class="animat"></div> </body>
CSS3 transition
transition是过度动画。但是transition只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡,而不是马上改变。
transition是渐变的意思,就是某个属性 从一个值逐渐变成另一个值,比如width:从50px,到200px
基本表达式 transition: transition-property transition-duration transition-timing-function transition-delay
- transition-property :需要做缓动的属性,默认值为all,就表示所有可以缓动的属性都做缓动动画
- transition-duration : 整个缓动动画的持续时间,比如1s 就是1秒
- transition-timing-function : 缓动动画的呈现速度方式,默认值为ease,即 先慢再快再慢,还有linear(匀速)等其他方式
- transition-delay : 延迟执行动画时间
示例
.animat transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ .animat:hover width:300px;
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div width:100px; height:100px; background:red; position:absolute; .animat transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ .animat:hover width:300px; </style> </head> <body> <div class=‘animat‘></div> </body> </html>
这个动画呈现效果是:当鼠标移动到div上的时候,执行width 改变动画。
很多其他的一些属性也可以,比如left,opacity 等等,这里不做赘述。
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的属性,仍然需要注意它的兼容性,加上必须的前缀。
keyframes
包含两部分,第一个是使用animation属性,第二部分是:用@keyframes定义动画
示例
.animat animation: testAni 2s infinite alternate; /*infinite表示动画一直循环播放*/ /*alternate表示动画下一次反向播放*/ @keyframes testAni 0% width:100px; 30% width:200px; 100% width: 500px;
0% 表示最开始,30%,表示整个动画时间的30%, 100% 表示结束,
中括号里面就是需要呈现动画的属性。
注:动画优化:1)因为动画改变的太频繁,所以我们最好用position:absolute或fixed的方式把元素脱离文档流,避免频繁重绘;
2) 如果是定位属性:比如left,top等等,可以用transform:translate()的方式来替代,这样性能更好.
注:transition适合于一次性的呈现动画,animation适合多次 或者需要控制中间过程的动画.
javascript 直接实现动画
其主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。
示例
<body> <div id="animat"></div> <script> let elem = document.getElementById(‘animat‘); let left = 1; //获取某个元素的宽度:obj.offsetWidth; console.log(elem.offsetWidth); let timer = setInterval(function() let elemWidth=elem.offsetWidth; if(elemWidth<500) //设置某个元素的宽度:obj.style.width; elem.style.width=elemWidth+left+‘px‘; left ++; else clearInterval(timer); ,16); </script> </body>
Jquery的animate()方法就是这种方式实现的。
存在的问题
javascript 实现动画通常会导致页面频繁性重排重绘,消耗性能,一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。
用javascript实现手势库—手势动画应用前端组件化(代码片段)
前端《组件化系列》目录「一」用JSX建立组件Parser(解析器)「二」使用JSX建立Markup组件风格「三」用JSX实现Carousel轮播组件「四」用JavaScript实现时间轴与动画「五」用JavaScript实现三次贝塞尔动画库-前端组件化「六」用... 查看详情
用javascript实现手势库—手势动画应用前端组件化(代码片段)
前端《组件化系列》目录「一」用JSX建立组件Parser(解析器)「二」使用JSX建立Markup组件风格「三」用JSX实现Carousel轮播组件「四」用JavaScript实现时间轴与动画「五」用JavaScript实现三次贝塞尔动画库-前端组件化「六」用... 查看详情
用javascript实现手势库—手势动画应用前端组件化(代码片段)
前端《组件化系列》目录「一」用JSX建立组件Parser(解析器)「二」使用JSX建立Markup组件风格「三」用JSX实现Carousel轮播组件「四」用JavaScript实现时间轴与动画「五」用JavaScript实现三次贝塞尔动画库-前端组件化「六」用... 查看详情
你知道几种前端动画的实现方式?(代码片段)
...富,从而也要求H5页面具有更多的花样性及动画效果。那前端实现动画效果的方式有哪些呢,大致有如下几种:一、GIF图片GIF图就直接贴上图片就好了,使用非常简单,但GIF图有时出现问题是没办法控制的,比如常见的GIF图的闪... 查看详情
纯前端实现—点一个小圆圈变四个动画效果(代码片段)
实现效果:点一变四源码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>title</title><style>*margin:0;padding:0;#bo 查看详情
从打字机效果的n种实现看js定时器机制和前端动画(代码片段)
首先,什么是打字机效果呢?打字机效果即为文字逐个输出,实际上就是一种Web动画。一图胜千言,诸君请看: 在Web应用中,实现动画效果的方法比较多,JavaScript中可以通过定时器setTimeout来实现,css3可以使用transition... 查看详情
用javascript实现手势库—手势动画应用前端组件化(代码片段)
前端《组件化系列》目录「一」用JSX建立组件Parser(解析器)「二」使用JSX建立Markup组件风格「三」用JSX实现Carousel轮播组件「四」用JavaScript实现时间轴与动画「五」用JavaScript实现三次贝塞尔动画库-前端组件化「六」用... 查看详情
深入css3帧动画实现ps时间轴动画效果steps()(前端网备份)(代码片段)
在应用CSS3渐变/动画时,有个控制时间的属性<timing-function>。它的取值中除了常用到的三次贝塞尔曲线以外,还有个让人比较困惑的steps()函数。steps()第一个参数number为指定的间隔数(必须是正整数),即把动画分为n步阶段... 查看详情
前端----jquery的动画效果(代码片段)
jQuery提供的一组网页中常见的动画效果,这些动画是标准的、有规律的效果;同时还提供给我们了自定义动画的功能。显示动画方式一:$("div").show();解释:无参数,表示让指定的元素直接显示出来。其实这个方法的底层就... 查看详情
用javascript实现时间轴与动画-前端组件化(代码片段)
上一篇文章《用JSX实现Carousel轮播组件》中,我们实现了一个“基础”的轮播组件。为什么我们叫它“基础”呢?因为其实它看起来已经可以满足我们轮播组件的功能,但是其实它还有很多缺陷我们是没有去完善的。... 查看详情
wpf实现3d翻转的动画效果(代码片段)
原文:WPF实现3D翻转的动画效果1、前端代码实现1.1原理见代码注析<GridMouseDown="Grid_MouseDown"><Viewport3D><Viewport3D.Camera><!--Position属性指定3D空间中摄像机的位置,LookDirection属性为摄像机方向--><PerspectiveCameraPosit 查看详情
wpf实现3d翻转的动画效果(代码片段)
1、前端代码实现1.1原理见代码注析1<GridMouseDown="Grid_MouseDown">2<Viewport3D>3<Viewport3D.Camera>4<!--Position属性指定3D空间中摄像机的位置,LookDirection属性为摄像机方向-->5<PerspectiveCameraPosition="00500"L 查看详情
前端学习(49)~offset相关属性和匀速动画(含轮播图实现)(代码片段)
JS动画的主要内容如下:1、三大家族和一个事件对象:三大家族:offset/scroll/client。也叫三大系列。事件对象/event(事件被触动时,鼠标和键盘的状态)(通过属性控制)。2、动画(闪现/匀速/缓动)3、冒泡/兼容/封装offset家族的... 查看详情
帧动画插件(代码片段)
...单的动画插件来巩固自己所学。动画插件的实现方式对于前端来说,主要实现动画的方式就是css(transition,animation),js(setTimeout,setInterval,requestAnimationFrame),canvas,svg等方式,在这里我主要是通过requestAnimationFrame来实现动画效果的... 查看详情
flutter学习-动画(代码片段)
...动画补充3.1交织动画3.2Hero动画3.2跳转页面动画对于一个前端App来说,添加适当的动画,可以 查看详情
纯前端实现—点一个小圆圈变四个动画效果(代码片段)
实现效果:点一变四源码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>title</title><style>*margin:0;padding:0;#boxwidth:180px;height:180px;/*border:1pxsolidred;*/margin:200pxauto;position:relativ... 查看详情
用javascript实现手势库—手势逻辑前端组件化(代码片段)
前端组件化系列目录「一」用JSX建立组件Parser(解析器)「二」使用JSX建立Markup组件风格「三」用JSX实现Carousel轮播组件「四」用JavaScript实现时间轴与动画「五」用JavaScript实现手势库-实现监听逻辑「六」用JavaScript实现... 查看详情
用javascript实现手势库—封装手势库前端组件化(代码片段)
前端《组件化系列》目录「一」用JSX建立组件Parser(解析器)「二」使用JSX建立Markup组件风格「三」用JSX实现Carousel轮播组件「四」用JavaScript实现时间轴与动画「五」用JavaScript实现三次贝塞尔动画库-前端组件化「六」用... 查看详情