当前位置: 永利皇宫463手机版 > Web前端 > 正文

说说大家都纯熟的网页动漫本事,使用情势总括

时间:2019-11-21 20:27来源:Web前端
说说大家都纯熟的网页动画技能 2015/12/07 · CSS,HTML5,JavaScript · 1评论 ·动画 初藳出处:大搜车的前面端团队博客    实际工作中,SVG大许多是用svg+defs/defs(大概symbol卡塔尔+use/use+/svg的

说说大家都纯熟的网页动画技能

2015/12/07 · CSS, HTML5, JavaScript · 1 评论 · 动画

初藳出处: 大搜车的前面端团队博客   

实际工作中,SVG大许多是用<svg>+<defs></defs>(大概symbol卡塔尔+<use></use>+</svg>的组合来行使的,defs 以偏概全正是「definitions」定义,大家得以把众多种复性质高的因素,归入defs 成分内,让它成为叁个能够再度利用的物件。而symbol更加多的只是含有单个Logo。

前言

从公元元年以前手绘翻书动漫,到胶片电影,再到多白一骢态图合成 gif,
那几个都离不开三个术语叫

也正是大家须求绘制每后生可畏帧,然后决定一下帧与帧之间的岁月间隔。

不过相邻两帧之间的调换并比比较小,重复绘制浪费体力,
幸好Computer代码能够复制粘贴,然后改正一下转移的地点就可以了。

等等,好像哪个地方不对。

微机代码除了能够复制粘贴,还或者有抽象手艺。
小编们能够把必要复制粘贴的代码交给计算机来重新实行。
把要求转移的地点,交给计算机来运算。

而网页中兼有运算本事的唯有JS,其余的就只可以是概念一下参数,剩下的就交付浏览器了。

那就是 JS 算编制程序,而 HTML、css 不算编制程序的缘由。
有关探讨,回复内容+关键字#你丫才码农#

1、SVG使用办法

无论哪个种类艺术,svg都不得不作为根标签

  • 外链方式
    这种形式是先定义好四个svg文件,再在html或css中引进。
// test.svg
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="40" fill="red"></circle>
</svg>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG</title>
</head>
<body>
         ![](test.svg)
</body>
</html>

外链的情势唯有是将svg成分作为多个图片,不能够使用JS对其做一些操作,如改造大小颜色等。

  • 内联格局
<div id="div1">
    <svg width="100%" height="100%" >
        <circle cx="100" cy="100" r="40" fill="red" id='circle'></circle>
    </svg>
</div>

内联方式得以向操作普通html成分相似通过getElementById拿到dom,再通过setAttribute方法做属性操作:

<script type="text/javascript">
      var c = document.getElementById('circle');
      c.setAttribute('fill','blue');
</script>

开始

网页动漫能够因此以下二种方法达成(gif、flash 除此之外),

笔者知识面有限,如有疏漏,请留言公告作者。
连带探究,回复内容+关键字#网页动画实现方式#

  • css3 动画
  • SVG 动画
  • JS 动漫(包罗 css、SVG 的性质纠正完毕的动漫卡塔 尔(英语:State of Qatar)

小编认为 canvas、webGL 只好算是意气风发种绘图格局。
她俩的动漫片也都是通过 JS 修正参数来落到实处的。
连锁斟酌,回复内容+关键字#canvas动画#

最早 JS 通过 setTimeout() 或者 setInterval() 方法设置一个时辰,
来调控帧与帧之间的日子间距。

  • setTimeout() 直接用跳出来终止下风姿罗曼蒂克帧。
  • setInterval() 使用 clearInterval() 来打消周期施行。

不过尔尔效果只怕远远不够通畅,且会攻下额外的能源。
连锁切磋,回复内容+关键字#你ST设置几毫秒#
参考:

新生,有了七个requestAnimationFrame(),让浏览器决定最优帧速率选择绘制下一帧的最佳时机
requestAnimationFrame()cancelAnimationFrame() 来结束。

就此大家来退换一下考虑方式,既然帧与帧之间的时刻间隔不用思谋了,那就关注一下变动速率吧。

  • Partial support refers to lacking cancelAnimationFrame support.
  • Supports webkitCancelRequestAnimationFrame rather than `webkitCancelAnimationFrame.

— caniuse.com

好了,动漫说罢了,你去找个科目看《canvas 绘图》?

别介,那才刚刚最早。

日渐的,大家开采一些简约动漫只是在改变多少个 css 属性,并且只是在两八个景况之间往来转换。
大方的体力却浪费在多个状态间的补间状态函数上,并且品质错落有致。

来来来,这种事情就交给浏览器嘛。

2、defs & use

  • 实例1:轻便构成
<defs>
  <rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
</defs>
<use xlink:href="#rect1"/>
<use xlink:href="#rect1" x="110"/>

图片 1

骨干组成

  • 实例2:复杂组合
<defs>
    <g id="g1">
          <rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
          <circle id="circle1" cx="30" cy="30" r="10" fill="#00c"/>
    </g>
</defs>
<use xlink:href="#g1"/>
<use xlink:href="#rect1" x="110"/>
<use xlink:href="#circle1" x="210"/>

图片 2

复杂组合

  • 实例3:渐变
<defs>
   <linearGradient id="a1">
     <stop offset="5%" stop-color="#F00" />
     <stop offset="95%" stop-color="#ff0" />
   </linearGradient>
</defs>
<rect x="50" y="250" width="100" height="100" stroke="#000" stroke-width="5" fill="url(#a1)"></rect>
<circle cx="220" cy="300" r="50" stroke="#000" stroke-width="5" fill="url(#a1)"></circle>
<rect x="290" y="250" width="100" height="100" stroke="url(#a1)" stroke-width="5" fill="none"></rect>

图片 3

渐变

  • 实例4:路径
<defs>
  <path id="a1" d="M0 50 C150 150 100 -50 300 50" stroke="#000" fill="none"/>
</defs>
<text>
   <textPath xlink:href="#a1">这是随路径跑的文字,很酷吧
  </textPath>
</text>

图片 4

路径

  • 实例5:裁切
<defs>  
  <clipPath id="a1">
  <rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#a1)" fill="#000" />

图片 5

裁切

  • 实例6:遮罩
<defs>
  <mask id="mask1"> 
    <rect  x="50" y="50" width="100" height="100" fill="#ccc"/>
    <rect  x="150" y="150" width="50" height="50" fill="#fff"/>
  </mask> 
</defs>
  <rect id="box1" x="50" y="50" width="150" height="150" fill="#0f0"/>
  <rect id="box2" x="50" y="50" width="150" height="150" fill="#f00" mask="url(#mask1)"/>

图片 6

遮罩

  • 实例7:标志marker
<defs>
  <marker id="r" viewBox="-10 -10 70 70" refX="25" refY="25" markerWidth="15" markerHeight="15" orient="auto" >
      <circle fill="#fff" stroke="#000" stroke-width="10" cx="25" cy="25" r="25"/>
  </marker>
    <marker id="g" viewBox="0 0 50 50" refX="25" refY="25" markerWidth="10" markerHeight="10" orient="45" >
      <rect fill="#0a0" width="50" height="50"/>
  </marker>
  <marker id="b" viewBox="-10 -10 70 70" refX="25" refY="25" markerWidth="15" markerHeight="15" orient="auto" >
      <circle fill="#f99" stroke="#f00" stroke-width="10" cx="25" cy="25" r="25"/>
  </marker>
</defs>
<polyline points="20,100 50,100 80,20 110,80 140,30 170,100 200,100" fill="none" stroke="black" stroke-width="1" marker-end="url(#b)" marker-start="url(#r)" marker-mid="url(#g)"></polyline>

图片 7

marker

  • 实例8:滤镜
<defs>
<filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
  <feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#a00" filter=url("#blur") />

图片 8

滤镜

css3 动画

可见实行补间状态的条件是,属性值能够转变到数值,那样就能够参预运算。如:

  • 颜色(color,background-color,border-color…)
  • 长度/大小(width,height,font-size,border-width,border-radius…)
  • 透明度(opacity)
  • 堆集顺序(z-index卡塔 尔(阿拉伯语:قطر‎你吖补间它有毛用

而不能够参预运算就代表无法拿来补间状态,也便是未有中间状态,如:

  • position(absolute、fixed、relative…)
  • background-image(三个规定的 url卡塔尔

一拍脑门就能够体会了解,成立三个补间动漫的原则有:

  • 发端意况
  • 停止状态
  • 试行时间
  • 补间效果

假定有个方块,宽度从 10px 形成 100px。

发端境况吧,在原 css 里就能够定义了 width: 10px

竣事状态呢,大家得以经过用 JS 直接改造 width 值,可能扩张八个 class 选用器的主意,
或者是 :hover 等此外代表情形的伪类,让 width: 100px

而那时,你供给二个补间动漫属性来注脚 执行时间补间效果
它就是 transition,汉语译作 过渡,正是自个儿所说的补间的情趣。

transition 为以下属性的简写

  • transition-property 规定哪个属性应用过渡
  • transition-duration 执行时间
  • transition-timing-function 补间效果,默认为 ease
  • transition-delay 延迟多少时间开始

参考:

Support listed is for transition properties as well as the transitionend event. The prefixed name in WebKit browsers is webkitTransitionEnd

— caniuse.com

css3 还提供了二个 animation 属性来创立更增加的自定义动漫,而削减 JS 的插足。

比如:

  • 您想贰个动漫中兼有四个景况
  • 各样境况修正的属性值非常多
  • 循环播放
  • 逆向播放
  • 可机关早先,可中途抛锚

animation@keyframes 同盟使用。

@keyframes 用来定义动漫,animation 则能够多处选拔,他们通过二个 name 来三番四遍互相,
因此 @keyframes 必定要起个名字,而 animation 则有个 animation-name

animation 在应用时,你可以自定义它:

  • animation-duration 执行时间
  • animation-time-function 补间效果,默认是 ease
  • animation-delay 延迟多少时间开始
  • animation-iteration-count 循环播放次数
  • animation-direction 是否在下一周期逆向播放
  • animation-play-state 动画是否暂停,通过它,可以实现是否自动播放。要中途暂停的话,就要修改值,通过伪类或 JS 实现
  • animation-fill-mode 那脾性格倒是有一些出乎意想不到,请自行钻研利用情形

看得出 w3c 标准制订者们思谋到我们要用起来大约吗,基本上和大家构思方法雷同。

兑现动漫的三个状态是在 @keyframes 定义时完毕的。

采用 0%~100% 的撤销合并情势,大家就无须在 执行时间 之卖酌量时间难点了。

参考:

Partial support in Android browser refers to buggy behavior in different scenarios.

–caniuse.com

3、控制svg

  • CSS 方式
    svg成分和html成分同样,都能够用class属性增添类名来决定样式,只是对于svg成分来讲,可决定的体制少之甚少,不足为奇的有fill,stroke,stroke-width
    ,opacity甚至transform,看贰个事例:

    //定义区
    <svg>
      <symbol id="ic"> 
          <path fill="#000" d="..."/> 
      </symbol> 
    </svg>
    //使用区
    <svg class="icon" viewBox="0 0 100 125"> 
       <use class="ic-1" xlink:href="#ic" x="0" y="0" /> 
    </svg> 
    <svg class="icon" viewBox="0 0 100 125">
       <use class="ic-2" xlink:href="#ic" x="0" y="0" />
    </svg>
    //定义样式
    .icon { width: 100px; height: 125px; }
    use.ic-1 { fill: skyblue; } 
    use.ic-2 { fill: #FDC646; }
    svg path { fill: inherit; }    //防止.ic-1,.ic-2设置的fill被path覆盖
    

图片 9

symbol成分和defs大概,都是用来构成成分的,但symbol更加多的用来单个Logo的组合

  • JS 方式
    要在SVG内动态新扩充<path>或<rect>等因素,要运用createElementNS,并不是createElement,因为svg和html不在同三个命名空间里。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
        <svg id="s" xmlns="http://www.w3.org/2000/svg"/>
        <script type="text/javascript">
            function makeSVG(tag, attrs) {
                var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
                for (var k in attrs)
                    el.setAttribute(k, attrs[k]);
                return el;
            }
            var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
            document.getElementById('s').appendChild(circle);
        </script>
    </body>
    </html>
    

SVG 动画

css3 动画属性只管得住本身的 css 属性,SVG 绘制的图样,还得 SVG 自身化解。而对于 SVG 的 css 样式,平日三种皆可。

SVG 大大们的想想格局就有一点绕了,竟然提供了 5 种动漫 标签让自个儿选用:

  • set 相当于 animate 的 calcMode="discrete",忽略
  • animate
  • animateColor 相当于 animate 的 attributeName="color",忽略
  • animateTransform
  • animateMotion

咱俩先来看看和 css3 最像的 animate 标签,具备的质量有

  • attributeName 规定哪个属性应用过渡
  • from 开始状态
  • to/by 结束状态,至少出现一个
  • values 多个状态时,忽略 from/to/by
  • begin 延迟多少时间开始
  • dur 执行时间
  • calcMode,keyTimes,keySplines 自定义补间效果
  • repeatCount,repeatDur 循环播放次数/持续时间

额,大致正是这般,下二个啊。

animateTransform 首倘使为着 attributeName="transform"
跟 css3 动漫组成 transform 转变相通,多了四个 type="scale" 属性用来分别相关参数。

animateMotion 是 SVG 甩 css3 动漫一条街的精锐技艺,能够让SVG种种图片沿着一定的 path 路线运动。

SVG 动漫比 css 动漫越来越强有力,所以也更眼花缭乱。

细分成那 5 类标签,大约是性质构思,人工轻松区分一下数值、颜色、调换,可感到Computer省去大批量的无效运算。

小编在此也无法讲的更详尽,测度你也没看太领悟
提出阅读:

4、svg最好推行

在职业中svg使用最多的现象依旧当小Logo使用,替换诸如纯图片、iconfontLogo等方案。使用内联svg的优势在于:1、少发一回http伏乞;2、放大不会变形;3、易于用JS调整,比iconfont更加灵敏。

至上做法(SVG sprite):

  • 1、将装有必要利用的小Logo统一定义在svg下,该svg要安装display:none,每一个小Logo用symbol包围,每种symbol取四个id,方便后续调用;
  • 2、使用svg+use的主意调用,use中用属性xlink:href='#id'来援引相应Logo,能够给每一个svg取一个类名,方便css和js动态调节;
  • 3、通过getElementById的法子得到要求改变属性的use成分,为其动态增进或删除相应的类名;
  • 4、增加的类名最后是使用在symbol上,symbol中定义的Logo(path卡塔尔国会覆盖类名中对应的质量,所以不忘记了安装symbol霜月素的性质持续自symbol,就像是
    上例中:svg path { fill: inherit; };
  • 5、要想实现越发复杂的效用,如渐变等,能够应用defs;
  • 6、要想做动漫效果,能够在css类名中调控opacity、transform、stroke-dasharray和stroke-dashoffset属性。

JS 还应该有啥用

透过注明属性,调用浏览器来达成的点子,终究有限,JS 可认为大家提供最棒或者。

通过相比较 CSS3 和 SVG 大家也能看出来,要兑现的东西更多,大家须要区分、回想的性子也越来越多。
一个繁缛动漫使用注脚属性的点子有望并未经过编写制定逻辑来得越来越爽。看,SVG.js。

在那倒是想到了 Grunt 和 居尔p 之争
有关切磋,请过来+关键字#不要给我太多配置项#

css3 属性中宣称的补间效果其实点儿,SVG 的 calcMode,keyTimes,keySplines 又略显复杂,
于是 github 上现身了一大批判补间效果仓库,更有强盛者弥补了 CSS3 与 SVG 动画上各种方面包车型大巴青黄不接。

5、SVG动画

  • 简容易单小巧,使用简便
  • 4 大类/29 种补间动漫效果
  • 支撑 SVG path 路线的补间过渡
    • !微微有一点鸡肋,path 长度不风姿罗曼蒂克致或项目分歧期现身动漫混乱
  • !仅支持开首、甘休多个情景
animate({ el: "div", // 选择器 duration: 1000, // 执行时间 delay: 0,
// 延迟多少时间开始 easing: "easeOutElastic", // 补间效果 loop:
false, // 是否循环 direction: normal, // 是否重复 begin: function ()
{}, // 开始事件 complete: function () {}, // 结束事件 ...: ['',
''] // css/SVG 需要改变的属性 });

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d2831927818175163-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831927818175163-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831927818175163-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831927818175163-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831927818175163-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831927818175163-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831927818175163-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831927818175163-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831927818175163-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831927818175163-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831927818175163-11">
11
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d2831927818175163-1" class="crayon-line">
animate({
</div>
<div id="crayon-5b8f6d2831927818175163-2" class="crayon-line crayon-striped-line">
    el: &quot;div&quot;,  // 选择器
</div>
<div id="crayon-5b8f6d2831927818175163-3" class="crayon-line">
    duration: 1000, // 执行时间
</div>
<div id="crayon-5b8f6d2831927818175163-4" class="crayon-line crayon-striped-line">
    delay: 0,   // 延迟多少时间开始
</div>
<div id="crayon-5b8f6d2831927818175163-5" class="crayon-line">
    easing: &quot;easeOutElastic&quot;,   // 补间效果
</div>
<div id="crayon-5b8f6d2831927818175163-6" class="crayon-line crayon-striped-line">
    loop: false,    // 是否循环
</div>
<div id="crayon-5b8f6d2831927818175163-7" class="crayon-line">
    direction: normal,  // 是否重复
</div>
<div id="crayon-5b8f6d2831927818175163-8" class="crayon-line crayon-striped-line">
    begin: function () {},  // 开始事件
</div>
<div id="crayon-5b8f6d2831927818175163-9" class="crayon-line">
    complete: function () {},   // 结束事件
</div>
<div id="crayon-5b8f6d2831927818175163-10" class="crayon-line crayon-striped-line">
    ...: ['', '']   // css/SVG 需要改变的属性
</div>
<div id="crayon-5b8f6d2831927818175163-11" class="crayon-line">
});
</div>
</div></td>
</tr>
</tbody>
</table>

5.1 路线动漫

路径动漫基本是svg动漫里最常用的了,其基本原理是动态更改stroke-dasharray和stroke-dashoffset属性的值:

图片 10

实例:

<body>
    <svg>
        <symbol viewBox="0 0 24 20" id="ic" xmlns="http://www.w3.org/2000/svg">
            <title>点赞前</title>
            <path d="M22.825 6.727a6.236 6.236 0 0 0-1.8-3.818A5.275 5.275 0 0 0 17.36 1.44a5.275 5.275 0 0 0-3.667 1.47A11.134 11.134 0 0 0 12 5.09a11.134 11.134 0 0 0-1.692-2.18A5.275 5.275 0 0 0 6.64 1.44a5.275 5.275 0 0 0-3.667 1.47 6.236 6.236 0 0 0-1.8 3.817c-.044.546-.1 2.095 1.236 4.364 2.584 4.364 7.655 6.802 9.59 7.636 1.935-.834 7.006-3.272 9.59-7.636 1.337-2.27 1.28-3.83 1.235-4.364z" stroke="#454545" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    <svg class="icon" viewBox="0 0 100 125">
        <use class="ic-1" xlink:href="#ic" x="0" y="0" />
    </svg>
</body>

    svg.icon {
        width: 120px;
        height: 135px;
    }
    use.ic-1 {
        stroke: gray;
        fill: gray;
        animation: move 3s linear forwards;
    }
    @keyframes move {
        0% {
            stroke-dasharray: 30px, 30px;
        }
        100% {
            stroke-dasharray: 30px, 0px;
        }
    }
    svg path {
        fill: inherit;
        stroke: inherit;
    }

功效就是stroke从30px长和30px空白逐步变得未有空白

无论你定义多少补间效果,都满意不断全体人的须求,这里有个 path 路线补间函数生成器。
var myFunc = mojs.easing.path(path),输入三个 SVG path,myFunc() 即是你协和的补间函数。

5.2 SMIL动画(2018/1/1更新)

以上动漫方式连接供给借助css来落实,其实svg特地有做动漫的要素
先看活动端宽容性:

图片 11

SVG SMIL animation

  • set
    在一准时刻将来校正有些属性值
    用法:
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
      马
      <set attributeName="x" attributeType="XML" to="60" begin="3s" />
    </text>
  </g>
</svg>

本条「马」会在3秒以往从横坐标160的职位移动60那个职位(须臾移,无动画效果)

  • animate
    完毕单属性(不富含css的transform)的动漫片过渡效果
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
    马
      <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
  </g>
</svg>
  • animateTransform
    专用于transform动画
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="80" y="100" x="100">马</text>
    <animateTransform attributeName="transform" begin="0s" dur="3s"  type="scale" from="1" to="1.5" repeatCount="indefinite"/>
  </g>
</svg>
  • animateMotion
    专项使用于复杂的不二等秘书籍动漫
<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite"/>
  </text>
  <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>

  • 太屌,不开展反面争辩
  • 最欢欣它的链式操作
var svg = d3.select("#a") // 选择器 .attr('d',
svg_num_path_d[0]) // ... 可以进行其他设置 .attr('fill',
'#f00') // 设置初始状态 .transition() // 返回 transition 对象
.call(function (transition) { return transition // 承接 transition
对象 .duration(3000) // 执行时间 .delay(0) // 延迟多少时间开始
.ease('cubic-in-out') // 补间效果 .attr('fill', '#ff0'); //
本次过渡结束状态 }) // 重新返回选择器对象 // ... 可以进行其他设置
.transition() // 进行下一个过渡 .call(function (transition) { return
transition.duration(3000).attr('fill', '#f0f'); }) // ...
可以进行其他设置 ;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d2831931570115466-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831931570115466-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831931570115466-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831931570115466-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831931570115466-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831931570115466-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831931570115466-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831931570115466-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831931570115466-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831931570115466-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831931570115466-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831931570115466-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831931570115466-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831931570115466-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831931570115466-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831931570115466-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831931570115466-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831931570115466-18">
18
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831931570115466-19">
19
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d2831931570115466-1" class="crayon-line">
var svg = d3.select(&quot;#a&quot;)   // 选择器
</div>
<div id="crayon-5b8f6d2831931570115466-2" class="crayon-line crayon-striped-line">
    .attr('d', svg_num_path_d[0])
</div>
<div id="crayon-5b8f6d2831931570115466-3" class="crayon-line">
    // ... 可以进行其他设置
</div>
<div id="crayon-5b8f6d2831931570115466-4" class="crayon-line crayon-striped-line">
    .attr('fill', '#f00')   // 设置初始状态
</div>
<div id="crayon-5b8f6d2831931570115466-5" class="crayon-line">
    .transition()   // 返回 transition 对象
</div>
<div id="crayon-5b8f6d2831931570115466-6" class="crayon-line crayon-striped-line">
    .call(function (transition) {
</div>
<div id="crayon-5b8f6d2831931570115466-7" class="crayon-line">
        return transition   // 承接 transition 对象
</div>
<div id="crayon-5b8f6d2831931570115466-8" class="crayon-line crayon-striped-line">
            .duration(3000) // 执行时间
</div>
<div id="crayon-5b8f6d2831931570115466-9" class="crayon-line">
            .delay(0)   // 延迟多少时间开始
</div>
<div id="crayon-5b8f6d2831931570115466-10" class="crayon-line crayon-striped-line">
            .ease('cubic-in-out')   // 补间效果
</div>
<div id="crayon-5b8f6d2831931570115466-11" class="crayon-line">
            .attr('fill', '#ff0');  // 本次过渡结束状态
</div>
<div id="crayon-5b8f6d2831931570115466-12" class="crayon-line crayon-striped-line">
    })  // 重新返回选择器对象
</div>
<div id="crayon-5b8f6d2831931570115466-13" class="crayon-line">
    // ... 可以进行其他设置
</div>
<div id="crayon-5b8f6d2831931570115466-14" class="crayon-line crayon-striped-line">
    .transition()   // 进行下一个过渡
</div>
<div id="crayon-5b8f6d2831931570115466-15" class="crayon-line">
    .call(function (transition) {
</div>
<div id="crayon-5b8f6d2831931570115466-16" class="crayon-line crayon-striped-line">
        return transition.duration(3000).attr('fill', '#f0f');
</div>
<div id="crayon-5b8f6d2831931570115466-17" class="crayon-line">
    })
</div>
<div id="crayon-5b8f6d2831931570115466-18" class="crayon-line crayon-striped-line">
    // ... 可以进行其他设置
</div>
<div id="crayon-5b8f6d2831931570115466-19" class="crayon-line">
    ;
</div>
</div></td>
</tr>
</tbody>
</table>

5.3 小结

有关用svg做动画,更推荐用5.2的措施,并且5.第22中学animate的用法是最多的,animate成分还是能组成使用:

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马
        <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
        <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
</svg>

其余,svg动漫还是可以手动调整(JS)动漫的开端和脚刹踏板

// svg指当前svg DOM元素
// 暂停
svg.pauseAnimations();

// 重启动
svg.unpauseAnimations()

  • 一个和 animateplus 相符容命理术数的框架
  • !大致是因为主打物理引擎(未有色金属研讨所究,估摸是那般卡塔 尔(阿拉伯语:قطر‎,动漫效果有一点点鸡肋
    • 命名极火啊,不过并未怎么卵用
  • 也提供了过多补间效果,还辅助 new ui.Easing(x, y, x, y) 自定义补间效果
    • !自定义补间仅仅是一个轻松贝塞尔曲线,和 mojspath-easing 完全未有可比性啊
  • !多景况的过渡是 promise 的写法,完全未有 d3.js 的链式操作来的爽
// 选择器,以及初始状态 var ballActor = new ui.Actor({ element:
'#ball', values: { backgroundColor: '#ff2420', borderRadius: '50%'
} }); var morphAnimation = new ui.Tween({ values: { backgroundColor:
'#2983ff', borderRadius: '0%', x: 300 }, // 结束状态 duration:
1000, // 执行时间 yoyo: true // 相当于 animateplus 的
direction,好奇怪的命名 // flip // loop //
onStart、onFrame、onUpdate、onComplete });
ballActor.start(morphAnimation); // 触发动画

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d2831936754356035-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831936754356035-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831936754356035-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831936754356035-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831936754356035-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831936754356035-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831936754356035-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831936754356035-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831936754356035-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831936754356035-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831936754356035-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831936754356035-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831936754356035-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831936754356035-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831936754356035-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831936754356035-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831936754356035-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831936754356035-18">
18
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831936754356035-19">
19
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831936754356035-20">
20
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831936754356035-21">
21
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d2831936754356035-22">
22
</div>
<div class="crayon-num" data-line="crayon-5b8f6d2831936754356035-23">
23
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d2831936754356035-1" class="crayon-line">
// 选择器,以及初始状态
</div>
<div id="crayon-5b8f6d2831936754356035-2" class="crayon-line crayon-striped-line">
var ballActor = new ui.Actor({
</div>
<div id="crayon-5b8f6d2831936754356035-3" class="crayon-line">
    element: '#ball',
</div>
<div id="crayon-5b8f6d2831936754356035-4" class="crayon-line crayon-striped-line">
    values: {
</div>
<div id="crayon-5b8f6d2831936754356035-5" class="crayon-line">
        backgroundColor: '#ff2420',
</div>
<div id="crayon-5b8f6d2831936754356035-6" class="crayon-line crayon-striped-line">
        borderRadius: '50%'
</div>
<div id="crayon-5b8f6d2831936754356035-7" class="crayon-line">
    }
</div>
<div id="crayon-5b8f6d2831936754356035-8" class="crayon-line crayon-striped-line">
});
</div>
<div id="crayon-5b8f6d2831936754356035-9" class="crayon-line">
 
</div>
<div id="crayon-5b8f6d2831936754356035-10" class="crayon-line crayon-striped-line">
var morphAnimation = new ui.Tween({
</div>
<div id="crayon-5b8f6d2831936754356035-11" class="crayon-line">
    values: {
</div>
<div id="crayon-5b8f6d2831936754356035-12" class="crayon-line crayon-striped-line">
        backgroundColor: '#2983ff',
</div>
<div id="crayon-5b8f6d2831936754356035-13" class="crayon-line">
        borderRadius: '0%',
</div>
<div id="crayon-5b8f6d2831936754356035-14" class="crayon-line crayon-striped-line">
        x: 300
</div>
<div id="crayon-5b8f6d2831936754356035-15" class="crayon-line">
    },  // 结束状态
</div>
<div id="crayon-5b8f6d2831936754356035-16" class="crayon-line crayon-striped-line">
    duration: 1000, // 执行时间
</div>
<div id="crayon-5b8f6d2831936754356035-17" class="crayon-line">
    yoyo: true  // 相当于 animateplus 的 direction,好奇怪的命名
</div>
<div id="crayon-5b8f6d2831936754356035-18" class="crayon-line crayon-striped-line">
    // flip
</div>
<div id="crayon-5b8f6d2831936754356035-19" class="crayon-line">
    // loop
</div>
<div id="crayon-5b8f6d2831936754356035-20" class="crayon-line crayon-striped-line">
    // onStart、onFrame、onUpdate、onComplete
</div>
<div id="crayon-5b8f6d2831936754356035-21" class="crayon-line">
});
</div>
<div id="crayon-5b8f6d2831936754356035-22" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6d2831936754356035-23" class="crayon-line">
ballActor.start(morphAnimation);    // 触发动画
</div>
</div></td>
</tr>
</tbody>
</table>

笔者将会在此边相比越来越多 JS 动漫函数库的应用办法

6、参考:

  • SVG Sprite使用简要介绍
  • SVG 研讨之路 (18) - 再談 defs
  • 至上无敌的SVG SMIL animation动漫安详严整
  • https://www.nihaoshijie.com.cn/index.php/archives/667/

鸣谢

  • 1 赞 5 收藏 1 评论

图片 12

编辑:Web前端 本文来源:说说大家都纯熟的网页动漫本事,使用情势总括

关键词: