笔者开源了一个Web思维导图，在做导出为图片的功能时走了挺多弯路，所以通过本文来记录一下。
但总有一些实际应用场景，需要的不仅仅是将现有内容导出，还需要我们对一些内容的格式进行转化。
从事前端的朋友应该对“字体图标”这个词汇不陌生，为了适应越来越挑剔的屏幕，网页图标和简单图案使用 .png 来搭建已经基本上被淘汰了。取而代之的是使用 css3 和 svg 来绘制，而对于网页小图标，
1、js配合传统css属性控制，可以使用setTimeout或者高级的requestAnimationFrame
本文主要探讨JPG/PNG转SVG矢量格式并支持FILL的方法，介绍在线转换网站和通过illustator转换的经验。
企鹅辅导是一款处于快速上升期的产品，目前在快速迭代中。作为一款K12青少年教育产品软件，动画对于吸引其用户注意力和提高用户体验有着重要的作用。特别是在目前开放了小学教育内容之后，动画能力的丰富和完善更是迫在眉睫。
这次大会于 2016 年 12 月 17 日在广州的天虹酒店举办。演讲嘉宾有大漠，勾三股四等一些业界大牛们。特邀嘉宾有 Andrey Sitnik（PostCSS 的作者）和 Hax（贺师俊）。
资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。
在上一篇文章中，我们初步实现了一些利用基本图形就能完成的线条动画： 【Web动画】SVG 线条动画入门 当然，事物都是朝着熵增焓减的方向发展的，复杂线条也肯定比有序线条要多。 很多时候，我们无法人工去
我正在测试一个应用程序，它是一个基于 Web 的分析解决方案，它与世界各地的研究机构打交道，以分析新出现的研究趋势并创建报告。
这个题目有点小，本篇博客真正谈论的应该是服务端生成图表的简单方案，这里面有两个关键字：服务端 & 简单，我们知道基于js有很多的图表库，知名的如D3、echarts 、highcharts等等，对于做数据可视化方向的同学可能自己都做过此类chart的研发，无论从零构建还是使用已有的轮子，基本上都是基于js在做，因为大部分数据可视化产品都是to B的产品。
github 地址：https://github.com/airbnb/lot...
Varlet提供了一些常用的图标，图标都来自 Material Design Icon。
新建src/assets/lottie/文件夹，并将bodymovin_light.min.js文件和设计师给的动画json文件统一放到src/assets/lottie/文件夹中。
思维导图是一种常见的表达发散性思维的有效工具，市面上有非常多的工具可以用来画思维导图，有免费的也有收费的，此外也有一些可以用来帮助快速实现的JavaScript类库，如：jsMind、KityMinder。
本文将从各个角度来对动画整个体系进行分类，并且介绍各种前端动画的实现方法，最后我们将总结在实际开发中的各个场景的动画选择方案。
可以通过上述的一般用法在 Vue 中直接使用 svg，但既然已经是用 Vue来组件化开发项目了，那么在组件中穿插着一大段的 svg 也显得过于杂乱；
照着GIF图/效果视频去模仿，猜测动画时长，手动创建贝塞尔曲线……反复调整参数，一遍遍目测效果，最后发现：
D3，即“Data Driven Documents”（数据驱动文档）的缩写，是由才华横溢的Mike Bostock编写的一个JavaScript程序库。D3名副其实，能将数据绑定到Web文档，然后基于数据来操纵那些文档。酷吧，但是这又能做什么呢？
Markdown 的好处是专注码字的同时还能兼顾排版，不用像 word 那样文本加个粗都需要移动下鼠标，体验非常好。
可视化信息以易于阅读的视觉化内容正在被越来越多的人所青睐。可视化形式呈现信息的需求也随之增加，因此近年来涌现出了许多数据可视化工具。对于不熟悉数据可视化领域的人来说，最好的方法是尝试一些现成的解决方案来快速制作标准化的图表。对于拥有更多技术专长、经验丰富的用户，最好的办法是使用更灵活的库。 下面与大家分享九大数据可视化库，希望你可以找到最适合的一款。
前端动画一般在展示性网站、交互操作或者移动端活动页面使用比较多，可能对于大部分前端平时只会用 css 里的 transition 动画，其实前端动画还有很多实现方式，下面是常见的几种形式：
然后我就想可以拿进度条做点事情，一开始想搜一搜借鉴一下，但是根本没有这种高度自定义的。唉
lottie 是一个可以轻易的给各种 native app 添加高质量动画的类库。可以在 iOS、Android 和 React Native 实时渲染 After Effects 动画，就像使用静态图片一样容易。上图即为 lottie 的 logo。
神经网络（NN）架构图制作起来往往费时耗力，很多时候机器学习研究人员需要从头开始构建相关图。
官方文档：https://webpack.docschina.org/loaders/url-loader/
接下来介绍几款制作HTML5动画的工具，它们可以分为几类： 1、导出canvas动画： Flash CC(13.1)、Animation、Radi 2、导出DIV+CSS3动画： HTML5 Maker、Edge Animation、Tumult Hype、Nodefire 3、导出SVG动画： Hippo 基本上所有工具导出的动画都会依赖一个独立的js库，这个库用于解析数据，展示动画。而其中两个工具（Radi和Hippo）就比较突出，它们并不依赖独立js库，而是把必须的最精简的js直接内嵌到HTML中，这
你可以把这篇文章看做通往精通SVG动画之路的第一步，里面的链接资源也是很好的学习资料。所以赶紧收藏本文然后开始你的精通SVG之旅吧。
摘要 现在的营销活动，用一张简单的图片去吸引消费者已经远远不够，必须要有能给消费者带来视觉冲击的东西，或者在动画过程中提供更好的引导部分。手淘的前端团队经历了从Gif、视频到CSS Animation
上篇文章简单介绍了一下loader API,那么除了我们常用的css-loader,sass-loader,style-loader,url-loader,vue-loader之外，还有哪些loader呢，我们一起来梳理一下。
SVG 是用 Illustrator 画的，苹果是手绘的（虽然是画的丑了点 0.0）。
是的，这就是webpack慢的原因，由于webpack对于所有运行资源进行了提前编译处理，对依赖模块进行了语法分析转义，最终的结果就是模块被打包到内存中。
js2flowchart 是一个可视化库，可将任何JavaScript代码转换为漂亮的SVG流程图。你可以轻松地利用它学习其他代码、设计你的代码、重构代码、解释代码。这样一个强大的神器，真的值得你拥有，看下面截图就知道了，有没有很强大。
使用的时候，通过background-position调整显示的位置，如下图所示：
我们在使用webpack打包的时候经常因为引入ttf字体报错而烦恼,这里解决ttf字体报错的方法需要加入一个url-loader,没有的话需要npm先安装下:
paper.js 提供了两种编写方式，一种是纯粹的JavaScript编写，还有一种是使用官方提供的PaperScript。 区别就是在于，调用paper下的字对象是否需要加paper，以及向量的加减乘除。 下面看一下两种写法
一、前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充，而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性，因此当前仅Webkit内核的浏览器支持CSS3 Filter，而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了，而IE5.5~9则使用IE滤镜、JS+DIV或VML处理！本篇为先占个坑，以后慢慢填^_^！！！ CSS3 Filter
Airbnb出了移动端的动画库Lottie，可以和一个名叫Bodymovin的AE插件结合起来，把在AE上做好的动画导出为json文件，然后以Android/iOS原生动画的形式在移动设备上渲染播放。AE（Adobe After Effects）是视频后期特效和动画制作的行家，前段时间充斥视野的MG动画就是用它制作的。如果真的可以实现，就会大大方便前端动画的设计。
html2canvasopen in new window 用的比较广泛的前端截图方案，先将 DOM 一个个 转为 Canvas 然后导出图片（使用 canvas 自带的 toDataUrl、toBobl）即可。使用起来应该是兼容性比较好的方案了，能解决大部分的需求，但是也有一写小问题，如：
一般来说，品牌介绍页都是少不了各种动画的。这里我列出了辅导品牌页的三个主要的动画，后面我会讲我的实现
最近有工友问我前端怎么给图片做标注。使用 Fabric.js 或者 Konva.js 等库确实可以实现，但多少觉得有点大炮打蚊的感觉，好奇有没有专门做图片标注的工具呢？
全文共6511字/词，阅读大概需要13分钟，太长不看党请直接移步👉「开始优化」部分直接查看优化手段 背景 前段时间公司服务器网络波动，网站访问变慢，一些性能问题也随之暴露了出来。纷纷反馈在这样的弱网条件下，访问新项目时，加载了近1分钟都没加载出来，而访问其他页面顶多也就30-40s。 在网络恢复后，尝试访问了下页面，无缓存首次打开需要等待近11s的时间，最大的资源达到了3.7M... 在对项目做了一些优化处理后，再次无缓存打开可以发现网页几乎是秒开，平均耗时在1s以内 在这里总结记录一下，基本上都是一些
继上次的 Bpmn.js 进阶指南（万字长文） 之后，我相信大家对 Bpmn.js 的使用和自定义方法都有了一定的了解。但是因为有小伙伴反应文章太长，导致大家看完需要很长时间，正好配合 8月的更文活动，以后都在每篇文章中单独讲解一到三个小内容。
在项目开发中，我们可以通过创造有趣的动画来为我们的项目增加视觉感与用户体验，同时，也为我们的网站增添了独特的美感，而且还提高了用户参与度并创造了令人难忘的第一印象。
有点懒得把文章同步到公众号之外的平台，所以晚了半个月(3月29日发布)，但还是再发上来吧。
有需求,就要动手丰衣足食...公司考虑兼容IE9,那么css3 animation写的loading就无缘了 因为keyframes IE10+ , 那么要实现会动且可控的(颜色,大小),好像就剩下svg大佬了;
阅读目录 D3.js — Data-Driven Documents Google Charts ChartJS Chartist.js n3-charts Ember Charts Smoothie Charts Chartkick ZingChart Highcharts JS Fusioncharts Flot amCharts EJS Chart uvCharts 几乎所有的控制面板都会用到图表，它们能够快速有效的展示复杂的统计。此外，一个好的图也可以提高你的网站的整体设计。 这篇文章为大家展示一些
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
