整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
不久看到这样一个很有趣的效果，它的滚动条是沿着圆角边缘滚动的，效果如下
你可以查看原链接来体验一下
https://codepen.io/jh3y/pen/gOEgxbd
这是如何实现的呢？
原效果中由于为了兼容不支持CSS滚动驱动的浏览器，特意用 JS做了兼容，所以看着比较复杂，其实核心非常简单，下面我将用最简短的 CSS 来复刻这一效果，一起看看吧
从本质上来讲，其实是一个 SVG 路径动画。
具体如何实现呢？
首先，我们通过设计软件绘制一个这样的路径
注意设置描边的大小还有端点的类型，比如下面是round效果
然后导出SVG，可以得到这样一段代码
<svg viewBox="0 0 31 433" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4C9.96737 4 15.6903 6.37053 19.9099 10.5901C24.1295 14.8097 26.5 20.5326 26.5 26.5V406.5C26.5 412.467 24.1295 418.19 19.9099 422.41C15.6903 426.629 9.96737 429 4 429" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
然后，如何让这段SVG动起来呢？
很简单，现在SVG是一段实线，我们可以通过stroke-dasharray设置成虚线，比如
path{
stroke-dasharray: 80
}
这样会得到一个实线和虚线间隔都是80的虚线
如果希望虚线空白的地方更大一点，该怎么设置呢?很简单，继续往后加
path{
stroke-dasharray: 80 120
}
效果如下
所以，这种写法其实相当于把当前的值无限重复，示意如下
当然，我们这里不需要设置的这么复杂，只需要一小段实线就够了，所以是实现加上一段足够长的虚线（超过路径本身就行），实现如下
path{
stroke-dasharray: 80 1000
}
这样就得到了一小段实线
那么，如何让他动起来呢？很简单，改变一下偏移就可以，这个可以用stroke-dashoffset来实现
比如，我们
@keyframes scroll {
to {
stroke-dashoffset: -370
}
}
path{
stroke-dasharray: 80 1000;
animation: scroll 3s alternate-reverse infinite;
}
效果如下
是不是有点像呢？
我们再调整一下起始偏移量，让它出去一点
@keyframes scroll {
0% { stroke-dashoffset: 75; }
100% { stroke-dashoffset: -445; }
}
这样就更接近我们想要的效果了
整个运动原理就是这样了，接着往下看
接下来需要通过滚动驱动动画将容器滚动与CSS动画「联动」起来。
关于CSS 滚动驱动可以参考我之前写的这篇文章：CSS 滚动驱动动画终于正式支持了~
简单来讲，「CSS 滚动驱动动画」指的是将「动画的执行过程由页面滚动」进行接管，也就是这种情况下，「动画只会跟随页面滚动的变化而变化」，也就是滚动多少，动画就执行多少，「时间不再起作用」。
先简单布局一下
<div class="list">
<div class="item" id="item_1">1</div>
<div class="item" id="item_2">2</div>
<div class="item" id="item_3">3</div>
<div class="item" id="item_4">4</div>
<div class="item" id="item_5">5</div>
<div class="item" id="item_6">6</div>
<div class="item" id="item_7">7</div>
</div>
美化一下
然后，我们将默认的滚动条隐藏，用我们这个 SVG路径来代替，由于需要绝对定位，我们再套一层父级
<div class="wrap">
<div class="list">
<div class="item" id="item_1">1</div>
<div class="item" id="item_2">2</div>
<div class="item" id="item_3">3</div>
<div class="item" id="item_4">4</div>
<div class="item" id="item_5">5</div>
<div class="item" id="item_6">6</div>
<div class="item" id="item_7">7</div>
<!--滚动条-->
<svg class="scroller" viewBox="0 0 31 433" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="scroller_thumb" d="M4 4C9.96737 4 15.6903 6.37053 19.9099 10.5901C24.1295 14.8097 26.5 20.5326 26.5 26.5V406.5C26.5 412.467 24.1295 418.19 19.9099 422.41C15.6903 426.629 9.96737 429 4 429" stroke="black" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
相关CSS如下
.wrap{
position: relative;
}
.scroller {
position: absolute;
top: 0;
bottom: 0;
right: 0;
pointer-events: none;
height: -webkit-fill-available;
margin: 5px;
}
.scroller_thumb{
stroke: hsl(0 0% 100% / 0.5);
stroke-dasharray: 80 450;
stroke-width: 8px;
animation: scroll both 5s linear;
}
这样结构就搭好了，只是滚动条会自动播放
接下来就是最关键的一步，加上滚动驱动动画
.scroller_thumb{
animation: scroll both 5s linear;
animation-timeline: scroll();
}
但是这样是不起作用的，直接使用scroll()会自动寻找它的相对父级，也就是.wrap，但实际滚动的其实是.list，所以这种情况下我们需要具名的滚动时间线，实现如下
.list{
scroll-timeline: --scroller;
}
.scroller_thumb{
animation: scroll both 5s linear;
animation-timeline: --scroller;
}
这样SVG路径动画就能跟随容器滚动而运动了
原效果中还有一个滚动回弹的效果，当滚动到容器边缘时，会自动回弹到起始位置。
其实只需要用到 CSS scroll snap 就可以了
https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type
实现很简单，给滚动容器添加scroll-snap-type属性，表示这是个允许滚动吸附的容器
.list{
scroll-snap-type: y mandatory;
}
然后就指定需要吸附的点了，由于需要回弹的效果，所以滚动容器的首尾需要一个空白的容器，这里直接用两个伪元素来生成
.list::before,
.list::after{
content: '';
height: 50px;
flex-shrink: 0;
}
效果如下
然后我们设置滚动吸附点就行了，设置第一个元素顶部和最后一个元素底部，其他元素居中就行了
.item{
scroll-snap-align: center;
}
.item:first-child{
scroll-snap-align: start;
}
/*最后一个元素是 SVG，所以这里用倒数第二个元素*/
.item:nth-last-child(2){
scroll-snap-align: end;
}
这样就实现了文章开头的效果了
完整代码可以查看以下链接（无任何 JS）
总的来说，CSS滚动驱动在滚动交互上带来了无限可能，很多以前必须借助 JS来实现的都可以轻易实现，下面总结一下
作者:XboxYan
来源:微信公众号:前端侦探
出处:https://mp.weixin.qq.com/s/GaakgWhXm6jpY4PfISNHZQ
者：吴冠禧 WecTeam
转发连接：https://mp.weixin.qq.com/s/u5GHsA0vHz8A_MmGslRw2g
存盘粒子运动模糊弧形轨迹实现
作者:李全宏
粒子渲染出带曲线的运动轨迹往往需要很多技巧性的操作，本文与大家分享一种houdini arnold 渲染带曲线的运动模糊的方法。此方法也适用于其他渲染器。
一般粒子渲染运动模糊常见问题：
•1.解算粒子直接渲染（不存盘）可以形成运动的弧度轨迹模糊（有substep),但是粒子量大了不可行！
•2.粒子量较大需要存为硬盘缓存，这时运动模糊一般会用v通道来渲染，一旦速度快就会形成很明显的直线，很不舒服，不真实。
•3.对于运动轨迹需要高度平滑的运动模糊，以上两种方法都不太适用
原理分析：
Motion Vector 方式：
根据渲染器不同读取一帧内的一个状态，再指定一个世界坐标下的运动向量，最终渲染时转化为raster空间做像素级别的模糊。
Substep方式：
这种方式的运动模糊在快门开启到快门关闭这段时间内本身存在多个位置状态，所以提高geometrysample，就可以在一帧范围内渲染出有弧度轨迹的运动模糊.
所以要获得弧度轨迹的运动模糊必须得到—substep
Substep 获取方法：
•Dop解算增加substep：
理想很丰满，现实往往比较骨感，算过巨量粒子的都懂，代价实在过高，解算太慢，缓存巨大，渲染加载过慢，等等（设备不差钱当我没说)
•利用现有的帧缓存计算得到substep：
利用前后帧推算出substep的状态，需要考虑两个问题，计算量有多大？准确度够用吗？
cspline()函数来解决
注意事项：
该功能已经做成一个独立SOP节点（hda)Motiontrail，不限于mantra使用，粒子需要id属性，shutter Time可以超过1，最好不要为整数（切记）。
由于需要4帧的粒子数据，所以渲染时候会增加一些缓存加载的时间。
案例文件图像的渲染用的是arnold。
运动模糊的Geometey Sample需要相应的提高
关于存盘粒子运动模糊文件下载地址：https://www.dxxnvfx.com/article-14938.html
*请认真填写需求信息，我们会在24小时内与您取得联系。
