金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 微信公众号排版背后的技术解析,使用方式总结

微信公众号排版背后的技术解析,使用方式总结

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-05 18:51

说说大家都熟悉的网页动画技术

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

原文出处: 大搜车前端团队博客   

实际工作中,SVG大多数是用<svg>+<defs></defs>(或者symbol)+<use></use>+</svg>的组合来使用的,defs 顾名思义就是「definitions」定义,我们可以把许多重复性质高的元素,放入defs 元素内,让它变成一个可以重复利用的物件。而symbol更多的只是包含单个图标。

由于简书很有效果不支持,欢迎移步微信公众号排版背后的技术解析&version=12010310&nettype=WIFI&fontScale=100&pass_ticket=4mT2gCWcu%2BM0bmfChXM%2FBHxLFG%2BG1QmGrkYu%2BK2kfMdDURxBI09XqROPl8zrGXL2) 查看具体的效果

在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性。每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发。像CSS 库,框架,应用这样的工具能够为开发者做很多事,而且可以使开发者创造出创新立异的WEB应用。

前言

从古代手绘翻书动画,到胶片电影,再到多张静态图合成 gif,
这些都离不开一个术语叫

也就是我们需要绘制每一帧,然后控制一下帧与帧之间的时间间隔。

然而相邻两帧之间的变化并不大,重复绘制浪费体力,
幸亏计算机代码可以复制粘贴,然后修改一下变动的地方就可以了。

等等,好像哪里不对。

计算机代码除了可以复制粘贴,还有抽象能力。
我们可以把需要复制粘贴的代码交给计算机来重复执行。
把需要变动的地方,交给计算机来运算。

而网页中具备运算能力的只有 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>

单纯的微信公众号文章编辑器很难满足大家对酷炫排版的需求,因此冒出了一些第三方图文排版的工具。工具很多,特效也不少,但是背后的原理却大同小异,掌握了原理,你就可以抛开这些工具进行定制化了。

在这篇文件章中我们找到了一系列对开发者有用的CSS库,它们能帮助开发者在一定的期限内取得有创造性和创新性的成果。我们希望这个列表能有助于您的开发并为您提供方便。尽情享受吧!

开始

网页动画可以通过以下几种方式实现(gif、flash 除外),

作者知识面有限,如有遗漏,请留言通知我。
相关讨论,回复内容+关键字#网页动画实现方式#

  • css3 动画
  • SVG 动画
  • JS 动画(包括 css、SVG 的属性修改实现的动画)

作者认为 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

滤镜

一些说明以及"抄袭"的方法

  1. Kite

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更多的用于单个图标的组合

  • 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>
    

和所有网页排版一样,公众号排版的原理也是基于HTML和CSS的知识,关于基本的文字排版如加粗、行间距、字体颜色、字体大小、斜体、下划线、背景色等,由于是可以通过公众号的编辑器直接来实现,这里就不再多做介绍,只介绍编辑器实现不了的排版特效的方法。

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 类标签,大概是性能考虑,人工简单区分一下数值、颜色、变换,可以为计算机省去大量的无用运算。

作者在这里也没办法讲的更详细,估计你也没看太明白
建议阅读:

4、svg最佳实践

在工作中svg使用最多的场景还是当小图标使用,替换诸如纯图片、iconfont图标等方案。使用内联svg的优势在于:1、少发一次http请求;2、放大不会变形;3、易于用JS控制,比iconfont更灵活。

最佳做法(SVG sprite):

  • 1、将所有需要用到的小图标统一定义在svg下,该svg要设置display:none,每个小图标用symbol包围,每个symbol取一个id,方便后续调用;
  • 2、使用svg+use的方式调用,use中用属性xlink:href='#id'来引用相应图标,可以给每个svg取一个类名,方便css和js动态控制;
  • 3、通过getElementById的方式获取需要改变属性的use元素,为其动态添加或删除相应的类名;
  • 4、添加的类名最终是运用在symbol上,symbol中定义的图标(path)会覆盖类名中对应的属性,所以不要忘了设置symbol中元素的属性继承自symbol,就像
    上例中:svg path { fill: inherit; };
  • 5、要想实现更为复杂的效果,如渐变等,可以使用defs;
  • 6、要想做动画效果,可以在css类名中控制opacity、transform、stroke-dasharray和stroke-dashoffset属性。

公众号文章里面无论多么酷炫多么复杂的排版特效,我们都可以直接通过复制并粘贴到公众号编辑器里面的方式来抄袭它,不过使用这种方式,只能够基于原来的样式在上面修改一下文字。大家也还可以使用浏览器自带的开发者工具来查看排版特效,这些特效用代码是怎么做到的在开发者工具面前都一览无余,所以说排版特效对开发者工具来说没有什么秘密可言,不仅如此,你也还可以使用开发者工具基于该样式来修改样式本身,相信参加过HackWeek网页开发活动的朋友都比较熟悉这种方式。

JS 还有啥用

通过声明属性,调用浏览器来实现的方式,毕竟有限,JS 可以为我们提供无限可能。

通过对比 CSS3 和 SVG 我们也能看出来,要实现的东西越多,我们需要区分、记忆的属性也越多。
一个复杂动画使用声明属性的方式有可能并没有通过编写逻辑来得更爽。看,SVG.js。

在这里倒是想到了 Grunt 和 Gulp 之争
相关讨论,请回复+关键字#不要给我太多配置项#

