公众号SVG动画效果这样做超简单！

在微信公众号文章中经常使用的微信公众号动画效果是怎么制作的？使用SVG编辑器就能搞定了！

什么是微信公众号黑科技动画排版？

黑科技动画排版是什么？为什么这么多的官号和品牌都在用？

黑科技排版是一种交互式的图文排版，读者通过触发热区，就能让微信公众号文章实现滑动、点击、展开、隐藏等等的效果，可以让文章和读者产生一定的互动，内容展示形式新奇，传播效果好，阅读量自然也就变高了。

微信公众号SVG动画排版教程

这样的SVG黑科技排版可以在135编辑器推出的SVG编辑器中进行制作，来看看下面的排版 *** 作教程吧。

在135编辑器中，点击左侧功能区的【SVG编辑器】，打开SVG编辑器界面

首先在左侧的素材栏搜索或筛选一个你想要的效果，点击将这个效果放入中间的编辑区

在右侧为该效果上传所需的图片、链接或视音频素材，一个SVG动画效果就做好了

预览一下动画效果无误后，使用授权同步功能，将SVG文章同步到公众号就可以进行发布了

或者使用导出功能，将SVG动态图文保存到微信公众号平台

大家都学会了吗？SVG编辑器还有更多大牌同款的经典SVG图文素材，赶快上手，开启你的黑科技排版吧！

-  END  -

创建icons/svg文件夹

将svg文件放在该文件夹下面

在components文件夹中创建svgiconfont.vue文件

文件内容：

[removed]

import '@/icons'

export default {

name: 'svg-icon',

props: {

iconClass: {

type: String,

required: true

},

className: {

type: String

}

},

computed: {

iconName() {

return `#icon-${this.iconClass}`

},

svgClass() {

if (this.className) {

console.log('svg-icon ' + this.className)

return 'svg-icon ' + this.className

} else {

return 'svg-icon'

}

}

},

mounted: function() {

}

}

[removed]

style

.svg-icon {

width: 1em

height: 1em

vertical-align: -0.15em

fill: currentColor

overflow: hidden

}

创建index.js文件

文件内容如下：

import Vue from 'vue'

import svgiconfont from '@/components/svgiconfont'// svg组件

/*

require.context有三个参数：

directory：说明需要检索的目录

useSubdirectories：是否检索子目录

regExp: 匹配文件的正则表达式

*/

// 全局注册

Vue.component('svg-icon', svgiconfont)

const requireAll = requireContext =>requireContext.keys().map(requireContext)

const req = require.context('./svg', false, /\.svg$/)

requireAll(req)

在main.js引入icons文件夹下

即添加import ‘@/icons’

修改webpack.base.conf.js

添加代码：

{

test: /\.svg$/,

loader: "svg-sprite-loader",

include: [resolve("src/icons")],

options: {

symbolId: "icon-[name]"

}

},

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

exclude: [resolve("src/icons")],

options: {

limit: 50000,

name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

}

使用方法

在页面中添加

---