You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
if(location.protocol==='http:'&&location.hostname!=='localhost')location.protocol='https:';if('paintWorklet'inCSS){CSS.paintWorklet.addModule('./app.js');}else{document.body.innerHTML='You need support for <a href="https://drafts.css-houdini.org/css-paint-api/">CSS Paint API</a> to view this demo :(';}constbutton=document.querySelector('#ripple');letstart=performance.now();letx,y;document.querySelector('#ripple').addEventListener('click',evt=>{button.classList.add('animating');[x,y]=[evt.clientX,evt.clientY];start=performance.now();requestAnimationFrame(functionraf(now){console.log(start,now);constcount=Math.floor(now-start);// 这里借用了css 变量,然后就可以在worklet中动态获取值button.style.cssText=`--ripple-x: ${x}; --ripple-y: ${y}; --animation-tick: ${count};`;if(count>1000){button.classList.remove('animating');button.style.cssText=`--animation-tick: 0`;return;}requestAnimationFrame(raf);});});
关于
Houdini
的印象还是在去年,然后也只是听过有这么个东西,但也只仅仅停留在听过。但为何今天会重新留意这个东西?因为闲来无聊,就去逛了某大佬的博客,逛着逛着,突然看到他写的一篇关于水波纹,重点不在于此,在于blog的最后来了句,用Houdini
来实现,动画会更加容易。于是就打算看看这个东西。关于水波纹的实现,到codeopen上一搜一大堆,直接来一个链接吧,Ripple Button。如果单用css来实现,可以考虑使用
伪类加径向渐变
,最后加点transition
来实现,如果加上js
来获取点击时的位置,就能做到更加好看的效果,这个不是文本的重点:Houdini简介
总的来说Houdini就是开发者可以调用CSS的API,来扩展CSS,并且允许开发者参与到浏览器渲染引擎的样式和布局流程中。它提供了诸如
painting API
,Layout API
,parsing API
,Typed OM
等API。接下来我们就来试试其中的paint api
(由于有些浏览器暂不支持),主要参考官方提供的demo。准备
Paint API
必须要在支持 https 服务器上或者本地localhost
上才能使用。所以如果你是在本地开发,可以用http-server
在本地快速搭建一个服务器。要记得
禁用
浏览器缓存
,让最新的worklets
立马生效。目前暂时无法在
worklets
中打断点或者插入debugger
,不过console.log()
还是可以用的。这里我尝试了使用
parcel
来本地开发,但必须将worklet
放置在dist
目录下才能生效:试试
painting
同样我们实现其上面水波纹效果
下面是相关的动画实现,其中借用了
requestAnimationFrame
:重点来了,我们定义的
paint api
放在哪里呢?它不能直接像js一样被嵌入调用,而是需要使用worklet来帮助我们,像上面看的一样CSS.paintWorklet.addModule('./app.js');
,在paintWorklet
中添加一个我们自定义的脚本模块。worklet独立于主线程之外,不直接与DOM互动,特点为轻量且生命周期较短。worklet生命周期:
主线程
worklet进程
,用于"存放"后续被加载进来的worklet
。这些进程独立于
主线程,这样就不会阻塞
主线程worklet.addModule
来异步加载worklet
下面是我们注册的
ripple
:这里调用了
registerPaint
来注册我们需要的ripple
,该函数由一个name
和paint类
构成,其中inputProperties
静态方法用来获取该元素上的一些css
属性值,并且传入到paint
方法中作为第三个参数。paint方法就是我们实际"绘画"的地方,它提供了三个参数:一个canvas的context变量
、当前画布的大小
即当前dom元素的大小,以及当前dom元素的css属性
properties(在inputProperties返回的)。其中canvas的context变量没有实现canvas中例如对img的处理、drawFocusIfNeeded/scrollPathIntoView、fillText/strokeText、CanvasTextAlign/CanvasTextBaseline等的实现。总的来说就是利用canvas来进行绘图,这里就有想象力了。layout
api与paint
的api编写方式基本一样,不过调用的是registerLayout
,以及类里面的调用方法也有所不同,但浏览器的支持性不是那么好,试了一个官方提供的demo都没生效,-_-
,还有animation-worklet
,直接告诉我不支持,用其polyfill
也还是有bug
。houdini
还是有一段路要走啊......关于各个浏览器对Houdini的推进程度,看你点击如下链接查看:Is Houdini ready yet‽
至于其他的几个api以及houdini的现状,有兴趣的可以从下面的参考资料中了解:
参考资料:
Houdini:CSS 领域最令人振奋的革新
和 Houdini, CSS Paint API 打个招呼吧
Houdini Samples:houdini的demo
CSS-TAG Houdini Editor Drafts:houdini编辑草案
Houdini工作组规范
The text was updated successfully, but these errors were encountered: