什么是微信公众号黑科技动画排版？
黑科技动画排版是什么？为什么这么多的官号和品牌都在用？
黑科技排版是一种交互式的图文排版，读者通过触发热区，就能让微信公众号文章实现滑动、点击、展开、隐藏等等的效果，可以让文章和读者产生一定的互动，内容展示形式新奇，传播效果好，阅读量自然也就变高了。
微信公众号SVG动画排版教程
这样的SVG黑科技排版可以在135编辑器推出的SVG编辑器中进行制作，来看看下面的排版 *** 作教程吧。
在135编辑器中，点击左侧功能区的【SVG编辑器】，打开SVG编辑器界面
首先在左侧的素材栏搜索或筛选一个你想要的效果，点击将这个效果放入中间的编辑区
在右侧为该效果上传所需的图片、链接或视音频素材，一个SVG动画效果就做好了
预览一下动画效果无误后，使用授权同步功能，将SVG文章同步到公众号就可以进行发布了
或者使用导出功能，将SVG动态图文保存到微信公众号平台
大家都学会了吗？SVG编辑器还有更多大牌同款的经典SVG图文素材，赶快上手，开启你的黑科技排版吧！
- END -
本文主要是讲解关于 SVG 的一些高级动画特效，比如 SVG 动画标签，图形渐变，路径动画，线条动画，SVG 裁剪等。例如：路径动画
图形渐变：
线条动画：
以及，相关的动画的矩阵知识，这个也是现在 CSS 动画里面最重要，同时也是最为欠缺的知识点：
文章会先从基本语法入手，然后，慢慢深入。介绍一些动画基本原理和对应的数学原理知识点。并且文章后面，还附有相关语法的介绍，当你在遇到不熟悉语法的时候可以参考参考。
前面一篇文章，主要介绍了一些 SVG 的基本概念和基本图形。接下来我们需要了解一下，SVG 处理矢量这个特性之外，还有啥内容吸引我们，能让 SVG 现在普及度这么高？
完整版可以关于我的公众号：前端小吉米。
SVG Animation
在 SVG 中，如果我们想实现一个动画效果，可以使用 CSS，JS，或者直接使用 SVG 中自带的 animate 元素添加动画。
使用 CSS 的话，有两种选择一种是通过 style 直接内联在里面，另外是直接使用相关的动画属性-- transform。
<use id="star" class="starStyle" xlink:href="#starDef"
transform="translate(100, 100)"
style="fill: #008000stroke: #008000"/>
而使用 SVG 中自定的 animate 主要还是 SVG 自己的东西，比较好用。如果想用 CSS 的动画，这都无所谓。
先看一个 SVG animate DEMO:
<rect x="10" y="10" width="200" height="20" stroke="black" fill="none">
<animate
attributeName="width"
attributeType="XML"
from="200" to="20"
begin="0s" dur="5s"
fill="freeze" /></rect>
通过将 animate 标签嵌套在指定的图形里面，即可实现变换的效果。另外，还有 animateTransform，它主要是用来做变形动画的。
<rect x="-10" y="-10" width="20" height="20"
style="fill: #ff9stroke: black">
<animateTransform attributeType="XML"
attributeName="transform" type="scale"
from="1" to="4 2"
begin="0s" dur="4s" fill="freeze"/></rect>
简单来说：
animate: 相当于 CSS 中的 transition
animateTransform: 相当于 CSS 中的 transform
里面一些技术细节我们这里就不过多讲解了。这里，主要想介绍一下 animate 中的 morph 的效果。
animate morph
该效果主要做的就是图形内部的渐变。如图：
这种动画是怎么实现呢？
直接看代码吧：
<path fill="#1EB287">
<animate
attributeName="d"
dur="1440ms"
repeatCount="indefinite"
keyTimes="0
.0625
.208333333
.3125
.395833333
.645833333
.833333333
1"
calcMode="spline"
keySplines="0,0,1,1
.42,0,.58,1
.42,0,1,1
0,0,.58,1
.42,0,.58,1
.42,0,.58,1
.42,0,.58,1"
values="M 0,0
C 50,0 50,0 100,0
100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
Z
M 0,0
C 50,0 50,0 100,0
100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
Z
M 50,0
C 75,25 75,25 100,50
75,75 75,75 50,100
25,75 25,75 0,50
25,25 25,25 50,0
Z
M 25,50
C 37.5,25 37.5,25 50,0
75,50 75,50 100,100
50,100 50,100 0,100
12.5,75 12.5,75 25,50
Z
M 25,50
C 37.5,25 37.5,25 50,0
75,50 75,50 100,100
50,100 50,100 0,100
12.5,75 12.5,75 25,50
Z
M 50,0
C 77.6,0 100,22.4 100,50
100,77.6 77.6,100 50,100
22.4,100, 0,77.6, 0,50
0,22.4, 22.4,0, 50,0
Z
M 50,0
C 77.6,0 100,22.4 100,50
100,77.6 77.6,100 50,100
22.4,100, 0,77.6, 0,50
0,22.4, 22.4,0, 50,0
Z
M 100,0
C 100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
50,0 50,0 100,0
Z"/>
</path>
这么多，是不是感觉有点懵逼。不过，我们细分来看一下其实很简单。里面主要是利用 animate 中的 keyTimes，calcMode，keySplines，以及 values 这几个属性。不急，我们一个一个来解释一下。
1）.首先画一条素描线，version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox = "0 0 200 100">
fill="none"
stroke = "#AAA"
stroke-width = "2"
d = "M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215"/>
素描线的参数可以使用工具生成
2）.SVG实现素描的动画及原理
stroke-dasharray = "100 10" stroke-dashoffset = "0"
stroke-dasharray定义了生成线段长度，及其线段和线段之间的缝隙，这里包含两个参数
stroke-dashoffset定义了从那个位置开始渲染生成线段
3）.使用CSS3来实现素描动画效果
/*定义keyframe动画*/
/* 添加动画到path元素 */
.path{
stroke-dasharray: 265.07
stroke-dashoffset: 265.07
animation: dash 3s linear infinite
/* 支持chrome */
-webkit-animation: dash 3s linear infinite
}
@keyframes dash{
from{
stroke-dashoffset: 265.07/* 这里是svg图形中素描线长度，可以使用js获取 */
}
to{
stroke-dashoffset: 0
}
}
/* 支持chrome浏览器 */
@-webkit-keyframes dash{
from{
stroke-dashoffset: 265.07/* 这里是svg图形中素描线长度，可以使用js获取 */
}
to{
stroke-dashoffset: 0
}
}
4）.使用Javascript来调节动画效果的参数
/*定义相关Javascript*/
var current_frame, //定义当前帧
total_frames, //定义全部帧数
path, //定义svg中的唯一path元素
length, //定义path所生成的素描长度
handle//定义javascript动画句柄
path = document.getElementById('path'),
length = path.getTotalLength()
//定义初始化方法
var init = function(){
current_frame = 0
total_frames = 160
path.style.strokeDasharray = length + ' ' + length//定义dasharray
path.style.strokeDashoffset = length//定义dashoffset
handle = 0
}
//定义实际的动画绘制方法
var draw = function(){
var progress = current_frame/total_frames
if(progress>1){ //这里定义完成动画
window.cancelAnimationFrame(handle)
}else{//否则使用reqeuestAnimationFrame来生成动画
current_frame++
path.style.strokeDashoffset = Math.floor(length*(1 - progress))
handle = window.requestAnimationFrame(draw)
}
}
//定义一个重新运行方法
var rerun = function(){
init()
draw()
}
//页面加载即运行
rerun()
这里主要定义初始化方法和动画绘制的方法，window.requestAnimationFrame(draw)来生成动画。
2）.SVG实现素描的动画及原理
stroke-dasharray = "100 10" stroke-dashoffset = "0"
stroke-dasharray定义了生成线段长度，及其线段和线段之间的缝隙，这里包含两个参数
stroke-dashoffset定义了从那个位置开始渲染生成线段
2.SVG简介
可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。
3.SVG的特点
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG图像可通过文本编辑器来创建和修改
SVG图像可被搜索、索引、脚本化或压缩
SVG是可伸缩的SVG图像可在任何的分辨率下被高质量地打印
SVG可在图像质量不下降的情况下被放大
34浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome以及 Safari支持内联SVG。Internet Explorer 8或更早版本，可通过安装Adobe SVG Viewer以支持SVG。
4 SVG标签
SVG代码以元素开始，包括开启标签和关闭标签。这是根元素。width和height属性可设置此SVG文档的宽度和高度。version属性可定义所使用的SVG版本，xmlns属性可定义SVG命名空间。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）