LeonSans动态字体 微信小程序组件

Leon Sans是由Jongmin Kim在2019年开发的一款动态字体，这款字体有许多有趣酷炫的效果。我将其封装成了微信小程序组件，方便大家使用~

目前封装了四种字体，GitHub 项目地址 https://github.com/starkZH/LeonSans-WxAppComponent

体验

可扫码以下小程序码体验

快速上手

1. 下载components和utils，然后复制至你的项目的根目录下
2. 在页面配置的json文件中引入自定义组件，如下：

{
  "usingComponents": {
    "font-colorful": "/components/font-colorful/index",
    "font-wave": "/components/font-wave/index",
    "font-gradient": "/components/font-gradient/index",
    "font-pattern": "/components/font-pattern/index",
    "font-color-pattern": "/components/font-color-pattern/index"
  },
}

3. 在wxml中使用（若要在一个页面使用多个字体，需为每个字体指定唯一标识key）

<font-colorful key='colorful' text="Hello" size='30' weight='200' />
<font-wave key='wave' text="Hello" amplitude="0.3" size='30' weight='200' />

属性列表

公共属性

名称	类型	说明	默认值
i-class	string	自定义样式	-
text	string	显示的文本	-
weight	number	字体的粗细	200
size	number	字体的尺寸	50
color	Array	每个字符的颜色	[’#c5d73f’, ‘#9d529c’, ‘#49a9db’, ‘#fec330’, ‘#5eb96e’, ‘#fc5356’, ‘#f38f31’]
tracking	number	字符之间的空格数	0
leading	number	每一行文本的间隔	0
align	number	文本的水平对齐方式（可选值：left,center,right）	left
animate	string	动画类型，可选值Power4(平缓),Bounce(弹跳),Elastic(弹簧),Expo(锐减)	Power4
animateIn	boolean	启用入场动画	true
animateOut	boolean	启用退场动画	true
loop	boolean	动画循环展示	false
key	string	字体的唯一key	leon-canvas
width	number	画布的宽度与屏幕宽度之比（0~1）	1
height	number	画布的高度与屏幕高度之比（0~1）	1

font-colorful属性（多彩缤纷字体）

名称	类型	说明	默认值
color	Array	提供字体效果的颜色数组	[’#c5d73f’, ‘#9d529c’, ‘#49a9db’, ‘#fec330’, ‘#5eb96e’, ‘#fc5356’, ‘#f38f31’]

font-gradient属性（颜色渐变字体）

名称	类型	说明	默认值
color	Array	二维数组，每个字符的渐变颜色列表作为一维数组	[[’#64d3ce’, ‘#2a92ce’],[’#e7c4c4’, ‘#aae898’, ‘#e1ea73’, ‘#ff8974’],[’#fd46aa’, ‘#8ad781’]]

font-wave属性（波浪字体）

名称	类型	说明	默认值
amplitude	number	波浪效果的振幅（0~1）	0.3
fps	number	波浪效果的FPS	30

font-pattern属性（图案字体）

名称	类型	说明	默认值
patternWidth	number	图案的宽度	40
patternHeight	number	图案的高度	10
pathGap	number	每个字符的笔画上的点之间的间隔（0~1）	0.2

事件

事件名	说明	返回值
bind:complete	当画布初始化完成后触发，返回canvas实例对象	-