小程序学习-滚动驱动动画示例

2023-10-22 18:30:40

小程序学习-滚动驱动动画示例

(1) 设置控件居中，需要设置父控件的css样式

view {
  display: flex;/*flex弹性布局*/
  align-items: center;/*item在交叉轴上的对齐方式*/
  justify-content: center;/*item在主轴上的对齐方式*/
}

(2) #scroller：scroll-view，整个scroll-view

scroll-y：y方向滚动；
throttle：不清楚，查了文档scroll-view没有这个属性；
data-status-bar-height：将数据绑定到组件，事件触发时，在target的dataset对象中可以获取到转换后的属性statusBarHeight；

(3) .nav：view，导航栏区域；通过style行内样式设置padding-top，不推荐使用行内样式；

wxcss文件中的.nav样式：

.nav {
  position: fixed;/*fixed相对于浏览器窗口定位；absolute相对于有position属性的父元素定位；relative相对于自身的原始位置定位*/
  top: 0;
  width: 100%;
  background-color: #000;
  height: 44px;
  padding-top: env(safe-area-inset-top);/*获取上边框安全距离，适配iphoneX全面屏*/
  z-index: 1;/*设置元素的堆叠顺序，数字大的在上面，可以为负值，必须是设置了position属性的元素*/
}

open-data 用于展示微信开放的数据。userNickName获取用户昵称；userAvatarUrl获取用户头像；userProvince获取用户省份；userCity获取用户城市；
.search_bar搜索框: style行内样式设置top属性；因为.search_bar的position属性值为absolute，相对于有position属性的父元素定位，即为相对于.nav进行定位，距离它的顶部20px。

.search_input，输入框的样式：

.search_input { 
  text-align: left;
  display: inline-block;/*行内块级元素*/
  width: 10%;/*宽度为父元素宽度的10%*/
  background-color: #F3F3F3;
  color: #888;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
  border-radius: 3px;/*圆角*/
  overflow: hidden;/*超过部分隐藏*/
}

.search_input text：text，输入框中的文本样式：

.search_input text {
  padding-left: 20px;/*内左边距，预留icon位置*/
  line-height: 25px;
  display: inline-block;
  height: 25px;
}

.search_bar icon: icon，微信提供的一些默认图标

(4) .info内容区域

.info的样式：

.info {
  margin-top: env(safe-area-inset-top);/*外上边距，预留状态栏高度*/
  padding-top: 44px;/*内上边距，预留nav高度*/
  /* display: flex; */
  background-color: white;
}

.avatar头像，行内样式top: {{((statusBarHeight + 44) - 80) - 5}}px，设置top为-21px和sticky一起使用当头像位置超过父元素（此处为scroll-view）21px之后固定；css文件中的样式为：

.avatar {
  /* display: inline-block; */
  display: flex;
  border-radius: 100%;
  border: 2px solid #FAFAFA;
  height: 100px;
  width: 100px;
  overflow: hidden;
  /* position: absolute; */
  left: 20px;
  /* top: 10px; */
  will-change: transform;/*提前告知浏览器该元素要进行transform动画，避免开始动画时闪屏*/
  /* transition: transform .03s linear; */
  z-index: 2;/*在导航栏图层上面*/
  /* contain: strict; */
  position: sticky;/*粘性定位，主要用在scroll-view中，相对于最近的scroll-box类型（含有滚动条或者设置了overflow属性）的父元素进行定位，当超过了设置的top/right/bottom/left的值时会固定*/
  /* top: -20px; */
  transform: translateY(-20px);/*通过transform属性对元素进行旋转，缩放，倾斜，平移等操作，顺序为rotate, scale, skew, translate*/
  transform-origin: left 75%;/*元素transform动画的原点，相对于元素左上角的距离，默认为自身中心点*/
}

.intro简介，bindtap绑定点击事件
.scroller2: scroll-view，页面中间的scroll-view；scroll-x设置滚动方向为横向滚动；bindscroll绑定滚动事件；bindtouchend绑定触摸结束事件；scroll-with-animation设置滚动条位置时是否使用动画；scroll-left设置横向滚动条的位置；

menu_wrap，scroll-view下的子控件，设置足够的宽度来显示内容；样式为：

.menu_wrap {
  white-space: nowrap;/*所有内容显示在一行，不换行*/
  padding: 9px 0;
  position: relative;
}

.menu_item_more查看更多按钮，通过滚动动画控制是否显示；

(5) js内容

scrollLeft和scrollTop属性，该元素显示内容与实际内容的距离，或者说向左或向上滚动的距离
scrollWidth和scrollHeight属性，该元素内容的实际宽度和高度
deltaX和deltaY属性，向右和向上滚动时返回正值，向左和向下滚动时返回负值
createSelectorQuery()创建选择器，用于选取指定元素
select()指定选择器，选取第一个匹配到的元素
fields(Object, Function)获取节点信息，Object中指定需要返回哪些节点信息，Function回调方法，里面有需要的节点信息
this.animate(selector, keyframes, duration, callback)关键帧动画

this.animate(selector, keyframes, duration, ScrollTimeline)滚动驱动的动画，示例：

//this.animate(selector, keyframes, duration, ScrollTimeline)滚动驱动的动画
this.animate(‘.avatar‘, [{
  borderRadius: ‘0‘,
  borderColor: ‘red‘,
  transform: ‘scale(1) translateY(-25px)‘,
  offset: 0,//offset关键帧的偏移，范围【0，1】标识开始和结束帧
}, {
  borderRadius: ‘25%‘,
  borderColor: ‘green‘,
  transform: ‘scale(.65) translateY(-25px)‘,
  offset: .4,
}, {
  borderRadius: ‘50%‘,
  borderColor: ‘blue‘,
  transform: `scale(.3) translateY(-20px)`,
  offset: 1
}], 2000, {
  scrollSource: ‘#scroller‘,//滚动元素
  timeRange: 2000,//时间
  startScrollOffset: 0,//开始滚动动画的位置
  endScrollOffset: 85,//结束滚动动画的位置
})

小程序学习-滚动驱动动画示例

码农公寓

小程序学习-滚动驱动动画示例

相关文章