站内搜索

本次搜索找到结果 18 条

前段时间我开源了一个叫 [Animaris][1] 的项目,这个项目是使用 ThinkJS + MongoDB + React + Antd 开发的移动端 WebView 接口文档系统。平常大家见到的接口文档无非就是 HTTP API 接口文档,要么就是框架/库提供的接口方法文档。对于这种 WebView 的接口提供文档基本上没有。借着业务的需求我做了这么一个项目,用来解决以下两个问题:

  1. 移动端接口编写并生成可视化文档
  2. 移动端接口前端开发环境模拟问题

如果有相关需求的同学也欢迎使用,感兴趣的同学也欢迎 [star][2]。咳咳,回到本文的重点,项目开发的差不多的时候我就准备给它设计一款 LOGO 了,以下是成品效果图。虽然我没有学过绘画没有很好的设计功底,但是我相信简单的形状也能发挥不错的效果,那么我就给大家讲讲我是如何设计这款 LOGO 的。

animaris

原文:https://imnerd.org/svg-animation-in-action.html

SVG 是基于 XML 的矢量图形描述语言,可以近似理解成 HTML,所以能和 JS 以及 CSS 进行交互。 特别是 CSS,配合 CSS Animation 就能实现一些令人心旷神怡的动画,这实在是让人兴奋。下面我们就来看看 SVG 配合 CSS 实现动画的一些方法。

本文内容主要是我之前分享的文字版,若想看重点的话可以看之前的 Slide:

也可以查看分享视频:http://cloud.live.360vcloud.net/theater/play?roomid=2079

原文:https://www.h5jun.com/post/sixty-lines-of-code-animation.html

最近在给学生上课,上周六的第一堂课是关于 JavaScript 动画的内容,其中包括一些简单的动画,比如匀速或者匀加/减速的运动,也包括复杂一些的组合动画。而动画的基本原理,在我之前的文章已经有了详细的介绍。在这里,我想谈一谈的是,我们可以如何针对现代浏览器设计更加简单的 API,来实现动画的序列播放。

原文:https://www.h5jun.com/post/the-12-best-weekly.html

值得订阅的 12 份优质前端期刊

作为前端从业人员,能够及时接收行业最新最前沿技术资讯,是个人成长的一项必备技能。大家都知道前端发展迅速,每周都有新东西出现。那么行业里面究竟有哪些值得关注和订阅的前端资讯类期刊呢?小编将多年整理和收集的 12 份优质期刊分享给大家(排名不分先后)

原文:https://www.h5jun.com/post/raspberry-pi.html

Raspberry Pi(树莓派),是英国的树莓派基金会所开发的单板计算机,它是由 Eben Upton 以及他的同事设计的,最初的目的是以低价硬件及自由软件促进学校的基础计算机科学教育。

树莓派 Model B+

树莓派 Model B+

在物联网(IoT)高速发展的今天,树莓派以低廉的价格、开放的硬件/软件生态、灵活的通用输入输出(GPIO)接口,成为学习、研究物联网和万维物联网(WoT)的理想设备。

原文:http://www.zcfy.cc/article/607

随着我们建立的网站逐渐变得更像 app,web 平台也需要跟上,提供给开发者所需的创建高可访问性用户体验的工具,这一点很重要。

最近,我遇到两个场景,在这两个场景下我添加合适的键盘支持到我所创建的组件上是极其困难的。在经过很多实验和研究之后,我比较清晰地意识到可能在 web 平台上缺少了一些原语,如果有这些原语,我的工作将会变得简单一些。我将会解释这两个场景,并涵盖一些关于如何解决这两个问题的思路。

原文:http://www.zcfy.cc/article/457

用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域。

你有没有想过,为什么我们要有这么多技术来隐藏元素,而它们看起来都实现的是同样的效果?每一种方法实际上与其他方法之间都有一些细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法。这篇教程将覆盖到那些你需要记住的细小不同点,让你根据不同情况选择上面这些方法中适合的方法来隐藏元素。

原文:http://www.zcfy.cc/article/396

我每天都使用 Facebook,也许太着迷了,以至于我总想潜入他们内部。我说的“潜入”指的是研究他们用来实现许多用户界面和交互的 JavaScript。

几个月之前,我开始思考在聊天中,当对方正在打字时,出现的那个正在输入的指示符。这只是一个 UI 的小细节,但是能透露出你的交谈者许多信息。如果正在输入的指示符反复出现和消失,说明对方在犹豫什么。如果正在输入的指示符是持续出现的,说明他们与你的谈话可能比较轻松。有时候看到它们出现然后又消失,对方却最终没有说话,没有比这更折磨人的了。

The typing indicator

这动画看起来像是张自以为是的脸,我觉得它在嘲弄我!

原文:https://www.h5jun.com/post/animations-you-should-know.html

这是我今年为新人设计的一门课程的文字精简版,完整的PPT可参考:http://matrix.h5jun.com/slide/show?id=117

简单的 JS 动画

在浏览器里,动画实现的基本原理非常简单明了,其实就是采用定时器改变显示元素的一些属性的过程。不管是 JavaScript 操作 DOM 的动画,还是 CSS3 动画,还是 Canvas 动画,或者 SVG 动画,区别只是使用的 API、何种定时器,影响什么环境(DOM/Canvas/SVG/WebGL)。

基本动画

var deg = 0;
block.addEventListener('click', function(){
  var self = this;
  requestAnimationFrame(function change(){
    self.style.transform = 'rotate(' + (deg++) +'deg)';
    requestAnimationFrame(change);
  });
});

上面的例子里,我们使用了定时器 requestAnimationFrame,requestAnimationFrame 是浏览器专为渲染刷新设计的定时器接口,在早期版本的浏览器里,我们可以用 setTimeout 或者 setInterval 来代替它。定时器改变了方块元素的角度,每一次定时器触发我们就刷新并增加一次它的角度值,这样就产生了方块不断旋转的动态效果。

这就是我们需要的动画,几行原生JS代码就够了,是不是很简单呢?

事实上,上面的动画不是最佳的实现方法。它存在着几个明显的改进点。

原文:http://www.zcfy.cc/article/306

Google 提出了一项计划推进 HTML5 默认取代 Flash。Google 计划在2016年第4季度,只允许10个域名默认支持 Flash ,其他域名默认显示HTML5,如果依然要使用 Flash ,浏览器将询问用户是否允许运行Flash插件。

google_chrome_logo

Flash 已经被使用了好多年了。严重的安全问题频繁出现新漏洞,使得 Flash 逐渐失去市场,HTML5 成为新宠。Chrome 和 Flash 这对多年的好基友也到了该了断的时候。