整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

CSS设置网页在Safari快速滚动和温柔的回弹

CSS设置网页在Safari快速滚动和温柔的回弹

实现这个效果很简单，只需要加一行css代码即可：

-webkit-overflow-scrolling : touch;

可用以下网页测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta charset="utf-8" />
        <title>scroll</title>
        <style type="text/css">
 .container {
 width : 300px;
 height : 50%;
 -webkit-box-sizing : border-box;
 position : relative;
 overflow-y : auto;
 background-color : cyan;
 -webkit-overflow-scrolling : touch;  /* liuhx:可以把这整行注释掉对比差别 */
 }
 ul {
 height: 50px;
 }
        </style>
    </head>
<body>
    <div align="center">
        <nav class="container">
 <ul>1</ul>
 <ul>2</ul>
 <ul>3</ul>
 <ul>4</ul>
 <ul>5</ul>
 <ul>6</ul>
 <ul>7</ul>
 <ul>8</ul>
 <ul>9</ul>
 <ul>10</ul>
 <ul>11</ul>
 <ul>12</ul>
 <ul>13</ul>
 <ul>14</ul>
 <ul>15</ul>
 <ul>16</ul>
 <ul>17</ul>
 <ul>18</ul>
 <ul>19</ul>
 <ul>20</ul>
        </nav>
    </div>
</body>
</html>

评论

不久看到这样一个很有趣的效果，它的滚动条是沿着圆角边缘滚动的，效果如下

你可以查看原链接来体验一下

https://codepen.io/jh3y/pen/gOEgxbd

这是如何实现的呢？

原效果中由于为了兼容不支持CSS滚动驱动的浏览器，特意用 JS做了兼容，所以看着比较复杂，其实核心非常简单，下面我将用最简短的 CSS 来复刻这一效果，一起看看吧

一、SVG 路径动画

从本质上来讲，其实是一个 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 滚动驱动动画终于正式支持了~

简单来讲，「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 滚动吸附

原效果中还有一个滚动回弹的效果，当滚动到容器边缘时，会自动回弹到起始位置。

其实只需要用到 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 round scroll (juejin.cn)[1]
  • CSS round scroll (codepen.io)[2]

四、总结一下

总的来说，CSS滚动驱动在滚动交互上带来了无限可能，很多以前必须借助 JS来实现的都可以轻易实现，下面总结一下

  1. 从本质上来讲，右侧的滚动条其实是一个 SVG 路径动画
  2. SVG路径可以通过stroke-dasharray设置虚实间隔
  3. 当虚线间隔足够长时，超过路径本身，就能得到一小块实线
  4. 通过改变stroke-dashoffset偏移能够实现路径描边动画
  5. 借助 CSS滚动驱动动画可以将SVG路径动画跟随容器滚动而运动
  6. 滚动回弹效果其实就是CSS scroll snap实现的

作者:XboxYan

来源:微信公众号:前端侦探

出处:https://mp.weixin.qq.com/s/GaakgWhXm6jpY4PfISNHZQ

篇会深化View拖拽实例，利用Flutter Animation、插值器以及AnimatedBuilder教大家实现带动画的抽屉效果。先来看效果：



通过构思，我们可以设想到实现抽屉的方式就是用Stack控件将两个Widget叠加显示，用GestureDetector监听手势滑动，动态移动顶层的Widget，当监听到手势结束的时候根据手势滑动的距离动态将顶部Widget利用动画效果滑动到结束位置即可。

实现底部Widget

class DownDrawerWidget extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Container(child: Center(child: Text("底部Widget",),),);
 }
}

这个Widget太简单了，就不细说了。

实现顶部Widget

class UpDrawerWidget extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Container(child: Center(child: Text("顶部Widget",),),);
 }
}

实现方式和底部是一样的。

实现可以移动的容器

上面两个Widget都是单纯用来显示的Widget，因此继承了StatelessWidget。接下来我们需要根据手势动态移动顶部的Widget，因此需要继承StatefulWidget。

// 顶部Widget
class HomePageWidget extends StatefulWidget {
 @override
 State<StatefulWidget> createState()=> HomePageState();
}
class HomePageState extends State<HomePageWidget>
 with SingleTickerProviderStateMixin {
 @override
 void initState() {...}
 @override
 void dispose() {...}
 @override
 Widget build(BuildContext context) {...}
 void _onViewDragDown(DragDownDetails callback) {...}
 void _onViewDrag(DragUpdateDetails callback) {...}
 void _onViewDragUp(DragEndDetails callback) {...}
}

初始化状态initState()

这个方法是在Widget初始化的时候系统的回调函数，我们需要在该函数中初始化动画

