1. 可变字体

上图中的两个动画,一个文字直接变粗,一个渐渐变粗,我觉得后者会更有趣。但普通的字体可达不到这种效果,例如微软雅黑,无论怎么调整它的 FontWeight,实际上它也只有三种粗细:

这时候我们需要可变字体,可变字体(Variable fonts)是OpenType字体规范上的演进,它允许将同一字体的多个变体统合进单独的字体文件中。从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。你只需通过CSS与一行@font-face引用,即可获取包含在这个单一文件中的各种字体变体。具体来说请参考这篇文档:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

简单来说,可变字体是可以实现随意改变字重,满足我需求的方案。而要实现随意改变中文文字的字重,思源黑体 是其中一个不错的选择:

2. 假装可变字体

可是我不知道怎么在 WPF 里用可变字体,而且为了一个小小按钮的小小动画,居然要添加一个几十兆大小的字体,这性价比实在低,低到不能接受。其实我最初的目标只是让文字慢慢变粗,不一定需要让文字变成粗体,用我上一篇文章提到的 实现文字描边 也可以做到。文字描边的基本原理是使用 FormattedTextBuildGeometry 拿到 Geometry,然后通过 Shape 画出来,最后通过 Stroke, StrokeThickness 控制文字边框的颜色和粗细。核心代码如下:

var formattedText = new FormattedText(
Text,
CultureInfo.CurrentCulture,
FlowDirection.LeftToRight,
new Typeface(FontFamily, FontStyle, FontWeight, FontStretch), FontSize, Brushes.Black, 100); _height = formattedText.Height;
_width = formattedText.Width;
_textGeometry = formattedText.BuildGeometry(new Point());

如果加大 StrokeThickness 可以让文字的边框变得很粗,效果如下:

如果将文字的文字和边框设置为同一个颜色呢?改变 StrokeThickness 看起来就像改变 FontWeight,这就实现了我想要的效果:

当然,用这种方式假装的可变字体的字形和原本的字形会有差别,但用在局部的动画没什么大的问题。如果用得好,可以做不少有趣的 UI ,例如这样:

从上面的想法延申一下,反过来从粗变细,可以玩另一种动画。如果找一个超细的字体,例如这个:

将它的 StrokeThickness 由一个很大的值渐变成 0,可以做到下面这种动画:

3. 最后

这篇文章其实没介绍什么代码技巧,只是从上一篇文章 实现文字描边 延申出来的玩法。更多关于 WPF 的设计和动画技巧,可以参考我这个项目:

https://github.com/DinoChan/wpf_design_and_animation_lab

[WPF] 假装可变字体的更多相关文章

  1. WPF设置全局字体和字体嵌入

    原文:WPF设置全局字体和字体嵌入 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/CLeopard/article/details/40590373 ...

  2. WPF使用矢量字体图标(阿里巴巴iconfont)

    原文:WPF使用矢量字体图标(阿里巴巴iconfont) 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78 ...

  3. Wpf 获取指定字体和大小的字符的长宽

    Wpf 获取指定字体和大小的字符的长宽 运行环境:Win10 x64, NetFrameWork 4.8, 作者:乌龙哈里,日期:2019-05-09 参考: 章节: 比如一个 Consolas 字体 ...

  4. 突破限制,CSS font-variation 可变字体的魅力

    今天,在 CodePen 上看到一个很有意思的效果 -- GSAP 3 ETC Variable Font Wave,借助了 JS 动画库 GSAP 实现,一起来看看: 我寻思着能否使用 CSS 复刻 ...

  5. 在WPF中使用字体图标

    一.源码描述    这是一款基于WPF窗体应用程序的字体图标示例源码,    该源码简单易懂使用于初学者和实战项目应用,    感兴趣的朋友们可以下载看看哦. 二.功能介绍    1.用ICO字体代替 ...

  6. WPF解析Fnt字体

    偶遇需要再 WPF中加载Fnt字体,此做... using System; using System.Collections.Generic; using System.Drawing; using ...

  7. WPF中应用字体图标

    一.什么是字体图标 我们在进行GDI(图形界面)编程的过程中图标是不可少的.近些年随着网络的繁荣和移动应用的繁荣,矢量图的应用越来越火. 矢量图是一种用数学方法描述的.由一系列点和线组成的图,因此相比 ...

  8. 【WPF】添加自定义字体

    需求:在WPF项目中使用幼圆字体. 步骤: 1.首先要有幼圆TTF字体文件.在C:\Windows\Fonts目录下找,如果系统字体库中没有,就上网下一份,如这里或这里. 2.将字体文件复制到WPF项 ...

  9. 为WPF程序添加字体

    很多时候我们开发的程序可能会在多个版本的Windows上运行,比如XP.Win7.Win8. 为了程序美观,现在很多公司会使用WPF作为程序的界面设计. 跨版本的操作的操作系统往往有一些字体上的问题, ...

