CSS3 2D Transform Matrix

给自己出了一道题如下:

在某个大矩形中心有一个黄色的矩形,对该黄色矩形进行一系列transform变换得到灰色矩形;

以大矩形中心为坐标原点,屏幕水平向左为X 轴正方向,屏幕垂直向上为Y 轴正方向,黄色矩形初始位置中心在坐标原点,根据其宽高可以得到其初始位置四个顶点的坐标initPoints

那么求黄色矩形经过一系列变换后新的顶点坐标。

在线地址:https://newbieyoung.github.io/CSS_learn/transform3.html

Read More

运动模糊滤镜

运动模糊是指快速运动的物体造成明显的模糊拖动痕迹;

以简单的直线运动为例,运动模糊应该具有两个参数,分别是半径长度和角度;

比如在Sketch中如下:

但是 CSS、Canvas、SVG 的滤镜均不支持运动模糊。

那是不是意味着如果设计师只是对一个很简单的图形使用了Sketch中的运动模糊滤镜,我们在重构时就必须使用图片来实现呢?

Read More

聊一聊 ThreeJS 反锯齿

之所以会折腾这个问题主要是因为自己的魔方微信小游戏在Android机型中存在莫名其妙的锯齿问题;

那怕是已经在创建WebGLRenderer渲染器时设置了反锯齿参数。

曾经有人问我遇到锯齿问题怎么办?

其实除了设置反锯齿参数之外,我也不知道该怎么办…

因此就趁着这个机会稍微了解了一下。

Read More

不建议使用 CSS3 keyframe transform 实现逐帧动画

一般在使用 CSS3 keyframe transform 实现逐帧动画时,往往会先把逐帧动画图片合成精灵图,然后再使用 transform 改变其位置,这个方法会消耗大量显存(帧数越多,合成的精灵图越大,显存消耗越多),容易出现闪烁的问题。

直接看例子(以下截图都来自于 OPPO FindX Chrome 远程调试):

链接为 https://newbieyoung.github.io/Html_learn/animation/demo1.html

Read More

精灵图在 Lottie Web 动画中的应用

Lottie是一套跨平台的平面动画解决方案;设计师使用AE设计动画,然后通过插件将动画导出成定义好的json文件;之后开发人员只需要依赖这个 json 文件和对应平台的Lottie动画库就可以很方便的在相应平台中实现动画了。

普通示例

普通示例在线预览链接为 https://newbieyoung.github.io/lottie-web-sprite/normal.html

源代码在 lottie-web-sprite 项目中。

Read More