AnimationController controller;
@override
void initState() {
 // 初始化动画控制器，这里限定动画时常为200毫秒
 controller=new AnimationController(vsync: this, duration: const Duration(milliseconds: 200));
 // vsync对象会绑定动画的定时器到一个可视的widget，所以当widget不显示时，动画定时器将会暂停，当widget再次显示时，动画定时器重新恢复执行，这样就可以避免动画相关UI不在当前屏幕时消耗资源。
 // 当使用vsync: this的时候，State对象必须with SingleTickerProviderStateMixin或TickerProviderStateMixin；TickerProviderStateMixin适用于多AnimationController的情况。
 // 设置动画曲线，就是动画插值器
 // 通过这个链接可以了解更多差值器，https://docs.flutter.io/flutter/animation/Curves-class.html，我们这里使用带回弹效果的bounceOut。
 CurvedAnimation curve=new CurvedAnimation(parent: controller, curve: Curves.bounceOut);
 // 增加动画监听，当手势结束的时候通过动态计算到达目标位置的距离实现动画效果。curve.value为当前动画的值，取值范围0~1。
 curve.addListener(() {
 double animValue=curve.value;
 double offset=dragUpDownX - dragDownX;
 double toPosition;
 // 右滑
 if (offset > 0) {
 if (offset > maxDragX / 5) {
 // 打开
 toPosition=maxDragX;
 isOpenState=true;
 } else {
 if (isOpenState) {
 toPosition=maxDragX;
 isOpenState=true;
 } else {
 toPosition=0.0;
 isOpenState=false;
 }
 }
 } else {
 if (offset < (-maxDragX / 2.0)) {
 // 关
 toPosition=0.0;
 isOpenState=false;
 } else {
 if (isOpenState) {
 toPosition=maxDragX;
 isOpenState=true;
 } else {
 toPosition=0.0;
 isOpenState=false;
 }
 }
 }
 dragOffset=(toPosition - dragUpDownX) * animValue + dragUpDownX;
 // 刷新位置
 setState(() {});
 });
 }

结束Widget dispose()

当Widget不可用将被回收的时候，系统会回调dispose()方法，我们在这里回收动画。

@override
void dispose() {
 controller.dispose();
}

记录按下的位置

 double dragDownX=0.0;
 void _onViewDragDown(DragDownDetails callback) {
 dragDownX=callback.globalPosition.dx;
 }

拖动的时候刷新View的位置

/**
 * 最大可拖动位置
 */
 final double maxDragX=230.0;
 double dragOffset=0.0;
 void _onViewDrag(DragUpdateDetails callback) {
 double tmpOffset=callback.globalPosition.dx - dragDownX;
 if (tmpOffset < 0) {
 tmpOffset +=maxDragX;
 }
 // 边缘检测
 if (tmpOffset < 0) {
 tmpOffset=0.0;
 } else if (tmpOffset >=maxDragX) {
 tmpOffset=maxDragX;
 }
 // 刷新
 if (dragOffset !=tmpOffset) {
 dragOffset=tmpOffset;
 setState(() {});
 }
 }

离手的时候记录位置并执行动画

 /**
 * 脱手时候的位置
 */
 double dragUpDownX=0.0;
 void _onViewDragUp(DragEndDetails callback) {
 dragUpDownX=dragOffset;
 // 执行动画，每次都从第0帧开始执行
 controller.forward(from: 0.0);
 }

支持移动的Widget

@override
 Widget build(BuildContext context) {
 return Transform.translate(
 offset: Offset(dragOffset, 0.0),
 child: Container(
 child: GestureDetector(
 onHorizontalDragDown: _onViewDragDown,
 onVerticalDragDown: _onViewDragDown,
 onHorizontalDragUpdate: _onViewDrag,
 onVerticalDragUpdate: _onViewDrag,
 onHorizontalDragEnd: _onViewDragUp,
 onVerticalDragEnd: _onViewDragUp,
 child: Container(
 child: new UpDrawerWidget(),
 ),),),);}

Flutter动画

总结一下，想在Flutter中实现动画，需要先创建一个AnimationController控制器；如果有特殊的插值要求，再创建一个插值器，调用controller.forward()方法执行动画，通过addListener()的回调改变对应数值之后调用setState(() {})方法刷新位置即可。

Flutter API还提供AnimatedBuilder用来简化实现动画的复杂性，让我们不用手动调用addListener()方法。


在线咨询
上一篇：SEO｜关于静态地址、动态地址、伪静态
下一篇：HTML语言是什么？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 瓯海区 济宁 赤壁市 宽城满族自治县 玉山县 梧州 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服