css3 属性中声明的补间效果实在有限,SVG 的 calcMode,keyTimes,keySplines 又略显复杂,
于是 github 上出现了一大批补间效果仓库,更有强大者弥补了 CSS3 与 SVG 动画上各个方面的不足。

5、SVG动画

金沙棋牌官方平台 10

Kite是一个灵活的布局助手CSS库。Kite使用`inline-block`而不是最新的CSS语法。它注重实际,易于理解且容易使用。Kite用法与flexbox相似:justify-content,等等。你可以很轻松地创建复杂的模块。Kite是基于OOCSS 与 MindBEMding,它可以帮助您快速构建自己的组件。Kite支持几乎所有浏览器,它属于MIT许可。

  • 简单小巧,使用简单
  • 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属性的值:

金沙棋牌官方平台 11

实例:

<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空白逐渐变得没有空白

通常排版特效所对应的代码都是在section标签里面。公众号的编辑器有很多标签是不兼容的,比如a标签,这个涉及到公众号的权限问题,只有认证的微信服务号才支持a标签,比如大家用的最多的div标签,公众号的编辑器也不支持,所以要是把样式写在section标签里面。

  1. DynCSS

无论你定义多少补间效果,都满足不了所有人的需求,这里有个 path 路径补间函数生成器。
var myFunc = mojs.easing.path(path),输入一个 SVG path,myFunc() 就是你自己的补间函数。

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

以上动画方式总是需要借助css来实现,其实svg专门有做动画的元素
先看移动端兼容性:

金沙棋牌官方平台 12

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>

利用CSS的基本属性

  • 太屌,不进行反面评论
  • 最喜欢它的链式操作
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.2中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()

CSS有很多属性是用可视化的编辑器实现不了的,比如圆角、虚线、边框、渐变色、透明度、阴影等等,这些虽然是css经常会使用到的基本属性,但是稍加组合运用,就能做出普通人觉得很高大上的样式来。比如:

  • 一个和 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/

特效案例

DynCSS 将您的CSS解析成-dyn-(attribute)规则。这些规则是模拟浏览器事件(如滚动和缩放)的javascript表达式。其结果会应用到上面指出的CSS属性。你可以将任何CSS属性设置为动态--前提是它对于jQuery的css()方法是可写的。你可以通过附加-dyn-前缀并指定一个引用的javascript表达式来实现。

鸣谢

  • 1 赞 5 收藏 1 评论

金沙棋牌官方平台 13

特效解读:这样的特效,就是使用了css的border的诸多属性。左侧的黄色部分是使用border的border-left-color、border-width、border-radius,而右侧则是box-shadow。

  1. Progressjs

特效案例

特效解读:这个特效呢,则是使用了背景的渐变色linear-gradient以及border的dashed虚线样式还有就是圆角border-radius。

上述这些都是非常基本的css知识,只要稍加了解即可掌握,这些对从来没有接触过技术的微信运营人员来说,只需要一周的时间就能游刃有余。

ProgressJs 是一个 JavaScript 和CSS3库,可以帮助开发者创建和管理页面上所有元素的进度。你可以设计自己的进度条模板并且可以轻松自定义它。你也可以用ProgressJs 来为用户显示内容加载(图片,视频等)的进度。它可以用在textbox,textarea 甚至整个body上。

利用CSS绘制的图形

  1. Hover.CSS

公众号排版的很多简单图形是使用CSS的属性来绘制的,长方形、正方形、圆形这些都比如容易,用CSS还可以绘制三角形、梯形、平行四边形等其他图形,也可以将css绘制的简单图形自由组合起来甚至可以绘制出icon小图标。使用css的内联式写法,将css代码写在html的section标签里面,这样就可以复制粘贴到公众号的编辑器里面了。

用CSS绘制的图形我们可以通过多个section嵌套把这些图形给组合起来,这样就能绘制更加复杂的样式应用到排版之中。

特效案例

Hover.CSS 是一个有用的CSS3悬停效果集合,可用于动作调用,按钮,商标,特性图片等。 自定或直接应用到你自己的元素上都非常的简单。 hover.css可以用多种方式来使用; 可以复制粘贴你喜欢的效果到你自己的样式表里,也可以引用样式表。然后只需向你想要的元素需添加对应效果的class名称即可。如果你只打算使用一个或几个效果,最佳实践是复制粘贴一个效果。

特效解读:上面的标题特效主要是应用了CSS盒子模型相关知识,首先是给整个特效设置display:inline-block; 让整个特效拥有了block元素可以设置width和height以及inline元素不换行的特性;4个角对应着四个section标签,比如左上角只定义border-top和border-left为:2px solid rgb(252, 180, 43);这样就画出了一个拐角,再用float来指定标签的位置;而中间的长方形则让margin-top和margin-bottom的值为负数,让样式更加紧凑;而关于边框和背景的颜色,了解css的改起来就很容易啦~~

  1. Spinkit

CSS的图片背景

使用CSS的图片背景background-image的属性能够让公众号的排版极富创意,所能发挥的空间非常大,因为不同的背景图片素材就能让排版个性化起来,而图片素材所对应的设计思路每个人都有自己独到的理解,而且获取图片素材对很多人来说是非常容易的。

把图片作为背景和插入图片是有很大的不同的,插入图片除非是用ps,否则你没法在上面写字,而且背景图片不支持长按,是不是更酷?

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:微信公众号排版背后的技术解析,使用方式总结

关键词: