前端实现动画(代码片段)

sunmarvell sunmarvell     2022-12-17     369

关键词:

通常在前端中,实现动画的方案主要有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实现三次贝塞尔动画库-前端组件化「六」用... 查看详情