如何在推文里让你的曲线动起来?(如何在推文里让你的曲线动起来呢)
ztj100 2025-03-20 21:17 9 浏览 0 评论
微信公众号里的动图
在前天推文“狗追鸭子[1]”留言中,有同学学问推文中的动图是如何制作的。
关于动图的制作方法,在公众号里大家输入 动图? 便可以查询到原来的说明。
推文中的动图是通过数据采集系统,包括可以读取数值的数字万用表、数字示波器、数字频谱仪以及特制的数据采集板卡等来采集。然后通过python语言绘制产生相应的动图。动图的风格包括以下两种:
(1)动态信号波形
仿照示波器显示波形的形式,将连续采集到的数据动态展示出来,反映了信号的变化特点。
动态信号波形图
(2)逐步增多数据曲线
将采集到的数据从少到多绘制成逐步压缩的曲线,可以展示数据发展的趋势规律。
动态数据曲线
绘制动图方法
以上两种方式主要是借助于两组命令分成两步形成GIF动图。
第一步 绘制曲线,存储图片
绘制曲线使用matplotlib中的plot命令完成。根据需要绘制的风格,可以选择按照一帧一帧地逐帧绘制,也可选择按照从少到多的绘制方式。
下面的代码片段显示了绘制一组频率变化的正弦曲线的图像,并将它们逐帧存储在指定目录中,文件名称从0.jpg,变化到49.jpg。这是制作动图的第一步。
import matplotlib.pyplot as pltomiga = linspace(1, 5, 50)t = linspace(0, 20, 200)count=0for o in omiga: sint = sin(t * o) plt.clf() plt.plot(t, sint, label='Sinusoidal Curve') plt.xlabel('Time (s)') plt.ylabel('Amplitude (V)') plt.grid(True) plt.savefig(r'd:\temp\%d.jgp'%count) count = count+1
根据matplotlib中的说明,存储图频的格式不包括BMP格式。可以生成JPG或者其他类型的图片。
生成频谱动态增加的曲线
第二步 生成动图文件
有了逐帧图片,现在有很多独立的程序,或者在线的网站可以提供转换成GIF片的功能。其中一个小巧但功能比较强的软件工具是:movgear.exe 软件。它不仅可以将一组单张图图频转换成GIF图片,也可以完成相应的编辑功能。
也存在很多python软件包可以帮助生成GIF图片,其中一个比较简便的就是是踹死PIL中的Image对象,在调用save()命令的时候生成GIF文件。在生成的同时可以指明每个图片显示的时间长度。
下面的代码片段显示了应用Image将输入的一组文件名称所对应的图频转换成GIF文件的过程。
下面是定义了一个PlotGIF类来帮助存储plt对象中的文件以及最后生成GIF图片。其中在初始化的时候指明一个临时的目录来存储PLOT存储的JPG文件。使用append()命令来添加每一次 plt 调用 savefig 所产生的文件。最后使用 save() 命令生成最终的 GIF 文件。
#------------------------------------------------------------# TSDRAW.PY#------------------------------------------------------------from tsmodule.tspdata import *from PIL import Image#------------------------------------------------------------class PlotGIF(object): def __init__(self, gifdir=r'd:\temp\GIF'): self.gifdir = gifdir self.imageDim = [] self.count = 0 if os.path.isdir(gifdir) == False: os.mkdir(gifdir) def infor(self, ): printf(self.gifdir, self.count) def __str__(self, ): return 'gifdir:%s'%self.dir def append(self, plt): filename = os.path.join(self.gifdir, '%04d.jpg'%self.count) self.count = self.count + 1 plt.savefig(filename) self.imageDim.append(Image.open(filename)) def save(self, giffile, period=100, last=100): duration = period[](self.imageDim "period") duration[-1] = last self.imageDim[0].save(giffile,\ save_all=True,\ append_images=self.imageDim[1:],\ duration=duration, loop=False) self.imageDim = [] self.count = 0 printf('Save GIF:%s'%giffile)
减少动图文件大小
如果是在微信公众号中使用GIF文件,它有两个限制,一个是文件的大小不超过5 MBytes。第二个限制是动图中包含的图片不超过300张。
如果文件的大小超过了5 M字节怎么办?
一方面可以在使用 plt 时,每张图片的大小尽量减小。另外一方面可以使用 movgear软件 对GIF文件进行差分存储。这种模式是将GIF图片中每相邻的两张图片相减,存储时将变化量按照游程无损编码方式完成压缩存储。如果动图相邻两张图片非常相似,这种差分之后的存储就非常有效果。对于不复杂的 plt的图片使用差分存储可以很轻松获得5倍以上的压缩效果。
movgear压缩GIF文件
相关推荐
- 使用 Pinia ORM 管理 Vue 中的状态
-
转载说明:原创不易,未经授权,谢绝任何形式的转载状态管理是构建任何Web应用程序的重要组成部分。虽然Vue提供了管理简单状态的技术,但随着应用程序复杂性的增加,处理状态可能变得更具挑战性。这就是为什么...
- Vue3开发企业级音乐Web App 明星讲师带你学习大厂高质量代码
-
Vue3开发企业级音乐WebApp明星讲师带你学习大厂高质量代码下栽课》jzit.top/392/...
- 一篇文章说清 webpack、vite、vue-cli、create-vue 的区别
-
webpack、vite、vue-cli、create-vue这些都是什么?看着有点晕,不要怕,我们一起来分辨一下。...
- 超赞 vue2/3 可视化打印设计VuePluginPrint
-
今天来给大家推荐一款非常不错的Vue可拖拽打印设计器Hiprint。引入使用//main.js中引入安装import{hiPrintPlugin}from'vue-plugin-...
- 搭建Trae+Vue3的AI开发环境(vue3 ts开发)
-
从2024年2025年,不断的有各种AI工具会在自媒体中火起来,号称各种效率王炸,而在AI是否会替代打工人的话题中,程序员又首当其冲。...
- Vue中mixin怎么理解?(vue的mixins有什么用)
-
作者:qdmryt转发链接:https://mp.weixin.qq.com/s/JHF3oIGSTnRegpvE6GSZhg前言...
- Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署
-
1.创建Vue脚手架#1.在本地文件目录创建my-first-vue文件夹,安装vue-cli脚手架:npminstall-gvue-cli安装过程如下图所示:创建my-first-vue...
- 新手如何搭建个人网站(小白如何搭建个人网站)
-
ElementUl是饿了么前端团队推出的桌面端UI框架,具有是简洁、直观、强悍和低学习成本等优势,非常适合初学者使用。因此,本次项目使用ElementUI框架来完成个人博客的主体开发,欢迎大家讨论...
- 零基础入门vue开发(vue快速入门与实战开发)
-
上面一节我们已经成功的安装了nodejs,并且配置了npm的全局环境变量,那么这一节我们就来正式的安装vue-cli,然后在webstorm开发者工具里运行我们的vue项目。这一节有两种创建vue项目...
- .net core集成vue(.net core集成vue3)
-
react、angular、vue你更熟悉哪个?下边这个是vue的。要求需要你的计算机安装有o.netcore2.0以上版本onode、webpack、vue-cli、vue(npm...
- 使用 Vue 脚手架,为什么要学 webpack?(一)
-
先问大家一个很简单的问题:vueinitwebpackprjectName与vuecreateprojectName有什么区别呢?它们是Vue-cli2和Vue-cli3创建...
- vue 构建和部署(vue项目部署服务器)
-
普通的搭建方式(安装指令)安装Node.js检查node是否已安装,终端输入node-v会使用命令行(安装)npminstallvue-cli-首先安装vue-clivueinitwe...
- Vue.js 环境配置(vue的环境搭建)
-
说明:node.js和vue.js的关系:Node.js是一个基于ChromeV8引擎的JavaScript运行时环境;类比:Java的jvm(虚拟机)...
- vue项目完整搭建步骤(vuecli项目搭建)
-
简介为了让一些不太清楚搭建前端项目的小白,更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架,那vue作为三大框架主流之一,在工作中很常用。所以就以vue为例。...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- 使用 Pinia ORM 管理 Vue 中的状态
- Vue3开发企业级音乐Web App 明星讲师带你学习大厂高质量代码
- 一篇文章说清 webpack、vite、vue-cli、create-vue 的区别
- 超赞 vue2/3 可视化打印设计VuePluginPrint
- 搭建Trae+Vue3的AI开发环境(vue3 ts开发)
- 如何在现有的Vue项目中嵌入 Blazor项目?
- Vue中mixin怎么理解?(vue的mixins有什么用)
- Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署
- 新手如何搭建个人网站(小白如何搭建个人网站)
- 零基础入门vue开发(vue快速入门与实战开发)
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- node卸载 (33)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- exceptionininitializererror (33)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)