随机推荐

  1. Solution -「NOI 2020」「洛谷 P6776」超现实树

    \(\mathcal{Description}\)   Link.   对于非空二叉树 \(T\),定义 \(\operatorname{grow}(T)\) 为所有能通过若干次"替换 \( ...

  2. .Net Core Aop之IActionFilter

    一.简介 在.net core 中Filter分为以下六大类: 1.AuthorizeAttribute(权限验证) 2.IResourceFilter(资源缓存) 3.IActionFilter(执 ...

  3. zabbix监控多个nginx vhost网站状态码

    需求 假设一台服务器运行了N个vhost网站,如何确定在大流量并发时候找到是哪个网站的问题呢? 这似乎是每个运维都会遇到的问题,方法有很多比如:1.看nginx日志大小确定访问量.2.通过前端代理确定 ...

  4. docker安装、基本使用、实战(测试必备)

    Docker概念.作用.术语 一张超级形象的图 看到这张图,大家会想到什么? 可以这么理解:大海是操作系统,鲸鱼是Docker,集装箱是在Docker 运行的容器! 概念 百度百科:Docker 是一 ...

  5. [旧][Android] Retrofit 源码分析之 ServiceMethod 对象

    备注 原发表于2016.05.03,资料已过时,仅作备份,谨慎参考 前言 大家好,我又来学习 Retrofit 了,可能这是最后一篇关于 Retrofit 框架的文章了.我发现源码分析这回事,当时看明 ...

  6. 三大流行BI分析平台推荐,企业数据化选择工具

    进入大数据时代以来,对于企业来说,海量的数据不仅是财富,也是负担.无论是大型企业还是小型企业,都面临着同样的挑战--如何利用大数据客户体验,有效达到优化生产力的效果.这也是近年来许多企业选择搭建现代大 ...

  7. 拒绝踩雷!全能的BI软件非它莫属

    BI工具现在是越来越火了,很多公司都会利用这些工具,提高工作效率.但是目前市面上的BI产品真的是越来越多,稍有不慎就会踩雷,那么我们应该要怎么选择这些BI工具呢?今天我为大家选了3款国内外口碑不错的B ...

  8. 关于JS继承

    关于JS继承 关于继承这个概念,是由面向对象衍生出来的.而JS身为一种基于面向对象而设计的语言,它和正统的面向对象语言又是有差别的. 面向对象语言 身为面向对象语言需要对开发者提供四种能力: ①:封装 ...

  9. Spark学习笔记(详细)

    Spark Core 第1章 Spark 概述 Spark是一种基于内存的快速.通用.可扩展的大数据分析计算引擎 Spark和Hadoop 的根本差异是多个作业之间的数据通信问题: Spark多个作业 ...

  10. 走进第四范式:决策类AI企业的生存之道

    根据不同的应用领域,人工智能行业可以分为视觉类人工智能.语音及语义类人工智能和决策类人工智能. 通常,我们接触的都是视觉类.语音类的人工智能,它们主要用来帮助人类执行具体任务,例如人脸识别,语音控制等 ...