始于初

最近公司微信公众号想使用 Apple 式的圆角阴影卡片做文章推荐。这种效果用 Adobe XD 可以轻松做出来，但是没法要求所有编辑都去学习新软件，所以就打算用前端实现一个小工具。效果如下： 更新： 已增加 Electron，可打包成 dmg 或 exe 文件运行。详见 Git…

这篇是学习和回顾canvas系列笔记的第六篇，完整笔记详见：canvas核心技术。 在上一篇canvas核心技术-如何实现复杂的动画笔记中，我们详细讨论了在制作复杂动画时，需要考虑时间因素，物理因素等，同时还回顾了如何使用缓动函数来扭曲时间轴实现非线性运动，比如常见的缓入，缓出…

这种整页翻转的效果主要是做rotateY的动画，并结合一些CSS的3d属性实现。 主要是通过计算页面翻折过来的位置。 这两种原理上都不是很复杂，需要各个细节配合好，形成一个连贯的翻书动画。 我们先重点说一下第一种翻页效果的实现。 1. 基本布局 一个li.paper就表示一张纸…

1. lottie 简介 Lottie是一个iOS，Android和React Native库，可以实时渲染After Effects动画，并且允许本地app像静态资源那样轻松地使用动画。Lottie使用名为Bodymovin的开源After Effects的扩展程序导出的JS…

动态化作为移动客户端技术的一个重要分支，一直是业界积极探索的方向。目前业界流行的动态化方案，如Facebook的React Native，阿里巴巴的Weex都采用了前端系的DSL方案，而它们在iOS系统上能够顺利的运行，都离不开一个背后的功臣：JavaScriptCore（以下…

前一段时间在做一些H5页面，需求中落地页占比较大，落地页承担的职责就是引流。引流有两种形式，同时也是我们对唤端的定义：引导已下载用户打开APP，引导未下载用户下载APP。 引导已下载用户打开APP，从数据上说用户停留在APP中的时间更多了，是在提高用户粘性；从体验上说，APP体…

自从一年前发布了Vuejs小书的电子书，也有些日子没有碰过它们了，现在因为项目的缘故，需要使用JavaScript全栈开发。所以，我得把这个全栈环境搭建起来。 整个系列，是会采用我的一贯风格，就是不疾不徐，娓娓道来，学习完毕，你可以掌握我提到的全系列的知识，并且得到一个可以直接…

1.动画中每颗心都有自己的透明度，位移，角度，缩放的变化动画，针对这些动画，可以分别调用canvas的相关API： 2.在有大于1颗心的情况时，针对每颗心，在实现角度，缩放时必须要保存上一次canvas的状态，改变完成之后在恢复： 3.计算心位移路径(3次被塞尔曲线) 公式： …

我是个很懒的人，开发过程中经常有意无意地刻意避开数学相关的知识，你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 css3 来实现，timer-function 随意选用，最多也就调一下 cubic-bezier，找到看着舒服的就行。但是怎样让动画更顺滑，写出更贴近自然的动画…